笔记基于尚硅谷
目录
1.过渡与动画
1.1过渡
过渡
transition
通过过渡可以指定一个属性发生变化时的切换方式
通过过渡可以创建一些非常好的效果，提升用户的体验
属性值
transition-property：指定要执行过渡的属性
- 多个属性间使用,隔开；
- 如果所有属性都需要过渡，则使用all关键字；
- 大部分属性都支持过渡效果；
- 注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡；（不能使用auto）
transition-duration：指定过渡效果的持续时间
时间单位：s和ms（1s=1000ms）
transition-delay：过渡效果的延迟，等待一段时间后在执行过渡
transition-timing-function：过渡的时序函数
- linear匀速运动
- ease 默认值，慢速开始，先加速后减速
- ease-in 加速运动
- ease-out 减速运动
- ease-in-out 先加速后减速
- cubic-bezier()来指定时序函数 https://cubic-bezier.com
- steps()分步执行过渡，时间平均分配
可以设置第二个值：
- end，在时间结束时执行过渡（默认值）
- start，在时间开始时执行过渡
transition：可以同时设置过渡相关的所有属性
注意，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间
1.2动画
动画和过渡类似，都是可以实现一些动态的效果，不同的是
过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
@keyframes test {
from {
margin-left: 0;
}
to {
margin-left: 700px;
}
}
animation-name 指定动画的关键帧名称
animation-duration：指定动画效果的持续时间
animation-delay：动画效果的延迟，等待一段时间后在执行动画
animation-timing-function：动画的时序函数 与过渡一样
animation-iteration-count 动画执行的次数
- 整数
- infinite 无限执行
animation-direction 指定动画运行的方向
- normal 从from向to运行，每次都是这样，默认值
- reverse 从to向from运行，每次都是这样
- alternate 从from向to运行，重复执行动画时反向执行
- alternate-reverse 从to向from运行，重复执行动画时反向执行
animation-play-state 设置动画的执行状态
- running 动画执行，默认值
- paused 动画暂停
animation-fill-mode 动画的填充模式
- none 动画执行完毕，元素回到原来位置，默认值
- forwards 动画执行完毕，元素会停止在动画结束的位置
- backwards 动画延时等待时，在动画开始的等待期间元素就处于from关键帧状态否则不提前进入关键帧
- both 结合了forwards和backwards
animation也可以简写
注意问题与过渡一样
animation: test 2s 2s linear infinite alternate both;
2.变形
2.1平移
- translateX() 沿着由方向平移
- translateY() 沿着y轴方向平移
- translateZ() 沿着z轴方向平移平移元素
百分比是相对于自身计算的
几种水平垂直方向都居中的方式
利用绝对定位
只能对于设置好宽度和高度的元素
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
平移的方式
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
2.2 Z轴平移
z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距
perspective 设置视距
html {
/* 设置视距 */
perspective: 800px;
}
2.3 旋转
通过旋转可以使元素沿着x、y或z旋转指定的角度
- rotateX()
- rotateY()
- rotateZ()
- backface-visibility: hidden; 是否显示元素的背面
xx deg (度数)/turn（圈数）
transform: rotateY(0.5turn);
transform: rotateY(180deg);
2.4缩放
对元素进行缩放的函数
- scalex() 水平方向缩放
- scaleY() 垂直方向缩放
- scale() 双方向的缩放
- transform-origin 0 0 设置变形的原点
.box {
height: 200px;
width: 200px;
background-color: #bfa;
margin: 200px auto;
transition: 2s;
}
.box:hover {
transform: scaleX(2);
transform: scaleY(2);
transform: scale(2);
transform: scale(10%);
}
2.5设置3D效果
transform-style: preserve-3d;
3练习
3.1过渡练习
css
.huabu{
width: 600px;
height: 600px;
background-color: silver;
margin: 40px auto;
}
.box1 {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 50px;
transition: all 1s 2s ;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
margin-bottom: 50px;
transition: all 3s linear;
}
.box3{
width: 100px;
height: 100px;
background-color:yellow;
transition: all 3s steps(3) ;
}
.huabu:hover div{
margin-left: 500px;
}html
<div class="huabu">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
3.2动画练习
.donghua {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 67.71px;
height: 90px;
background-image: url(img/4.jpeg);
/* background-repeat: no-repeat; */
animation: run .8s steps(7) infinite ;
}
@keyframes run{
0%{
background-position: 0 0;
}
100%{
background-position: -474px 0;
}
}
<div class="donghua">
</div>3.3浮出效果
css代码
.warp{
perspective: 800px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
overflow: hidden;
height: 340px;
width: 1000px;
background-color:#f5f5f5;
}
.warp div{
height: 253px;
width: 471px;
margin-left: 20px;
float: left;
margin-top: 50px;
transition: all .3s;
}
.img1{
background-image: url(img/xm1.jpg);
background-size: contain;
background-repeat: no-repeat;
}
.img2{
background-image: url(img/xm2.png);
background-size: contain;
background-repeat: no-repeat;
}
.warp>div:hover{
box-shadow: 0 0 10px rgba(0, 0, 0, .6);
transform: translateY(-6px);
/* translateZ(15px) */
}
<div class="warp">
<div class="img1">
</div>
<div class="img2">
</div>
</div>3.4时钟
表盘
.biaopan {
width: 500px;
height: 500px;
margin: 100px auto;
background-image: url(img/表盘.jpeg);
background-size: cover;
border-radius: 50%;
/* background-color: #bfa; */
position: relative;
}
.biaopan>div {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
border-radius: 50%;
}
.s {
width: 80%;
height: 80%;
animation: run 60s steps(60) infinite;
}
.s>div {
width: 2px;
height: 50%;
background: red;
margin: 0 auto;
}
.min {
width: 70%;
height: 70%;
animation: run 3600s steps(60) infinite;
}
.min>div {
width: 4px;
height: 50%;
background: black;
margin: 0 auto;
}
.h {
width: 50%;
height: 50%;
animation: run 216000s infinite;
}
.h>div {
width: 8px;
height: 50%;
background: black;
margin: 0 auto;
}
@keyframes run {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
} <div class="biaopan">
<div class="s">
<div>
</div>
</div>
<div class="min">
<div>
</div>
</div>
<div class="h">
<div>
</div>
</div>
</div>3.5立方体3d
html {
perspective: 800px;
}
.warp {
width: 200px;
height: 200px;
margin: 300px auto;
position: relative;
transform-style: preserve-3d;
animation: text 15s infinite linear;
}
.warp>div {
position: absolute;
width: 200px;
height: 200px;
background-size: cover;
/* 为元素设置透明效果 */
opacity: .85;
}
.box1 {
background-image: url(3D/1.jpeg);
transform: rotateY(90deg) translateZ(100px);
}
.box2 {
transform: rotateY(-90deg) translateZ(100px);
background-image: url(3D/2.jpeg);
}
.box3 {
transform: rotateX(90deg) translateZ(100px);
background-image: url(3D/3.jpeg);
}
.box4 {
transform: rotateX(-90deg) translateZ(100px);
background-image: url(3D/4.jpeg);
}
.box5 {
transform: rotateY(180deg) translateZ(100px);
background-image: url(3D/7.jpeg);
}
.box6 {
transform: rotateY(0deg) translateZ(100px);
background-image: url(3D/6.jpeg);
}
@keyframes text {
from {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
to {
transform: rotateX(1turn) rotateY(2turn) rotateZ(3turn);
}
} <div class="warp">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>