CSS3 动画
<!doctype />
<html>
<head>
<style type="text/css">
.aa
{
width: 200px;
height: 200px;
background: red;
border-radius: 5px;
position:absolute;
-webkit-transform:rotateY(90deg);
-o-transform:rotateY(90deg);
-moz-transform:rotateY(90deg);
transform:rotateY(90deg);
/* -moz-animation:myfirst 5s;
-o-animation:myfirst 5s; */
}
.bb
{
width: 200px;
height: 200px;
background: yellow;
border-radius: 5px;
position:relative;
}
.cc
{
width: 200px;
height: 200px;
background: red;
border-radius: 5px;
-webkit-animation:myfirst .3s linear 0ms 1 normal forwards;
-moz-animation:myfirst .3s linear 0ms 1 normal forwards;
-o-animation:myfirst .3s linear 0ms 1 normal forwards;
animation:myfirst .3s linear 0ms 1 normal forwards;
}
.dd
{
width: 200px;
height: 200px;
background: red;
border-radius: 5px;
-webkit-animation:my .3s linear 0ms 1 normal forwards;
-moz-animation:my .3s linear 0ms 1 normal forwards;
-o-animation:my .3s linear 0ms 1 normal forwards;
animation:my .3s linear 0ms 1 normal forwards;
}
@keyframes myfirst
{
0%
{
transform:rotateY(-90deg);
transform-origin:0;
}
100%
{
transform:rotateY(0deg);
transform-origin:0;
}
}
@-webkit-keyframes myfirst
{
0%
{
transform:rotateY(-90deg);
transform-origin:0;
}
100%
{
transform:rotateY(0deg);
transform-origin:0;
}
}
@-o-keyframes myfirst
{
0%
{
transform:rotateY(-90deg);
transform-origin:0;
}
100%
{
transform:rotateY(0deg);
transform-origin:0;
}
}
@-moz-keyframes myfirst
{
0%
{
transform:rotateY(-90deg);
transform-origin:0;
}
100%
{
transform:rotateY(0deg);
transform-origin:0;
}
}
@keyframes my
{
0%
{
transform:rotateY(0deg);
transform-origin:0;
}
100%
{
transform:rotateY(90deg);
transform-origin:0;
}
}
@-webkit-keyframes my
{
0%
{
transform:rotateY(0deg);
transform-origin:0;
}
100%
{
transform:rotateY(90deg);
transform-origin:0;
}
}
@-o-keyframes my
{
0%
{
transform:rotateY(0deg);
transform-origin:0;
}
100%
{
transform:rotateY(90deg);
transform-origin:0;
}
}
@-moz-keyframes my
{
0%
{
transform:rotateY(0deg);
transform-origin:0;
}
100%
{
transform:rotateY(90deg);
transform-origin:0;
}
}
</style>
</head>
<body>
<div class="bb" id="a">
<div class="aa" id="abc">
<img src="12.png" width="100" height="100" />
</div>
</div>
<script type="text/javascript">
document.getElementById("a").onmousemove = function () {
document.getElementById("abc").className = "cc";
}
document.getElementById("abc").onmouseout = function () {
document.getElementById("abc").className = "dd";
}
</script>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
