CSS3动画制作网站首页轮播图

幻灯片,是网站首页经常会用到的一种前端效果,在接触CSS3动画之前,轮播图只能用JS来做,现在有了动画,做轮播图又多了一种方式,底部有演示地址:

CSS3动画制作网站首页轮播图

下面看具体实现代码:

CSS

*{margin: 0;padding: 0;list-style:none;font-family: 'Microsoft Yahei'}
h3{height: 150px;text-align: center;line-height: 150px;}
#helloweb{height: 400px;width: 100%;position: relative;}
.size{height: 400px;width: 100%; color: #fff;font-size: 100px;line-height: 400px;text-align: center;position: absolute;left: 0;top: 0;}
.one{
    background-color: #ad5d5c;
    animation:one 10s linear infinite ;
    -webkit-animation:one 10s linear infinite ;
    -moz-webkit-animation:one 10s linear infinite ;
    -o-webkit-animation:one 10s linear infinite ;
}
.two{
    background-color: #845ba7;
    animation:two 10s linear infinite ;
    -webkit-animation:two 10s linear infinite ;
    -moz-webkit-animation:two 10s linear infinite ;
    -o-webkit-animation:two 10s linear infinite ;                
}
.three{
    background-color: #60742d;
    animation:three 10s linear infinite;
    -webkit-animation:three 10s linear infinite ;
    -moz-webkit-animation:three 10s linear infinite ;
    -o-webkit-animation:three 10s linear infinite ;            
}
.four{
    background-color: #37839d;
    animation:four 10s linear infinite ;
    -webkit-animation:four 10s linear infinite ;
    -moz-webkit-animation:four 10s linear infinite ;
    -o-webkit-animation:four 10s linear infinite ;                
}
/*第一个盒子的动画*/
@keyframes one
{
0%   {opacity: 1}
10%  {opacity: 1}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 1}
100% {opacity: 1}
}

@-moz-keyframes one /* Firefox */
{
0%   {opacity: 1}
10%  {opacity: 1}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 1}
100% {opacity: 1}
}

@-webkit-keyframes one /* Safari and Chrome */
{
0%   {opacity: 1}
10%  {opacity: 1}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 1}
100% {opacity: 1}
}

@-o-keyframes one /* Opera */
{
0%   {opacity: 1}
10%  {opacity: 1}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 1}
100% {opacity: 1}
}

/*第二个盒子的动画*/
@keyframes two
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 1}
30%  {opacity: 1}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 0}
100%  {opacity: 0}
}
@-moz-keyframes two /* Firefox */
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 1}
30%  {opacity: 1}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 0}
100%  {opacity: 0}
}

@-webkit-keyframes two /* Safari and Chrome */
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 1}
30%  {opacity: 1}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 0}
100%  {opacity: 0}
}

@-o-keyframes two /* Opera */
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 1}
30%  {opacity: 1}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 0}
100%  {opacity: 0}
}

/*第三个盒子的动画*/
@keyframes three
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 1}
50%  {opacity: 1}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 0}
100%  {opacity: 0}
}
@-moz-keyframes three /* Firefox */
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 1}
50%  {opacity: 1}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 0}
100%  {opacity: 0}
}

@-webkit-keyframes three /* Safari and Chrome */
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 1}
50%  {opacity: 1}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 0}
100%  {opacity: 0}
}

@-o-keyframes three/* Opera */
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 1}
50%  {opacity: 1}
60%  {opacity: 0}
70%  {opacity: 0}
80%  {opacity: 0}
90%  {opacity: 0}
100%  {opacity: 0}
}

/*第四个盒子的动画*/
@keyframes four
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 1}
70%  {opacity: 1}
80%  {opacity: 1}
90%  {opacity: 0}
100%  {opacity: 0}
}
@-moz-keyframes four /* Firefox */
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 1}
70%  {opacity: 1}
80%  {opacity: 1}
90%  {opacity: 0}
100% {opacity: 0}
}

@-webkit-keyframes four /* Safari and Chrome */
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 1}
70%  {opacity: 1}
80%  {opacity: 1}
90%  {opacity: 0}
100% {opacity: 0}
}

@-o-keyframes four /* Opera */
{
0%   {opacity: 0}
10%  {opacity: 0}
20%  {opacity: 0}
30%  {opacity: 0}
40%  {opacity: 0}
50%  {opacity: 0}
60%  {opacity: 1}
70%  {opacity: 1}
80%  {opacity: 1}
90%  {opacity: 0}
100% {opacity: 0}
}

HTML代码

<h3>CSS3模拟轮播图</h3>
<div id="helloweb">
    <!-- 四个盒子,每个盒子一张图 -->
    <div class="size one">HelloWeb前端网</div>
    <div class="size two">UC4.1</div>
    <div class="size three">ENUM 5.2</div>
    <div class="size four">MEIZU 6.3</div>
</div>

演示地址

提供一种思路,欢迎大家讨论!



原文链接:HelloWeb前端网 » CSS3动画制作网站首页轮播图 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享