黑龙江网站设计公司,怎么建设电子邮箱网站,青岛硅谷网站建设公司,静态网站更新文章麻烦目录
1. 效果展示
2. 思路分析
2.1 难点
2.2 实现思路
3. 代码实现
3.1 html部分
3.2 css部分
3.3 完整代码
4. 总结 1. 效果展示
如图所示#xff0c;这次带来的是一个有趣的“擦除”效果#xff0c;也可以叫做打字机效果#xff0c;其中一段文本从左到右逐渐从…目录
1. 效果展示
2. 思路分析
2.1 难点
2.2 实现思路
3. 代码实现
3.1 html部分
3.2 css部分
3.3 完整代码
4. 总结 1. 效果展示
如图所示这次带来的是一个有趣的“擦除”效果也可以叫做打字机效果其中一段文本从左到右逐渐从无到有的显示出来。 2. 思路分析
目标使文本从不可见到逐渐显现且有一定的过渡效果。
2.1 难点
难点1使用线性渐变实现逐行显示的效果。
难点2动画生效的前提条件是 数字类的属性。而这里控制线性渐变需要定义的是一个变量所以这里就需要将变量转化成属性。
2.2 实现思路
写下两段一模一样的文字将第二段文字覆盖第一段文字设置第二段文字的背景和整体背景一致且文字透明再设置第二段文字的线性渐变(从透明到黑色渐变)。这样第一段文字就会慢慢的显示出来就实现了上图所示的打字机效果。 3. 代码实现
接下来我会一步一步解说每段关键代码的含义。
3.1 html部分
div classcontainerdiv classboxpLorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore brullam illo nulla molestias! Nemo corporis ex brblanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi./pp classeraserspan classtextLorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore brullam illo nulla molestias! Nemo corporis ex brblanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi./span/p/div/div
这里有两段一模一样的段落其实真正显示的是第一段而第二段的作用实际是用它的背景来覆盖第一段文字的内容再通过背景渐变来浮现第一段文字的内容。
3.2 css部分 body{background: black;}p{margin: 0;}.container{font-size: 20px;color: white;font-family: Lucida Sans, Lucida Sans Regular, Lucida Grande, Lucida Sans;}.box{width: 500px;height: 500px;margin: 80px auto;position: relative;line-height: 2;}
body 设置整个背景为黑色.container 里设置文字的大小和颜色.box 设置居中样式并设置相对定位方便两段文字重叠。 .eraser{position: absolute;inset: 0;}
.text{--p: 30%;color: transparent;background: linear-gradient(to right, transparent var(--p), black calc(var(--p) 5px));animation: erase 5s forwards linear;}
.eraser 设置绝定位使两段文字重叠。 .text 里设置背景的线性渐变并用变脸 --p 来代替渐变范围通过控制 --p 的大小来实现文字逐步展现。
property --p{syntax: percentage;initial-value: 0%;inherits: false;}
keyframes erase {0%{--p: 0%;}100%{--p: 100%;}}
上文已经说过要想动画生效前提条件是动画中变化的是一个数字类属性 而这里的 --p 却是一个变量所以我们需要将变量通过 property 改为属性。
3.3 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv classcontainerdiv classboxpLorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore brullam illo nulla molestias! Nemo corporis ex brblanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi./pp classeraserspan classtextLorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore brullam illo nulla molestias! Nemo corporis ex brblanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi./span/p/div/div
/bodystylebody{background: black;}p{margin: 0;}.container{font-size: 20px;color: white;font-family: Lucida Sans, Lucida Sans Regular, Lucida Grande, Lucida Sans;}.box{width: 500px;height: 500px;margin: 80px auto;position: relative;line-height: 2;}.eraser{position: absolute;inset: 0;}property --p{syntax: percentage;initial-value: 0%;inherits: false;}.text{--p: 30%;color: transparent;background: linear-gradient(to right, transparent var(--p), black calc(var(--p) 5px));animation: erase 5s forwards linear;}keyframes erase {0%{--p: 0%;}100%{--p: 100%;}}
/style
/html 4. 总结
以上就是打字机效果的实现过程本文参考于 渡一老师的大师课教程。如果对你有所帮助的话不妨点赞加收藏后面还会带来更多有趣的前端动效关注我不迷路。
更多前端动效点击下方链接↓ ↓ ↓
前端动效_借来一夜星光的博客-CSDN博客
