基于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选择器的研究(详解)
Sep 16 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 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
php生成WAP页面
2006/10/09 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python中list常用操作实例详解
2015/06/03 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Python中return self的用法详解
2018/07/27 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
房产继承公证书
2014/04/09 职场文书
调研汇报材料范文
2014/08/17 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
人事局接收函
2015/01/31 职场文书
超强台风观后感
2015/06/09 职场文书
2015元旦感言
2015/12/09 职场文书