css3(animate)
1.animate
//-----------------------------------
<!--复合属性。检索或设置对象所应用的动画特效-->
<' animation-name '>： 检索或设置对象所应用的动画名称
<' animation-duration '>： 检索或设置对象动画的持续时间
<' animation-timing-function '>： 检索或设置对象动画的过渡类型
<' animation-delay '>： 检索或设置对象动画延迟的时间
<' animation-iteration-count '>： 检索或设置对象动画的循环次数
<' animation-direction '>： 检索或设置对象动画在循环中是否反向运动
<' animation-fill-mode '>： 检索或设置对象动画时间之外的状态
<' animation-play-state '>： 检索或设置对象动画的状态
(w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式 )
//------------------------------------
<!--/*调用动画，动画名称*/-->
animation-name: change;
<!--/*动画时间，就是一轮动画，从0-100%所需时间*/-->
animation-duration: 2s;/*想要一个动画动起来，名字时间缺一不可*/
<!--/*动画执行完之后，会变成初始的样子，所以，可以设置动画结束后的状态*/-->
animation-fill-mode: forwards;
<!--/*默认动画只能播放一次，可以设置无限循环*/-->
<!--infinite： 无限循环 <number>： 指定对象动画的具体循环次数 -->
animation-iteration-count: infinite;
<!--/*动画延迟播放*/-->
/*animation-delay: 3s;*/
<!--/*动画暂停:paused,动画执行running*/-->
<!--running： 运动 paused： 暂停 -->
/*animation-play-state: running;*/
/*动画反方向*/
<!--normal： 正常方向 -->
<!--reverse： 反方向运行 -->
<!--alternate： 动画先正常运行再反方向运行，并持续交替运行 -->
<!--alternate-reverse： 动画先反运行再正方向运行，并持续交替运行 -->
/*animation-direction:alternate;*/
<!--/*动画速度*/-->
<!--ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)-->
animation-timing-function: linear;2.利用animate实现小球弹跳效果
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 140px;
height: 300px;
position: fixed;
left: 50%;
top: 35%;
margin-left: -70px;
z-index: 110;
cursor: pointer;
}
.ball{
width: 140px;
height: 140px;
border-radius: 50%;
background:radial-gradient(80px at 92px 44px,#eee,skyblue) ;
position: absolute;
top: 0;
z-index: 11;
cursor: pointer;
animation: jump 1s infinite;
}
.sha{
position: absolute;
left: 50%;
bottom: 0;
z-index: 10;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20,20,20,0.1);
box-shadow: 0 0 24px 30px rgba(20,20,20,.1);
border-radius: 30px/40px;
transform: scaleY(0.3);
animation: shr 1s infinite;
}
@keyframes jump{
0%{
top: 0;
animation-timing-function: ease-in;
}
50%{
top: 140px;
height: 140px;
animation-timing-function: ease-out;
}
55%{
top: 160px;
height: 120px;
border-radius: 70px / 60px;
animation-timing-function: ease-in;
}
65%{
top: 120px;
height: 140px;
border-radius: 50%;
animation-timing-function: ease-out;
}
95%{
top: 0;
animation-timing-function: ease-in;
}
100%{
top: 0;
animation-timing-function: ease-in;
}
}
@keyframes shr{
0%{
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
border-radius: 20px/20px;
}
50%{
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
border-radius: 30px/40px;
}
100%{
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
border-radius: 20px/20px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="ball"></div>
<div class="sha"></div>
</div>
</body>
</html>
3.利用animate做banner
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.box{
width: 100%;
height: 100%;
background: url("images0/bg.jpg") no-repeat center center;
background-size: cover;
position: relative;
perspective: 800px;
}
.love{
width: 120px;
height: 120px;
/*background: url("images0/xin.png") no-repeat center center;*/
background-size: contain;
position: absolute;
left: 0;
bottom: 0;
/*animation: myXin 3s infinite linear;*/
}
@keyframes myXin{
0%{
left: 0;
bottom: 0;
}
20%{
left: 400px;
bottom:300px;
transform: rotateZ(30deg);
}
40%{
left: 800px;
bottom:560px;
transform: rotateZ(70deg);
}
60%{
left: 1600px;
bottom:600px;
transform: rotateZ(98deg);
}
80%{
left: 1600px;
bottom:200px;
transform: rotateZ(120deg);
}
100%{
left: 400px;
bottom:80px;
transform: rotateZ(120deg);
}
}
.dis{
width:200px;
height: 300px;
position: absolute;
bottom: 200px;
left:50%;
margin-left: -100px;
/*border: 1px solid red;*/
transform-style:preserve-3d ;
animation: disImg 15s linear infinite;
}
.disimg{
width:200px;
height: 300px;
transform-style:preserve-3d ;
transform-origin: 50%;
}
@keyframes disImg {
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}
.disimg>div{
width: 200px;
height: 300px;
position: absolute;
}
.disimg>div:nth-of-type(1){
background: url("images0/1.jpg") no-repeat center center;
transform: rotateY(0deg) translateZ(300px);
}
.disimg>div:nth-of-type(2){
background: url("images0/2.jpg") no-repeat center center;
transform: rotateY(60deg) translateZ(300px);
}
.disimg>div:nth-of-type(3){
background: url("images0/3.jpg") no-repeat center center;
transform: rotateY(120deg) translateZ(300px);
}
.disimg>div:nth-of-type(4){
background: url("images0/4.jpg") no-repeat center center;
transform: rotateY(180deg) translateZ(300px);
}
.disimg>div:nth-of-type(5){
background: url("images0/5.jpg") no-repeat center center;
transform: rotateY(240deg) translateZ(300px);
}
.disimg>div:nth-of-type(6){
background: url("images0/6.jpg") no-repeat center center;
transform: rotateY(300deg) translateZ(300px) ;
}
</style>
</head>
<body>
<div class="box">
<div class="love"></div>
<div class="dis">
<div class="disimg">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017.11.14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
