css写的一个简单的幻灯片效果页面

制作幻灯片，第一反应是用css3的Animation，那我就简单介绍一下Animation。

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果（详情请看 http://www.w3school.com.cn/cssref/pr_transform.asp）

Animation字面的意思就是“动画” 属性：animation: name（绑定到选择器的 keyframe 名称） duration（延长的时间） timing-function（动画的速度曲线：linear（速度相同） ease（先低速后加速） ease-in （低速开始） ease-out （低速结束） ease-in-out （低速开始和结束） cubic-bezier(n,n,n,n)（从 0 到 1 的数值）） delay（动画开始前的延迟） iteration-count （播放的次数（n（播放次数）|infinite（无限循环）））direction （是否循环播放（normal（正常播放）|alternate（轮流反向播放）））fill-mode play-state;

例子：animation:marginLeft 10s linear 2s infinite 100 reverse paused

keyframes（关键帧）

书写格式为：@keyframes "动画名字"｛｝

内根据设置内容从“0%”到“100%”依次编写，注意“0%”一定不能把百分号省略！

可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束（from"就相当于"0%"而"to"相当于"100%",）

为了兼容浏览器，记得加各浏览器前缀（“chrome和safira：-webkit-”、“firefox:-moz-”、“opera:-o-”）

好了，上代码：

<template>
  <div class="myDiv"></div>
</template>

<style>
.myDiv{
  width: 600px;
  height: 400px;
  margin: 20px auto;
  background-size: over;
  background-position: center;
  animation-name:'loop';
  animation-duration: 20s;
  animation-iteration-count: infinite;
}
@keyframes loop{

    0% {background: url('http://img5.duitang.com/uploads/blog/201408/12/20140812150016_8NMUU.jpeg') no-repeat;}
    25% {background: url('http://pic29.nipic.com/20130518/9908282_142904524164_2.jpg') no-repeat;}
    50% {background: url('http://uploadfile.huiyi8.com/2014/0605/20140605114503719.jpg') no-repeat;}
    75% {background: url('http://img3.redocn.com/20100322/Redocn_2010032112222793.jpg') no-repeat;}
    100% {background: url('http://uploadfile.huiyi8.com/2014/0605/20140605114447934.jpg') no-repeat;}
}
</style>

效果图：

css写的一个简单的幻灯片效果页面

详情请看：https://blog.csdn.net/jnshu_it/article/details/77600561#commentsedit

css写的一个简单的幻灯片效果页面

相关推荐