skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第244个小实例：粘性文字的滚动效果

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2024-03-25 11:26:26 +08:00
parent 84e5038279
commit 4d1ff9bb8d
3 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -251,6 +251,7 @@
241. HTML5+CSS3+JS小实例：旋转渐变光标
242. HTML5+CSS3小实例：点画文字悬停效果
243. HTML5+CSS3+JS小实例：网格图库
244. HTML5+CSS3小实例：粘性文字的滚动效果
#### 赞赏作者
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)

59
code/244/244.css Normal file
View File

@ -0,0 +1,59 @@
*{
margin: 0;
padding: 0;
}
body{
color: #fff;
height: 100vh;
overflow: hidden;
user-select: none;
background-color: #000;
}
.marquee{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.marquee-blur{
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
background-image: linear-gradient(to right, transparent, red);
filter: contrast(15000);
p{
mix-blend-mode: overlay;
filter: blur(0.1em);
}
}
.marquee-text{
font-size: 100px;
position: absolute;
min-width: 100%;
white-space: nowrap;
/* 执行动画：动画名 时长 线性的 循环的 */
animation: marquee 8s linear infinite;
}
.marquee-clear{
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* 定义动画 */
@keyframes marquee {
from{
translate: 100%;
}
to{
translate: -50%;
}
}

19
code/244/244.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性文字的滚动效果</title>
<link rel="stylesheet" href="244.css">
</head>
<body>
<div class="marquee">
<div class="marquee-blur">
<p class="marquee-text">粘性文字的滚动效果</p>
</div>
<div class="marquee-clear">
<p class="marquee-text">粘性文字的滚动效果</p>
</div>
</div>
</body>
</html>