简单的css3动画
<a href="#" class="mai">
<div class="two"></div>
</a>
<style>
.mai {
display:block;
width:300px;
height:300px;
background:#FC9;
position:relative;
overflow:hidden;
}
.mai .two {
background-color:#F90;
height: 100px;
width:300px;
left: 0;
position: absolute;
top:-100px;
transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(0deg);
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(0deg);
transform-origin: 0 0 0;
-webkit-transform-origin: 0 0 0;
transition: transform 0.2s ease-in 0s;
-webkit-transition: -webkit-transform 0.2s ease-in-out 0s;
z-index: 2;
}
.mai:hover .two {
transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(12deg);
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(12deg);
transform-origin: 0 0 0;
-webkit-transform-origin: 0 0 0;
transition: transform 0.2s ease-in 0s;
-webkit-transition: -webkit-transform 0.2s ease-in-out 0s;
}
.mai {
display:block;
width:300px;
height:300px;
background:#FC9;
position:relative;
overflow:hidden;
}
.mai .two {
background-color:#F90;
height: 100px;
width:300px;
left: 0;
position: absolute;
top:-100px;
transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(0deg);
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(0deg);
transform-origin: 0 0 0;
-webkit-transform-origin: 0 0 0;
transition: transform 0.2s ease-in 0s;
-webkit-transition: -webkit-transform 0.2s ease-in-out 0s;
z-index: 2;
}
.mai:hover .two {
transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(12deg);
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(12deg);
transform-origin: 0 0 0;
-webkit-transform-origin: 0 0 0;
transition: transform 0.2s ease-in 0s;
-webkit-transition: -webkit-transform 0.2s ease-in-out 0s;
}
</style>
上一篇:The Shapes of CSS 纯CSS画的基本图形
下一篇:
发表看法1
Where To Purchase AkChlor 250mg Without A Script edefececggefdebd