CSS3动画实现左右滚动效果

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。项目中一些比较酷炫的页面效果就是CSS3做出来的。今天我们做一个简单的左右滚动的动画效果。

效果如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css3动画</title><link rel="stylesheet" href="../../images/icon/iconfont/iconfont.css" /><style>html,body {height: 100%;width: 100%;margin: 0;padding: 5px;box-sizing: border-box;}.animation {padding: 5px 0;display: inline-block;text-align: center;background: bisque;overflow: hidden; /* 移动过程中隐藏超出容器的部分 */}/* 定义动画 */@keyframes Animation {0% {/* 动画开始具体值：从距离动画元素顶端的xx位置处开始执行动画。比如200px，它会从距离动画元素顶端200px的位置开始执行动画。百分比：根据动画元素的宽度进行比例换算。0%：从动画元素顶端开始执行动画，100%：从动画元素尾部开始执行动画，200%：从距离动画元素宽度2倍的位置开始执行动画。*/transform: translateX(100%);/* transform: translateX(200px); */}100% {/* 动画完成负数表示向左移动的距离动画元素向左移动它自身的宽度后，动画结束*/transform: translateX(-100%);}}.text {/* 要设置成行内元素动画才起效 */display: inline-block;color: brown;width: auto;/* 动画名称 时间 匀速 无限循环 */animation: Animation 10s linear infinite;}</style></head><body><div class="animation"><span class="text">今天有雨，不要忘了收衣服！</span></div></body>
</html>

CSS3动画实现左右滚动效果相关推荐

html svg波浪,CSS3+SVG 实现波浪滚动效果
CSS3+SVG 实现波浪滚动效果实现代码如下focus__a和focus__b是绝对定位,focus__b在focus__a之上以下是HTML代码以下是样式和CSS3动画代码 .focus__ ...
CSS3动画实现高亮光弧效果，循环闪动效果
主要运用css动画进行循环播放,修改css渐变效果元素 <!Doctype html> <html><head><meta name="viewpo ...
css3动画实现吃豆豆效果
css3动画实现吃豆豆效果实现效果: HTML <div class="box"><span></span></div> CSS ...
html中怎样制作图片滚动,CSS3 制作的图片滚动效果
实现效果实现代码 html CSS3 @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { ...
css520.520,30个纯css3动画代码片段和效果演示合集
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
使用CSS3动画实现文字滚动
以前实现文字滚动经常使用marquee标签,现在随着H5的兴起,鉴于该标签糟糕的体验,这个标签已经被W3C标准废弃了,尽管现在浏览器还支持这个标签,但是寻找文字滚动的新方式才是未来的选择.也有很多人会 ...
html 鼠标图标做成动画效果,很好看的css3动画按钮鼠标悬停效果【2个实例】
前一篇文章我介绍了5个悬停效果非常漂亮的css3动画按钮实例,本文将再通过2个实例介绍悬停效果很酷的css3实现的动画按钮. 实例一实例一:css3实现的动画按钮我们做一个有星星的圆形按钮!当然, ...
CSS3动画常用贝塞尔曲线-效果演示
CSS与贝塞尔曲线 CSS3动画常用贝塞尔曲线实现更加自然,物理感的动画. demo演示列举了一些常见的贝塞尔曲线数值,用于做动画的存档. .a1{animation: stretch 1s cub ...
CSS3动画实现背景滚动
在上一个模仿微信打飞机的游戏中,在敌机掉落下来时,如果背景图片也可以一直无穷滚动的话,那么效果就会更好. 现在就是要利用CSS3来实现一张图片的无穷滚动. 首先了解一下CSS3的动画属性: ①.ani ...
css3动画（animation）效果1-漂浮的白云
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

CSS3动画实现左右滚动效果

CSS3动画实现左右滚动效果相关推荐

最新文章

热门文章