[CSS3 Practice] Slides Effect With Pure CSS3

最新推荐文章于 2024-10-08 11:32:20 发布

LINJY6

最新推荐文章于 2024-10-08 11:32:20 发布

阅读量326

点赞数

分类专栏： CSS3 Practice 文章标签： css3 animation

本文链接：https://blog.csdn.net/linjiayuqazwsx/article/details/50434559

版权

CSS3 Practice 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS3 Animation

 -webkit-animation:'picslide' 20s infinite;
 @-webkit-keyframes 'picslide'{}

<body>
  <div class="pic"></div>
  <div class="description">CSS3 Animation</div>
</body>

.pic{
  position: relative;
  width:500px;
  height:300px;
  /*居中*/
  margin:0 auto;
  border:1px solid #333;
  overflow: hidden;
  background-size:cover;
  /*animation*/
  -webkit-animation:'picslide' 20s infinite;
}

.description{
  /*居中*/
  position: absolute;
  width:500px;
  height:40px;
  background: rgba(244,244,244,0.6);
  /*居中*/
  left: 0;
  top:0;
  right:0;
  bottom: 0;
  margin: 261px auto;
  /*居中*/
  font-size:2em;
  text-align: center;
  /*animation*/
  -webkit-animation:'description' 20s infinite;
}


@-webkit-keyframes 'picslide'{
 0%{
  background: url("../1.jpg") no-repeat;
 }
 50%{
  background: url("../2.jpg")  no-repeat;
 }
 100%{
  background: url("../3.jpg")  no-repeat;
 }
}


@-webkit-keyframes 'description'{
  0%{
    color: red;
  }
  50%{
    color: green;
  }
  100%{
    color: blue;
  }
}