css3 动画

最新推荐文章于 2024-11-10 15:01:17 发布

weixin_33905756

最新推荐文章于 2024-11-10 15:01:17 发布

阅读量65

点赞数

文章标签： python

原文链接：https://my.oschina.net/niejianbo/blog/865665

版权

2019独角兽企业重金招聘Python工程师标准>>>

总结下图片轮播功能，之前用js写过图片轮播功能，主要分以下几个方向实现：

1、改变图片位置，这是最常见的实现方式之一。图片的定位方式用position：absolute/relative,图片不叠加。

2、改变图片的透明度,图片的定位方式用position：absolute，图片叠加。

今天突然想到用css3动画实现下图片轮播功能，虽然已经是老掉牙的问题了，如下：

结构：

<div class="luoboOut">
    <ul>
        <li class="red"></li>
        <li class="blue"></li>
        <li class="green"></li>
    </ul>
</div>

样式：

先定位：

.luoboOut{
    width:500px;
    height:300px;
    margin:auto;
    background-color:#ccc;
    overflow: hidden;
}
.luoboOut ul{
    height:100%;
    position: relative;
}
.luoboOut ul li{  //定义元素定位状态（因为是水平轮播，所以三个图片在一个水平线上）
                    //也可以用float，父元素width为三个元素width相加
    width:100%;
    height:100%;
    position:absolute;
}
.red{
    background-color: red;
    animation:myfirst 10s infinite; // 引用动画，定义时间、循环
}
.blue{
    background-color: blue;
    animation:mysecond 10s infinite;
}
.green{
    background-color: green;
    animation:mythird 10s infinite;
}

//为每个元素定义动画，因为有三个图片，所以每个图片有三个状态（也就是三个位置）
@keyframes myfirst
{
    0%   {left:0px; top:0px;}
    20%   {left:0px; top:0px;}
    40%   {left:-500px; top:0px;}
    60%   {left:-500px; top:0px;}
    80% {left:-1000px; top:0px;}
    100% {left:-1000px; top:0px;}
}
@keyframes mysecond
{
    0%   {left:500px; top:0px;}
    20%   {left:500px; top:0px;}
    40%   {left:0px; top:0px;}
    60%   {left:0px; top:0px;}
    80% {left:-500px; top:0px;}
    100% {left:-500px; top:0px;}
}
@keyframes mythird
{
    0%   {left:1000px; top:0px;}
    20%   {left:1000px; top:0px;}
    40%   {left:500px; top:0px;}
    60%   {left:500px; top:0px;}
    80% {left:0px; top:0px;}
    100% {left:0px; top:0px;}
}

转载于:https://my.oschina.net/niejianbo/blog/865665