更新第35个小实例
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
58f1c2cdcb
commit
7f2f412d86
|
|
@ -38,4 +38,5 @@
|
|||
31. HTML5+CSS3小实例之雷达扫描特效
|
||||
32. HTML5+CSS3小实例之毛玻璃炫光按钮
|
||||
33. HTML5+CSS3小实例之手机充电特效
|
||||
34. HTML5+CSS3小实例之超酷的字体发光效果
|
||||
34. HTML5+CSS3小实例之超酷的字体发光效果
|
||||
35. HTML5+CSS3小实例之超酷的文字滚动特效
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
*{
|
||||
/* 初始化 取消页面元素的内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
background-color: #f2be45;
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 执行背景颜色变化的动画：动画名 时长 线性的 停留在最后一帧 */
|
||||
animation: changeBg 2.5s linear forwards;
|
||||
}
|
||||
/* 添加祝贺文本 */
|
||||
.container::before,
|
||||
.container::after{
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
color: #f2be45;
|
||||
font-size: 70px;
|
||||
font-weight: bold;
|
||||
/* 执行显示祝贺文本的动画 */
|
||||
animation: showText 2.5s linear forwards;
|
||||
}
|
||||
.container::before{
|
||||
content: "热烈祝贺";
|
||||
left: 5%;
|
||||
/* 沿X轴倾斜15度 */
|
||||
transform: skewX(15deg);
|
||||
}
|
||||
.container::after{
|
||||
content: "卫冕冠军";
|
||||
right: 5%;
|
||||
/* 沿X轴倾斜-15度 */
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
.letter{
|
||||
font-size: 160px;
|
||||
font-weight: bold;
|
||||
color: #725e82;
|
||||
/* 转大写 */
|
||||
text-transform: uppercase;
|
||||
/* 绝对固定定位 */
|
||||
position: fixed;
|
||||
}
|
||||
.letter span{
|
||||
/* 弹性布局 水平、垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
}
|
||||
.letter.letter1{
|
||||
left: calc(50% - 270px);
|
||||
top: -400px;
|
||||
/* 执行动画：动画名 时长 加速后减速 */
|
||||
animation: letter1Animate 2.5s ease-in-out;
|
||||
}
|
||||
.letter.letter2{
|
||||
left: calc(50% - 90px);
|
||||
top: -200px;
|
||||
/* 执行动画：动画名 时长 加速后减速 */
|
||||
animation: letter2Animate 2.5s ease-in-out;
|
||||
}
|
||||
.letter.letter3{
|
||||
left: calc(50% + 90px);
|
||||
top: -800px;
|
||||
/* 执行动画：动画名 时长 加速后减速 */
|
||||
animation: letter3Animate 2.5s ease-in-out;
|
||||
}
|
||||
.letter .check{
|
||||
color: #f2be45;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
/* 改变背景颜色 */
|
||||
@keyframes changeBg {
|
||||
0%{
|
||||
background-color: #f2be45;
|
||||
}
|
||||
100%{
|
||||
background-color: #725e82;
|
||||
}
|
||||
}
|
||||
/* 第一个字母的滚动动画 */
|
||||
@keyframes letter1Animate {
|
||||
0%{
|
||||
top: -2000px;
|
||||
}
|
||||
100%{
|
||||
top: -400px;
|
||||
color: #725e82;
|
||||
}
|
||||
}
|
||||
/* 第二个字母的滚动动画 */
|
||||
@keyframes letter2Animate {
|
||||
0%{
|
||||
top: -4000px;
|
||||
}
|
||||
100%{
|
||||
top: -200px;
|
||||
color: #725e82;
|
||||
}
|
||||
}
|
||||
/* 第三个字母的滚动动画 */
|
||||
@keyframes letter3Animate {
|
||||
0%{
|
||||
top: -3000px;
|
||||
}
|
||||
100%{
|
||||
top: -800px;
|
||||
color: #725e82;
|
||||
}
|
||||
}
|
||||
/* 显示祝贺文本 */
|
||||
@keyframes showText {
|
||||
0%{
|
||||
color: #f2be45;
|
||||
}
|
||||
98%{
|
||||
color: #725e82;
|
||||
text-shadow: none;
|
||||
}
|
||||
100%{
|
||||
color: #fff;
|
||||
/* 文字阴影 */
|
||||
text-shadow: 5px 5px 0 #f2be45;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>超酷的文字滚动特效</title>
|
||||
<link rel="stylesheet" href="../css/35.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="letter letter1">
|
||||
<span>a</span>
|
||||
<span>b</span>
|
||||
<span>c</span>
|
||||
<span>d</span>
|
||||
<span class="check">e</span>
|
||||
<span>f</span>
|
||||
<span>g</span>
|
||||
<span>h</span>
|
||||
<span>i</span>
|
||||
<span>j</span>
|
||||
<span>k</span>
|
||||
<span>l</span>
|
||||
<span>m</span>
|
||||
<span>n</span>
|
||||
<span>o</span>
|
||||
<span>p</span>
|
||||
<span>q</span>
|
||||
<span>r</span>
|
||||
<span>s</span>
|
||||
<span>t</span>
|
||||
<span>u</span>
|
||||
<span>v</span>
|
||||
<span>w</span>
|
||||
<span>x</span>
|
||||
<span>y</span>
|
||||
<span>z</span>
|
||||
</div>
|
||||
<div class="letter letter2">
|
||||
<span>a</span>
|
||||
<span>b</span>
|
||||
<span>c</span>
|
||||
<span class="check">d</span>
|
||||
<span>e</span>
|
||||
<span>f</span>
|
||||
<span>g</span>
|
||||
<span>h</span>
|
||||
<span>i</span>
|
||||
<span>j</span>
|
||||
<span>k</span>
|
||||
<span>l</span>
|
||||
<span>m</span>
|
||||
<span>n</span>
|
||||
<span>o</span>
|
||||
<span>p</span>
|
||||
<span>q</span>
|
||||
<span>r</span>
|
||||
<span>s</span>
|
||||
<span>t</span>
|
||||
<span>u</span>
|
||||
<span>v</span>
|
||||
<span>w</span>
|
||||
<span>x</span>
|
||||
<span>y</span>
|
||||
<span>z</span>
|
||||
</div>
|
||||
<div class="letter letter3">
|
||||
<span>a</span>
|
||||
<span>b</span>
|
||||
<span>c</span>
|
||||
<span>d</span>
|
||||
<span>e</span>
|
||||
<span>f</span>
|
||||
<span class="check">g</span>
|
||||
<span>h</span>
|
||||
<span>i</span>
|
||||
<span>j</span>
|
||||
<span>k</span>
|
||||
<span>l</span>
|
||||
<span>m</span>
|
||||
<span>n</span>
|
||||
<span>o</span>
|
||||
<span>p</span>
|
||||
<span>q</span>
|
||||
<span>r</span>
|
||||
<span>s</span>
|
||||
<span>t</span>
|
||||
<span>u</span>
|
||||
<span>v</span>
|
||||
<span>w</span>
|
||||
<span>x</span>
|
||||
<span>y</span>
|
||||
<span>z</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue