css3实现轮播1

jiedinghui

2019-10-28

关注关注

实现效果：

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

基本原理：

利用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样式属性

值

说明

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

css3实现轮播1

<!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>

参考地址

轮播 animation em css3动画动画 css