第二步,在<body></body>插入一个<div></div>,再在div元素里插入五个img元素,分别设置为class,如下图所示:
第三步,设置五个img元素的样式,图片高度和宽度为250px,如下图所示:
第四步,预览该静态页面,在浏览器中查看页面效果,如下图所示:
第五步,分别设置class为two、three、four和five的样式,如下图所示:
6
第六步,再次预览该静态页面,利用IE浏览器查看效果,如下图所示:
1、首先我们创建一个简单的项目,如图所示包括html,css和img三个。
2、这里是html文件,引入css和html代码文件,如图所示。
3、这里是css文件代码,上面是div和图片显示的效果代码,后面是动画效果。
4、这里是事件,这里定义了四个时间段的状态,兼容了ie的。
5、如图所示这里是效果图,会根据时间轮播显示下一张图片 了。
<!DOCTYPE html><html>
<head>
<title>vn</title>
<style>
.box { width: 300px height: 300px background-color: red margin: 10px 0 }
#animation-1:target {
animation: rotate 1000ms linear both
}
#animation-2:target {
animation: translate 1000ms linear both
}
#animation-3:target {
animation: scale 1000ms linear both
}
@keyframes rotate {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}
@keyframes translate {
0% { transform: translate(-100%, 0) }
100% { transform: translate(0, 0) }
}
@keyframes scale {
0% { transform: scale(2) }
100% { transform: scale(1) }
}
</style>
</head>
<body>
<p>
<a href='#animation-1'>
点击后触发动画1
</a>
</p>
<p>
<a href='#animation-2'>
点击后触发动画2
</a>
</p>
<p>
<a href='#animation-3'>
点击后触发动画3
</a>
</p>
<div class="box" id="animation-1"></div>
<div class="box" id="animation-2"></div>
<div class="box" id="animation-3"></div>
</body>
</html>
不知道你是否知道target选择器的具体意义,简单的来说如下:
// div:target 的意思是锚点在目标上的时候// 看我最上面的例子,有三个链接,只有点击过以后才会触发动画。然后看看地址的变化
// 如果你想要同时全部显示,就把:target删除
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)