自定义运动轨迹
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.bool{width: 100px; height: 100px;border-radius: 50%;background-color: aqua;
/*animation: move 4s infinite;*/
animation-name: move;
animation-duration: 4s;/*动画持续时间*/
animation-iteration-count: infinite;/*重复次数*/
animation-timing-function: steps(100);/*速率*//*steps是设置步数的*/
animation-direction: alternate;/*反方向进行运动*/
animation-delay: 3s;/*过3秒在进行运动*/
}
/*自定义运动轨迹*/
@keyframes move{
0%{transform: translate(0,0);}
25%{transform: translate(800px,0);}
50%{transform: translate(800px,400px);}
75%{transform: translate(0,400px);}
100%{transform: translate(0,0);}
}
.bool:hover{
animation-play-state: paused;/*悬停的时候停止运动*/
}
</style>
</head>
<body>
<div class="bool"></div>
</body>
</html>
代码运行结果:
字体打印效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>字体打印效果</title>
<style>
div{
background-color: pink;
font-size: 20px;
width: 0;/*初始没有任何字显示*/
border: 1px solid;
overflow: hidden;
/* 文本不能换行 */
white-space: nowrap;
animation: donghua 5s steps(10) forwards;
/*steps(10) 总变换的长度200px,每一个字站20px,所以逐字出现的长度为10px*/
/* animation-fill-mode: forwards; *//*动画结束后的状态:保持终点forwards 回到起点backwards(默认)*/
}
/*自定义动画,能够实现逐字打印 思路:逐步增加div的宽度*/
@keyframes donghua{
0%{width: 0;}
100%{width: 200px;}
}
</style>
</head>
<body>
<div>世纪佳缘我在这里等你</div>
</body>
</html>
代码运行结果:
视距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
perspective: 1000px;
}
div{width: 100px;height: 100px;background-color: pink;}
div:hover{
transform:translate3d(0,0,-500px) ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
代码运行结果:
案例:奔跑的熊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{background-color: #FFC0CB;}
div{
width: 200px;
height: 100px;
background-image: url(images/bear.png);
background-position: 0 0;
animation: donghua 1s steps(8) infinite ,move 8s infinite ;
}
/*加载运动中的小熊:原地运动*/
@keyframes donghua{
0%{background-position: 0 0;}
100%{background-position: 1600px 0;}
}
/*在水平方向移动位置的运动*/
@keyframes move{
0%{transform: translateX(0);}
99.9%{transform: translateX(800px) ; }
100%{transform: translateX(800px) rotateY(180deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
代码运行结果:
案例:雪碧图/精灵图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css精灵图|雪碧图 spirit</title>
<style>
div{width: 209px;height: 209px;
background-image: url(images/icorns.jpg);
background-position: -387px -328px;}
</style>
</head>
<body>
<!-- css雪碧图:使用背景图定位 -->
<div></div>
</body>
</html>
代码的运行结果:
3D旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {perspective: 300px;}
img { display: block; margin: 100px auto; transition: all 1s;}
div:hover img {transform: rotateX(-45deg);}
</style>
</head>
<body>
<div><img src="images/pig.jpg"></div>
</body>
</html>
代码的运行结果:
3D空间旋转效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{perspective: 1000px;}
.box{
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
transform-style: preserve-3d;/*开启3d空间*/
}
.box:hover{
transition: all 1s;
transform: rotate3d(0,1,0,60deg);
}
.box>.d1{
background-color: pink;
width: 100px;
height: 100px;
position: absolute;
top:0;
left:0;
z-index: 1;
}
.box>.d2{
background-color: purple;
width: 100px;
height: 100px;
position: absolute;
top:0;
left:0;
z-index: 2;
transform: rotate3d(1,0,0,60deg);
}
</style>
</head>
<body>
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
</div>
</body>
</html>
代码的运行结果:
——The End