目录
一、transition
(一) transition 宽高改变
transition: property duratio(持续时间) duration timing-function delay; （属性 持续时间 速度曲线 延迟时间）
* 前两个值必须设置
property: css属性
all：如果设置该值，则针对所有的属性。
trming-function：
- linear
- ease-in
- ease-out
- ease-in-out
多属性过度处理：
transition: 属性 时间， 属性2 时间， 属性3 时间；
transform-origin几何中心点
代码如下:
<!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>
<style>
.demo {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s cubic-bezier(0.96,-0.55, 0.1, 1.88), height 2s 2s;
}
.demo:hover {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
(二) transition 运动曲线
效果演示：
代码如下:
<!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>
<style>
.move {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 40px;
background-color: lightcoral;
}
.move::before {
position: absolute;
top: 50px;
left: 0;
content: '';
background-color: lightgreen;
width: 100%;
height: 100%;
transition: left 0.5s cubic-bezier(0.96,-0.55, 0.1, 1.88);
}
.move:hover::before {
left: 400px;
}
</style>
</head>
<body>
<a href="" class="move"></a>
</body>
</html>
(三) transition 折叠效果
效果演示：
代码如下:
<!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>
<style>
.btn {
position: absolute;
top: 200px;
left: 100px;
width: 100px;
height: 40px;
background-color: lightcoral;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
transition: all 0.5s;
}
.btn::before {
position: absolute;
top: 10px;
left: 10px;
content: '';
background-color: lightsalmon;
width: 100%;
height: 100%;
z-index: -1;
transition: all 0.5s ease-out;
}
.btn::after {
position: absolute;
top: 20px;
left: 20px;
content: '';
background-color: lightgreen;
width: 100%;
height: 100%;
z-index: -2;
transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.btn:hover::before,
.btn:hover::after {
left: 0;
top: 0;
}
.btn:hover {
background-color: lightseagreen;
}
</style>
</head>
<body>
<a href="" class="btn">hover</a>
</body>
</html>
二、transform
(一) 属性值
transform: translate(x, y)：将当前元素移动到指定位置；
transform: translateX()：改变X轴上的位置；
transform: translateY()：改变Y轴上的位置；
transform: rotate(deg)：将当前元素旋转多少度。
transform: scale(0)：缩放当前元素，值：数值 大于1时，放大；小于1，缩小
transform: skew(deg)：将当前元素沿着x轴和y轴进行倾斜
backface-visibility：当前元素显示背面的时候是否可见
(二) translate(x, y) 改变位置
效果如下：
<!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>
<style>
body {
margin: 100px;
}
.box1 {
width: 50px;
height: 50px;
background-color: red;
transition: all 1s;
}
.box2 {
width: 200px;
height: 50px;
background-color: yellow;
margin-top: 100px;
}
body:hover .box1 {
transform: translate(400px, 200px);
/* transform: rotate(60deg); */
/* transform: scale(0); */
/* transform: skew(145deg); */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</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>
<style>
.box {
position: absolute;
top: 50%;
left: 50%;
width: 270px;
height: 309px;
transform: translate(-50%,-50%);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform 1s;
}
.front {
background: url(images/front.jpg);
}
.back {
background: url(images/back.jpg);
transform: rotateY(180deg);
}
.box:hover .front {
transform: rotateY(180deg);
}
.box:hover .back {
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front"></div>
<div class="back"></div>
</div>
</body>
</html>
三、动画
(一) 语法
animation: name duration timing-function delay interation-count direction fill-mode play-state;
alternate：奇数次正向播放，偶数次反向播放。
@keyframes name {
0% {
css属性: 属性值
}
100% {
css属性：属性值
}
}
(二) 旋转 & 移动 & 变形
效果演示：
代码如下：
<!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>
<style>
.ani1 {
width: 200px;
height: 200px;
background: rgb(71, 249, 255);
animation: mymove 2s linear infinite alternate;
}
@keyframes mymove {
0% {
border-radius: 0;
transform: translateX(0) rotate(0);
}
100% {
border-radius: 50%;
transform: translateX(400px) rotate(720deg);
}
}
</style>
</head>
<body>
<div class="ani1"></div>
</body>
</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>
<style>
.loading {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 5px solid tomato;
border-radius: 50%;
}
.item:nth-child(1) {
transform: skew(45deg);
animation: my1 1s linear infinite;
}
.item:nth-child(2) {
transform: skew(-45deg);
animation: my2 1s linear infinite;
}
@keyframes my1 {
0% {
transform: skew(45deg) rotate(0);
}
100% {
transform: skew(45deg) rotate(360deg);
}
}
@keyframes my2 {
0% {
transform: skew(-45deg) rotate(0);
}
100% {
transform: skew(-45deg) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loading">
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
相关文章
