css3 动画



div{
width:300px;
margin:50px auto;
background-color:yellow;
text-align:center;
}
/* css3 变形处理 */

/* rotate 顺时针旋转 */
.divRotate:hover{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
/* 缩放 水平 垂直 方向*/
.divScale:hover{
-webkit-transform:scale(1.5, 5);
-moz-transform:scale(1.5, 5);
-o-transform:scale(1.5, 5);
}

/* 倾斜 水平 垂直 方向 */
.divSkew:hover{
-webkit-transform:skew(30deg, 30deg);
-moz-transform:skew(30deg, 30deg);
-o-transform:skew(30deg, 30deg);
}

/* 移动 水平 垂直 方向 */
.divTranslate:hover{
-webkit-transform:translate(100px, -50px);
-mox-transform:translate(100px, -50px);
-o-transform:translate(100px, -50px);
}

/* css3 动画 */
/* transition */
.divTransition1{
-webkit-transition:background-color 1s linear, width 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
}
.divTransition1:hover{
background-color:#00ffff;
width:900px;
}

.divTransition2{
-webkit-transition: background-color 1s ease-in, -webkit-transform 1s ease-in;
}
.divTransition2:hover{
background-color: #00ffff;
-webkit-transform:translate(-500px);
/*-webkit-transform:rotate(360deg);*/
}

/* animations */
.divAnimations{
background-color:red;
}

/* 动画中的关键帧 */
@-webkit-keyframes mycolor{
0%{
background-color: red;
-webkit-transform: rotate(0deg);
}
40%{
background-color: darkblue;
-webkit-transform: rotate(360deg);
}
70%{
background-color: yellow;
-webkit-transform: rotate(720deg);
}
100%{
background-color: red;
-webkit-transform: rotate(1080deg);
}
}

.divAnimations{
-webkit-animation-name: mycolor;
-webkit-animation-duration: 1s; /* 花费的时间 */
-webkit-animation-timing-function: linear; /* 平滑过渡函数 */
-webkit-animation-iteration-count: 5; /* 动画播放次数 */
}
/*
平滑过渡函数:动画开始时到结束时的速度
linear: 同样的速度改变
ease-in: 先慢后快
ease-out: 先快后慢
ease: 慢,快, 慢
*/






<div class="divRotate">
divRotate test word
</div>


<div class="divScale">
divScale test word
</div>

<div class="divSkew">
divSkew test word
</div>

<div class="divTranslate">
divTranslate test word
</div>

<div class="divTransition1">
divTransition1 test word
</div>


<div class="divTransition2">
divTransition2 test word
</div>


<div class="divAnimations">
divAnimations test word;
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值