9个li+CSS实现七夕表白爱心动画&&1个h1+CSS实现跑马灯动画表白文字

没错，收到了来自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>
1
2
3
4
5
6
7
8
9
10
11
12
13

*{
  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)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

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>
1
2
3

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%);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

相关阅读:
K8S常见的持久化(存储)方案用法详解
 vue实现词云图（echarts/Highcharts）
TorchV的RAG实践分享(三):解析llama_index的数据存储结构和召回策略过程
 懒羊羊闲话1
发布与更新自己的npm包
 图解第一类曲面积分与第二类曲面积分的关系
 如何配置和使用自己的私有 Docker Registry
无胁科技-TVD每日漏洞情报-2022-11-14
Java基础之运算符
 Oracle数据库面试题-10
原文地址：https://blog.csdn.net/BWater_monster/article/details/126129269