CSS3 过渡、2D变形、3D变形、动画
一、过渡
为元素从一种样式变为另一种样式时添加效果。
transition: 过渡属性 花费时间 运动曲线 何时开始;
前两个值不可省略,运动曲线默认ease,合适开始默认0s立即开始可以省略。
注意:transition需要写在div里而不是hover里;多个属性设置不同时,用逗号隔开;需要描述所有属性变化时,过渡属性值为all。
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: width 0.2s ease 0s,height 0.3s ease-in 1s;
/* transition: all 0.6s ease 0s; */
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div></div>
</html>
二、2D变形 transform
做元素的变形、位移、缩放,可以和transition结合使用。
1.移动 translate
用translate平移
transform: translate(x,y)
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.5s;
}
div:active { /*鼠标点击没有松开鼠标,相当于点击*/
transform: translate(100px,200px);
transform: translate(50%,100%);
}
</style>
</head>
<body>
<div></div>
</html>
注意:
-
只移动一个坐标可以把另一个坐标设为0;
-
也可以写成:translateX(只跟一个参数);translateY(只跟一个参数)。
-
translate移动的距离如果是%,则以自己的宽度为准,而不是父亲为准。
<html> <head> <style> div { width: 200px; height: 200px; background-color: pink; position: absolute; /*盒子居中对齐*/ left: 50%; /*以父级宽度为准*/ margin-left: -100px; /*需要计算*/ top: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <div></div> </html>
2.缩放 scale
transform: scale(x,y)
x和y的值小于1为缩小倍数,大于1为放大倍数。
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:hover {
transform: scale(1.2,1.5);
}
</style>
</head>
<body>
<div></div>
</html>
注意:
-
如果只写一个参数,宽高都缩放!
-
谁做动画,谁加过渡!
<html> <head> <style> div { width: 100px; height: 50px; background-color: pink; overflow: hidden; } div img { transition: all 0.3s; } div:hover img { transform: scale(1.2,1.5); } </style> </head> <body> <div> <img src="images/search.png" alt=""> </div> </html>
3. 旋转 rotate
transform: rotate(*deg)
正值是顺时针,负值是逆时针;比如90deg是顺时针旋转90度
<html>
<head>
<style>
div {
width: 100px;
height: 50px;
background-color: pink;
overflow: hidden;
}
div img {
transition: all 0.3s;
}
div:hover img {
transform: rotate(90deg);
}
</style>
</head>
<body>
<div>
<img src="images/search.png" alt="">
</div>
</html>
旋转中心点的设置:
<html>
<head>
<style>
div img {
padding: 200px;
transition: all 0.3s;
transform-origin: bottom top;
}
div:hover img {
transform: rotate(90deg);
}
</style>
</head>
<body>
<div>
<img src="images/search.png" alt="">
</div>
</html>
4. 倾斜 skew
transform: skew(x,y);
<html>
<head>
<style>
div {
font-size: 50px;
font-weight: 700;
transition: all 0.2s;
}
div:hover {
transform: skew(20deg,0);
}
</style>
</head>
<body>
<div>
123
</div>
</html>
三、3D变形
3D多了z轴,遵循左手法则。
1. rotateX()rotateY() rotateZ()
<html>
<head>
<style>
div img {
transition: all 0.2s;
}
div:hover img {
transform: rotateX(180deg);
}
</style>
</head>
<body>
<div>
<img src="images/course.png" alt="">
</div>
</html>
2. 体会透视 perspective
- 透视原理:近大远小。
- 浏览器透视:把近大远小的所有图像,透视在屏幕上。
- perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置
注:并非任何情况下需要透视效果,根据开发需要进行设置。
perspective一般作为一个属性,设置给父元素,作用于所有3D转换的子元素
<html>
<head>
<style>
div {
perspective: 1000px;
}
div img {
transition: all 0.2s;
}
div:hover img {
transform: rotateX(180deg);
}
</style>
</head>
<body>
<div>
<img src="images/course.png" alt="">
</div>
</html>
3. translateX() translateY() translateZ()
Z轴是物体到屏幕的距离,透视是一种展示形式。
<html>
<head>
<style>
div {
margin: 200px;
perspective: 1000px;
}
div img {
transition: all 0.2s;
}
div:hover img {
transform: translateZ(100px);
}
</style>
</head>
<body>
<div>
<img src="images/course.png" alt="">
</div>
</html>
transform: translate3d(x,y,z);
z轴只能是px单位。
<html>
<head>
<style>
div {
margin: 200px;
perspective: 1000px;
}
div img {
transition: all 0.2s;
}
div:hover img {
transform: translate3d(100px,100px,100px);
}
</style>
</head>
<body>
<div>
<img src="images/course.png" alt="">
</div>
</html>
4. 开门大吉例子
<html>
<head>
<style>
div {
width: 200px;
height: 180px;
margin: 200px;
background: url(images/course.png);
perspective: 1000px;
position: relative;
}
span {
display: block;
width: 100px;
height: 180px;
background-color: pink;
border: 1px solid black;
transition: all 0.2s;
}
span.door-l {
position: absolute;
top: 0;
left: 0;
transform-origin: left;
}
span.door-r {
position: absolute;
top: 0;
right: 0;
transform-origin: right;
}
div:hover .door-l {
transform: rotateY(-130deg);
}
div:hover .door-r {
transform: rotateY(130deg);
}
</style>
</head>
<body>
<div>
<span class="door-l"></span>
<span class="door-r"></span>
</div>
</html>
5. backface-visibility
用于设置图片不正向对着屏幕时是否可见。
可以用来写翻转图片,先translateY(180deg),当backface-visibility:hidden可以实现翻转时显示背面图片。
四、动画
animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
动画名称是自定义的
<html>
<head>
<style>
div {
width: 200px;
height: 180px;
margin: 200px;
background: url(images/course.png);
/*animation: name duration timing-function delay iteration-count direction fill-mode;*/
animation: go 2s ease 0s 2 reverse;
}
@keyframes go { /*定义动画*/
from{
transform: translate(0);
}
to{
transform: translate(600px);
}
}
</style>
</head>
<body>
<div>
</div>
</html>
例子:无缝滚动
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
nav {
width: 1200px;
height: 20px;
}
nav li {
float: left;
}
nav ul {
width: 200%; /*两倍!!!*/
animation: moving 2s linear infinite;
}
div {
width: 200px;
height: 20px;
}
@keyframes moving { /*定义动画*/
from{
transform: translate(0);
}
to{
transform: translate(-1000px);
}
}
nav:hover ul { /*鼠标经过nav,里面的ul不做动画*/
animation-play-state: paused ;
}
</style>
</head>
<body>
<nav>
<ul>
<li><div style="background-color: red;"></div></li>
<li><div style="background-color: orange;"></div></li>
<li><div style="background-color: yellow;"></div></li>
<li><div style="background-color: green;"></div></li>
<li><div style="background-color: blue;"></div></li>
<li><div style="background-color: purple;"></div></li>
<li><div style="background-color: red;"></div></li>
<li><div style="background-color: orange;"></div></li>
<li><div style="background-color: yellow;"></div></li>
<li><div style="background-color: green;"></div></li>
<li><div style="background-color: blue;"></div></li>
<li><div style="background-color: purple;"></div></li>
</ul>
</nav>
</html>