阴影、transform
代码如下：
<style type="text/css">
*{
margin:0px;padding:0px;
}
.box{
width:300px;
margin:30px auto;
}
.box img{
width:300px;
position:relative;
left:0px;
top:0px;
transition:all 1s;
}
.box img:hover{
box-shadow:5px 3px 9px 1px #cccccc;
top: 130px;
-webkit-transform:scale(1.3);
</style>
运行结果：
旋转风车
代码如下：
<style type="text/css">
img{
margin-left:600px; margin-top:0px;
animation:scroll 1s linear 0s infinite normal running forwards;
}
@keyframes scroll{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
img:hover{
animation-play-state:paused;
}
div{
width:100px;
height:30px;
background-color:red;
text-align:center;
animation:scroll2 6s linear 0s infinite normal running forwards;
}
@keyframes scroll2{
25%{
background-color:blue;
transform:translate(200px) skew(30deg);
}
50%{
background-color:green;
transform:translate(200px,200px);
}
75%{
background-color:yellow;
transform:translate(0px,200px) rotate(180deg);
}
100%{
background-color:gray;
transform:translate(0px,0px);
}
div:hover{
animation-play-state:paused;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div>你好</div>
<img src="fengche.png"></img>
</body>
运行结果：
为什么div:hover{
animation-play-state:paused;
}
不能挺住？？？
