新增第210个小实例:文字溶合切换效果
This commit is contained in:
parent
04a2b32549
commit
7317185f31
|
@ -217,7 +217,8 @@
|
|||
207. HTML5+CSS3小实例:弹出式悬停效果
|
||||
208. HTML5+CSS3+JS小实例:五彩纸屑礼花筒
|
||||
209. HTML5+CSS3+JS小实例:音频可视化
|
||||
210. 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)
|
||||
<!-- ![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%812.jpg) -->
|
||||
![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%812.jpg)
|
|
@ -0,0 +1,60 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.container{
|
||||
/* 100%窗口宽高 */
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 弹性布局 居中显示 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
font-size: 60px;
|
||||
/* 对比度滤镜 */
|
||||
/* 划重点:对比度滤镜+模糊滤镜可以做出溶球效果 */
|
||||
filter: contrast(15);
|
||||
}
|
||||
.word{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
/* 绝对定位 居中 */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
/* 模糊滤镜 默认不模糊 */
|
||||
filter: blur(0px);
|
||||
/* 执行动画:动画名 时长 加速后减速 无限播放 */
|
||||
animation: wordChange 8s ease-in-out infinite;
|
||||
}
|
||||
/* 为每句古诗设置不同的动画延迟时间 */
|
||||
.word:nth-child(1){
|
||||
animation-delay: -8s;
|
||||
}
|
||||
.word:nth-child(2){
|
||||
animation-delay: -6s;
|
||||
}
|
||||
.word:nth-child(3){
|
||||
animation-delay: -4s;
|
||||
}
|
||||
.word:nth-child(4){
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
@keyframes wordChange {
|
||||
0%,
|
||||
10%,
|
||||
100%{
|
||||
filter: blur(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
70%,
|
||||
80%{
|
||||
filter: blur(80px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<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>文字溶合切换效果</title>
|
||||
<link rel="stylesheet" href="210.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="word">别人笑我太疯颠</div>
|
||||
<div class="word">我笑他人看不穿</div>
|
||||
<div class="word">不见五陵豪杰墓</div>
|
||||
<div class="word">无花无酒锄作田</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue