css3实现轮播1

实现效果：

图片轮播，鼠标移入后轮播暂停，移除后轮播继续。

基本原理：

利用Css3 animation动画属性，用transform 实现图片移动。通过图片复制备份，实现的图片的无缝衔接。

核心知识点：

 1、@keyframes  通过 @keyframes 规则，您能够创建动画。

Firefox 支持 @-moz-keyframes 规则。

Opera 支持 @-o-keyframes 规则。

Safari 和 Chrome 支持 @-webkit-keyframes 规则。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

 
值说明
animationname 必需的。定义animation的名称。
keyframes-selector 必需的。动画持续时间的百分比。

合法值：

0-100%
from (和0%相同)
to (和100%相同)

注意： 您可以用一个动画keyframes-selectors。
css-styles 必需的。一个或多个合法的CSS样式属性

 

 2、animation

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

实例：

animation: imgMove 5s linear infinite;

参数：

animation-name  执行动画的名称 imgMove
animation-duration  完成动画的时间5s
animation-timing-function 完成动画是的速度   linear -匀速
animation-iteration-count  播放的次数  infinite-无限次播放 

 3、最后是实现鼠标移入动画暂停，这里有两个介绍：

:hover{}定义鼠标移入触发的事件

animation-play-state:paused/running  动画的暂停与播放

 

 代码：图片请自行添加。例子中图片大小90px*90px

 

<!DOCTYPE html>
<html>

    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            div {
                width: 360px;
                height: 90px;
                margin: 200px auto;
                overflow: hidden;
            }
            
            div>ul {
                /*设置ul的宽度为2倍div的宽度*/
                width: 200%;
                list-style: none;
                /*动画属性*/
                animation: imgMove 5s linear infinite;
            }
            /* 暂停动画 */
            
            div>ul:hover {
                animation-play-state: paused;
            }
            
            div>ul>li {
                width: 90px;
                float: left;
            }
            
            div img {
                width: 100%;
            }
            /*创建动画*/
            
            @keyframes imgMove {
                from {
                    transform: translateX(0px);
                }
                to {
                    transform: translateX(-360px);
                }
            }
        </style>
    </head>

    <body>
        <div>
            <ul>
                <li><img src="images/1.png" alt="" /></li>
                <li><img src="images/2.png" alt="" /></li>
                <li><img src="images/3.png" alt="" /></li>
                <li><img src="images/4.png" alt="" /></li>

                <!--将需要轮播的图片在复制一份-->
                <li><img src="images/1.png" alt="" /></li>
                <li><img src="images/2.png" alt="" /></li>
                <li><img src="images/3.png" alt="" /></li>
                <li><img src="images/4.png" alt="" /></li>

            </ul>
        </div>
    </body>

</html>

  

参考地址

posted @ 2019-10-28 23:26  梁涛999  阅读(246)  评论(0)  编辑  收藏  举报