没错，收到了来自csdn的提示，说是七夕写文章有勋章可以拿。然后想起来刚接触前端的时候学习的几个demo。教学视频来源找不到了，这里分享一下代码⬇️⬇️⬇️
1、七夕表白爱心动画
原理
九个li标签，为每个li设置不同的动画效果并设置不同的延时，改变li的高度及transform。
代码
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #000;
}
ul{
display: flex;
height: 200px;
}
li{
width: 20px;
height: 20px;
border-radius: 10px;
margin-right: 20px;
}
li:nth-child(1){
background-color: red;
animation: love1 4s 0s infinite;
}
li:nth-child(2){
background-color: yellow;
animation: love2 4s 0.2s infinite;
}
li:nth-child(3){
background-color: greenyellow;
animation: love3 4s 0.4s infinite;
}
li:nth-child(4){
background-color: palevioletred;
animation: love4 4s 0.8s infinite;
}
li:nth-child(5){
background-color: blueviolet;
animation: love5 4s 1s infinite;
}
li:nth-child(6){
background-color: orangered;
animation: love4 4s 1.2s infinite;
}
li:nth-child(7){
background-color: deeppink;
animation: love3 4s 1.2s infinite;
}
li:nth-child(8){
background-color: lawngreen;
animation: love2 4s 1.6s infinite;
}
li:nth-child(9){
background-color: turquoise;
animation: love1 4s 1.8s infinite;
}
@keyframes love1{
30%, 50%{
height: 60px;
transform: translateY(-30px)
}
70%, 100%{
height: 0px;
transform: translateY(0px)
}
}
@keyframes love2{
30%, 50%{
height: 125px;
transform: translateY(-60px)
}
70%, 100%{
height: 0px;
transform: translateY(0px)
}
}
@keyframes love3{
30%, 50%{
height: 160px;
transform: translateY(-65px)
}
70%, 100%{
height: 0px;
transform: translateY(0px)
}
}
@keyframes love4{
30%, 50%{
height: 180px;
transform: translateY(-60px)
}
70%, 100%{
height: 0px;
transform: translateY(0px)
}
}
@keyframes love5{
30%, 50%{
height: 200px;
transform: translateY(-45px)
}
70%, 100%{
height: 0px;
transform: translateY(0px)
}
}
2、跑马灯动画表白文字
原理
通过文本的重叠，再通过裁剪+动画的效果实现裁剪部分（带有背景图的文本）的移动，来制作成的跑马灯效果
逻辑
- 基础结构布置：两行文本（标签h1和伪元素h1::after）重叠
- 基础样式设置：使其中一行文本（h1::after）添加渐变色背景图，且颜色设为透明（ color: transparent;），再通过clip剪切设置圆形（clip-path: ellipse(100px 100px at 0% 50%)），以其中文本格式裁剪（background-clip: text）。
- 通过设置渲染动画（animation）使得圆形在文本上左右横移实现跑马灯
代码
<body>
<h1 data-sptlight="CSDN我宣你❤️❤️❤️">CSDN我宣你❤️❤️❤️</h1>
</body>
html{
font-size: 15px;
}
body{
display: flex;
background-color: #222;
justify-content: center;/*盒子在容器中水平对齐*/
align-items: center;/*盒子中各项垂直对齐*/
min-height: 100vh;
}
h1{
color: #333;
font-family: Helvetica;
font-size: 6rem;
margin: 0;
padding: 0;
letter-spacing: -0.3rem;/*字间距*/
position: relative;
word-wrap: nowrap;
}
h1::after{
content: attr(data-sptlight);/*内容设置为html标签中属性为data-sptlight的值*/
color: transparent;/*渐变的背景图片设置好后，把颜色改为透明*/
position: absolute;
left: 0;
top: 0;
clip-path: ellipse(100px 100px at 0% 50%);/*直径为100px的正圆形，位置为水平最左，垂直中间*/
animation: spotlight 5s infinite;/*加载动画，5s 无限循环*/
background-image: url(./spotlight.jpeg);/*添加渐变色的背景图*/
background-size: 150%;
background-position: center center;
-webkit-background-clip: text;/*以区块内的文字裁剪*/
background-clip: text;
}
/*正圆形画完后，用animation动态的改变正圆形位置就可以实现效果了*/
@keyframes spotlight{
0% {
clip-path: ellipse(100px 100px at 0% 50%);
}
50% {
clip-path: ellipse(100px 100px at 100% 50%);
}
100% {
clip-path: ellipse(100px 100px at 0% 50%);
}
}