1.波浪文字
css中使用变量 var(--a)，a为变量名，使用和定义时加--
定义变量a: --a
<!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>CSS 特效</title>
<style>
.wave {
margin-top: 100px;
text-align: center;
color: #fff;
}
.wave span {
display: inline-block;
animation: dance 1s ease-in-out infinite;
animation-delay: calc(.1s*var(--a));
}
@keyframes dance {
0% {
transform: translateY(0px);
}
20% {
transform: translateY(-24px);
}
60%, 100% {
transform: translateY(0px);
}
}
</style>
</head>
<body style="background-color: #000;">
<div class="wave">
<span style="--a: 1;">内</span>
<span style="--a: 2">容</span>
<span style="--a: 3">加</span>
<span style="--a: 4">载</span>
<span style="--a: 5">中</span>
<span style="--a: 6">.</span>
<span style="--a: 7">.</span>
<span style="--a: 8">.</span>
</div>
<script>
</script>
</body>
</html>animation：name duration timing-function delay iteration-count direction fill-mode play-state；
动画名称、完成动画的时间、动画速度曲线函数、动画延迟时间、动画播放次数、动画播放方向、动画未播放时的状态、动画执行状态(播放/暂停)
animation-timing-function: 动画速度曲线函数
animation-direction: 动画播放方向
animation-fill-mode: 动画不播放时的样式（动画不播放有两种情形：当动画完成后不播放时，或当动画有设置延迟时间未开始播放时）
animation-play-state：动画状态(播放running/暂停paused)
element.style.animationPlayState = paused2.波纹效果
还是利用变量设置动画延迟时间;
span一开始先设置border: none，不然中心会有一个小圆点；
宽高0%时为0；
opacity从50%为1到100%为0，渐渐消失
<!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>CSS 特效</title>
<style>
html,body {
width: 100%;
height: 100%;
}
.wave {
position: relative;
width: 800px;
height: 800px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
}
.wave span {
position: absolute;
border-radius: 50%;
border: none;
animation: wave 5s linear infinite;
animation-delay: calc(.5s*var(--a));
}
@keyframes wave {
0% {
width: 0;
height: 0;
border: 2px solid rgba(255, 255, 255, 0.25);
}
50% {
opacity: 1;
border: 2px solid rgba(255, 255, 255, 1);
}
100% {
width: 500px;
height: 500px;
border: 2px solid rgba(255, 255, 255, 1);
opacity: 0;
}
}
.wave2 span {
animation: wave2 5s linear infinite;
animation-delay: calc(.5s*var(--a));
background-color: rgba(0, 255, 0, 0.25);
}
@keyframes wave2 {
0% {
width: 0;
height: 0;
}
50% {
opacity: 1;
}
100% {
width: 500px;
height: 500px;
opacity: 0;
}
}
</style>
</head>
<body style="background-color: #000;">
<div class="wave">
<span style="--a: 1;"></span>
<span style="--a: 2"></span>
<span style="--a: 3"></span>
<span style="--a: 4"></span>
<span style="--a: 5"></span>
<span style="--a: 6"></span>
<span style="--a: 7"></span>
<span style="--a: 8"></span>
<span style="--a: 9"></span>
<span style="--a: 10"></span>
</div>
<div class="wave wave2">
<span style="--a: 1;"></span>
<span style="--a: 2"></span>
<span style="--a: 3"></span>
<span style="--a: 4"></span>
<span style="--a: 5"></span>
<span style="--a: 6"></span>
<span style="--a: 7"></span>
<span style="--a: 8"></span>
<span style="--a: 9"></span>
<span style="--a: 10"></span>
</div>
<script>
</script>
</body>
</html>3.悬停字幕
.zimu里的transform-origin、transform、transition定义的是初始状态和过渡结束状态，初始状态的动画在页面渲染完就完成了，我们看不见，结束状态时我们能看见：鼠标离开就会执行终态动画。
一开始zimu以右侧为中心过渡成了scaleX(0)，这一步我们看不见，当hover时，以左侧为中心向右过渡成scaleX(1)，hover结束，再次以右侧为中心过渡成scaleX(0)，.zimu中定义的就是一开始和hover结束的状态
<!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>CSS 特效</title>
<style>
html,body {
width: 100%;
height: 100%;
}
section {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.wrap {
position: relative;
}
.img {
width: 400px;
height: 300px;
border: 1px solid red;
}
.wrap:hover .zimu {
transform-origin: left;
transform: scaleX(1);
transition: transform .5s linear;
}
.zimu {
position: absolute;
top: 0;
width: 400px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.2);
color: #fff;
transform-origin: right;
transform: scaleX(0);
transition: transform .5s linear;
}
.zimu span {
opacity: 0;
transition: all .5s;
}
.wrap:hover .zimu span {
opacity: 1;
transition: all .5s;
transition-delay: .2s;
}
</style>
</head>
<body>
<section>
<div class="wrap">
<div class="img">
<img src="./404.png" width="400" height="300" alt="">
</div>
<div class="zimu">
<span>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</span>
</div>
</div>
<div class="wrap">
<div class="img">
<img src="./404.png" width="400" height="300" alt="">
</div>
<div class="zimu">
<span>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</span>
</div>
</div>
</section>
<script>
</script>
</body>
</html>4.全屏视频背景滚动淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全屏视频背景滚动淡出</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: '微软雅黑', sans-serif;
}
body{
background: #000;
}
section{
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 100px;
}
section video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section h2 {
position: relative;
color: #fff;
font-size: 3em;
}
section p {
position: relative;
color: #fff;
font-size: 1.2em;
}
</style>
</head>
<body>
<section>
<video src="./jbd.mp4" muted autoplay loop></video>
</section>
<section>
<div class="content">
<h2>以劳动书写人生风采</h2>
<p>
中华民族是一个热爱劳动的民族，劳动精神自古以来就流淌在中国人民的血脉之中，去不掉、打不破、灭不了。“幸福是奋斗出来的”，个人追求的实现，离不开不懈奋斗劳动;家国复兴的使命，也只有靠劳动来成就。
此处省略了很多字...................................
</p>
</div>
</section>
<script>
let video = document.querySelector('video')
window.addEventListener('scroll', function() {
let value = 1 + window.scrollY / -600
video.style.opacity = value
})
</script>
</body>
</html>
利用滚动距离计算透明度的值，滚动距离越大透明度越小，1-window.scrollY/(-600)，从而实现淡出的效果
object-fill属性取值：
pointer-events属性：
pointer-events:none可以实现鼠标穿透
