一、百度浏览器小熊案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: skyblue;
margin: 0;
border: 0;
}
.bear{
position: absolute;
top: 220px;
width: 200px;
height: 100px;
background: url(img/bear.png) no-repeat;
animation: bear 1s steps(8) infinite,move 3s forwards;
}
.mountain{
width: 3840px;
height: 336px;
background: url(img/mountain.png) no-repeat;
animation: mountain 40s linear infinite;
}
@keyframes mountain{
0%{
background-position: 0 0;
}
100%{
background-position: -2300px 0;
}
}
@keyframes bear{
0%{
background-position: 0 0;
}
100%{
background-position: -1600px 0;
}
}
@keyframes move{
0%{
left:0;
}
100%{
left: 50%;
/*margin-left: -100px;*/
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div class="mountain">
<div class="bear">
</div>
</div>
</body>
</html>
1、动画使用:定义动画@keyframes name{
0%{开始状态}100%{结束状态}
}
,然后通过animation:name调用动画
linear是匀速,infinite是循环播放,backwords是播放完再倒回去,forwards是播放完直接回到开头
2、子绝父相:父盒子position:relative;子盒子position:absolute;
3、transform-origin:可以定义旋转的中心点
transform: translate(50px,50px);可以定义平移
transform:rotate(deg)可以定义旋转的角度
transition: all 0.3s;可以定义过渡时间过渡写到本身上,谁做动画给谁加
二、3D旋转:
1、transform-style: preserve-3d;/* 让子元素保持3d立体空间环境 /,必须写在做动画盒子的父盒子上
perspective: 500px;透视;必须写在做动画盒子的父盒子上
2、/ 如果有移动和其他transform样式,一定先写移动 */
例如 transform: translateY(17.5px);
transform: rotateX(-90deg);
三、C3选择器