一.空间转换
属性
transform
语法
transform:translate3d(x,y,z)
透视 属性
perspective(添加给父级)视距,指人眼到屏幕的距离
取值
像素单位,数一般在800-1200
空间旋转(绕各个坐标轴转)
transform:rotateZ(值)
transform:rotateX(值)
transform:rotateY(值)
立体呈现
transform-style:preserve-3d;
使子集处于真正的3d空间
默认flat,表示子元素处于2d空间
旋转的盒子(案例)
先定位到一起,然后把后面的
transform:rotateX(90deg)
,再transform:rotateZ(25px)
因为Z轴是视线方向,只有俯视看才能看到,所以要把橙色盒子向上移动,需要调整Z轴
最后再把绿盒子transform:rotateX(-90deg)
然后整体hover时把绿、橙两盒子都transform:rotateX(-90deg)
html:
<div class="box">
<ul>
<li>
<a href="">首页</a>
<a href="">index</a>
</li>
<li>
<a href="">登录</a>
<a href="">login</a>
</li>
<li>
<a href="">注册</a>
<a href="">register</a>
</li>
</ul>
</div>
css:
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
width: 300px;
margin: 50px auto;
position: relative;
/* */
}
a{
text-decoration: none;
color: #fff;
}
.box li{
float: left;
position: relative;
background-color: green;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 18px;
transform-style: preserve-3d;
transition: all .2s;
}
.box li a{
position:absolute;
display: block;
width: 100px;
height: 50px;
}
.box li a:first-child{
transform: translateZ(25px);
}
.box li a:last-child{
background-color: orange;
transform: rotateX(90deg) translate3d(0,0,25px);
}
.box li:hover{
transform: rotateX(-90deg);
}
空间缩放
transform:scaleX\Y\Z(倍数)
二.动画
多个状态的变化过程用动画,动画过程可控。
实现:1、定义动画 2、使用动画
1.定义动画
@keyframes 名字{
from{
}
to{
}
}
第二种多个状态时
@keyframes name{
xx%
xx%
xx%
}
2.使用动画
animation:动画名+时间;
放在需要用动画的标签里。
动画属性
animation:名字 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
速度曲线:
- 1.linear 匀速
- 2.steps(数字):把动画分成几步完成
延迟时间
- 让动画等一会再执行
重复次数
- 数字 表示重复几次
- 无限循环 infinite
动画方向
- alternate 反复
执行结束时状态
- backwards 动画停留在开始状态 默认值
- forwards 动画停留在结束时的状态
精灵动画
1.盒子的尺寸是每一张精灵小图的尺寸
2.改变背景图的位置
3.steps(精灵小图的个数)
!动画开始状态和盒子默认样式相同时,可以省略动画的开始状态
走马灯
把最初显示的图片粘贴在整张图最后,等转到最后时再从头再来。
整个图片一起挪,挪父级ul。注意ul的尺寸和挪动的距离。
案例
全民出游
1.如果图的高度没有浏览器高度
html{
height:100%;
}
body{
height:100%;
background-size:cover;//cover完全覆盖 contain当宽或高和盒子一边大了 剩下那个就不再缩放了
}
代码
css
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
position: relative;
height: 100%;
background: url(./images/f1_1.jpg) no-repeat center 0;
background-size: cover;
}
.cloud{
animation: cloud 2s infinite linear forwards alternate;
}
.cloud img:nth-child(1){
position: absolute;
top: 20px;
left: 800px;
}
.cloud img:nth-child(2){
position: absolute;
top: 100px;
left: 1400px;
}
.cloud img:nth-child(3){
position: absolute;
top: 200px;
left: 400px;
}
.balloon{
animation: balloon 2s infinite linear forwards alternate;
}
.balloon img{
position: absolute;
top: 200px;
left: 600px;
}
.deer img{
position: absolute;
top: 200px;
left: 1050px;
}
.label img:nth-child(1){
position: absolute;
top: 780px;
left: 482px;
animation: label .5s infinite linear forwards alternate;
}
.label img:nth-child(2){
position: absolute;
top: 780px;
left: 820px;
animation: label .5s infinite .1s linear forwards alternate;
}
.label img:nth-child(3){
position: absolute;
top: 780px;
left: 1160px;
animation: label .5s infinite .2s linear forwards alternate;
}
.label img:nth-child(4){
position: absolute;
top: 780px;
left: 1495px;
animation: label .5s infinite .3s linear forwards alternate;
}
@keyframes cloud{
to{
transform: translateX(20px);
}
}
@keyframes balloon{
to{
transform: translateY(-50px);
}
}
@keyframes label{
to{
transform: translateY(-20px);
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<!-- 云 -->
<div class="cloud">
<img src="./images/yun1.png" alt="">
<img src="./images/yun2.png" alt="">
<img src="./images/yun3.png" alt="">
</div>
<div class="balloon">
<img src="./images/san.png" alt="">
</div>
<div class="deer">
<img src="./images/lu.png" alt="">
</div>
<div class="label">
<img src="./images/1.png" alt="">
<img src="./images/2.png" alt="">
<img src="./images/3.png" alt="">
<img src="./images/4.png" alt="">
</div>
</body>
</html>