基于CSS3 animation动画属性实现轮播图效果


Posted in HTML / CSS onSeptember 12, 2017

animation简介:

CSS3的animation属性可以像Flash制作动画一样,通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成:

1)通过类似Flash动画中的帧来声明一个动画;

2)在animation属性中调用关键帧声明的动画。

animation属性值:

animation 属性是一个简写属性

语法:animation: name duration timing-function delay iteration-count direction;

animation设置的六个动画属性:

animation-name:规定需要绑定到选择器的 keyframe 名称。取值:

none:(默认)规定无动画效果(可用于覆盖来自级联的动画)。

keyframename:规定需要绑定到选择器的 keyframe 的名称。

animation-duration:规定完成动画所花费的时间,以秒或毫秒计。取值:

time:规定完成动画所花费的时间。默认值是 0,意味着没有动画效果。

animation-timing-function:规定动画的速度曲线。取值:

ease:默认。动画以低速开始,然后加快,在结束前变慢。

linear:动画从头到尾的速度是相同的。

ease-in:动画以低速开始。

ease-out:动画以低速结束。

ease-in-out:动画以低速开始和结束。

cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是从 0 到 1 的数值。

animation-delay:规定在动画开始之前的延迟。取值:

time:(可选)定义动画开始前等待的时间,以秒或毫秒计。默认值是 0。

animation-iteration-count: 规定动画应该播放的次数。取值:

n:定义动画播放次数的数值。

infinite:规定动画应该无限次播放。

animation-direction:规定是否应该轮流反向播放动画。取值:

normal:默认值。动画应该正常播放。

alternate:动画应该轮流反向播放。

animation动画实现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮换</title>
    <style type="text/css">
        div,img{
            margin: 0;
            padding: 0;
        }
        .div_first{
            width: 1000px;
            height: 300px;
            margin-top: 100px;
            margin-left: 250px;
            overflow: hidden;
        }
        .div_second{
            width: 4000px;
            position: relative;
            animation: myimg 12s linear infinite normal; 
        }
        @keyframes myimg{
            0{
                left: 0;
            }
            5%{
                left: 0;
            }
            30%{
                left: -1000px;
            }
            35%{
                left: -1000px;
            }
            60%{
                left: -2000px;
            }
            65%{
                left: -2000px;
            }
            95%{
                left: -3000px;
            }
            100%{
                left: -3000px;
            }
        }
    </style>
</head>
<body>
    <div class="div_first">
        <div class="div_second">
            <img src="images/011-1.jpg" alt=""><img src="images/011-2.jpg" alt=""><img src="images/011-3.jpg" alt=""><img src="images/011-1.jpg" alt="">
        </div>
    </div>
</body>
</html>

图片标签要放在同一行,不然图片之间会有空隙。

总结

以上所述是小编给大家介绍的基于CSS3 animation动画属性实现轮播图效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
 

HTML / CSS 相关文章推荐
CSS3盒子模型详解
Apr 24 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 #HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 #HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 #HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 #HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 #HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 #HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 #HTML / CSS
You might like
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
PHP个人网站架设连环讲(二)
2006/10/09 PHP
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
Script的加载方法小结
2011/01/12 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
python将字符串转换成json的方法小结
2019/07/09 Python
tensorflow 环境变量设置方式
2020/02/06 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
小学教师师德感言
2014/02/10 职场文书
调研汇报材料范文
2014/08/17 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
学校工会工作总结2015
2015/05/19 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript