您的位置：首页 > Web前端 > CSS

css3-animation图层放大效果

2016-05-16 10:29 459 查看
css3-animation和transform的学习

鼠标经过图层时，图层放大效果。增加文本或图层动画效果，提高用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-animation</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 750px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
li {
width: 150px;
height: 240px;
background: #fff;
box-shadow: 0 0 10px rgba(100, 100, 100, .5);
float: left;
}
li img{
display: block;
width:100%;
height:100%;
}
li:hover {
animation: rect 0.2s ease;
animation-fill-mode: forwards; /*保持最后一帧的状态*/
}
@keyframes rect {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.2, 1.2);
}
}
</style>
</head>
<body>
<ul>
<li><img src="./images/anim1.jpg"></li>
<li><img src="./images/anim2.jpg"></li>
<li><img src="./images/anim3.jpg"></li>
<li><img src="./images/anim2.jpg"></li>
<li><img src="./images/anim1.jpg"></li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航