创建动画蒸汽效果

IT资讯 2018-07-30 58 次浏览 0 条评论

在文本中添加效果可以增加全新的参与度和兴趣。动态排版等效果将吸引观众的注意力,帮助用户体验并帮助讲述被告知的故事。 Do Wonders网站上的文字效果使网络字体逐行聚焦。继续阅读以了解如何重新创建类似的东西。

获取项目文件以帮助学习本教程。

01.启动HTML文档

第一步是定义将存储HTML内容的文档结构。这包括文件容器,它存储头部和身体部分。虽然head部分将墨水存储到外部CSS和JavaScript资源,但正文存储在步骤02中创建的可见内容。

<!DOCTYPE html>
<HTML>
<HEAD>
<title>模糊文字</ title>
<link rel =“stylesheet”type =“text / css”href =“styles.css”/>
<script src =“code.js”> </ script>
</ HEAD>
<BODY>
***第2步在这里
</ BODY>
</ HTML>
02. HTML内容

此步骤定义可见的HTML内容。请注意指定具有模糊效果的文本是如何包含在具有“模糊”类的容器中的。 JavaScript使用此类来引用步骤03中的文本项,并在后续步骤中使用CSS。

<H2>
纪律来自
<ul class =“blur”>
<LI>承诺</ LI>
<LI>毅力</ LI>
<LI>奉献</ LI>
<LI>训练</ LI>
<LI>抽吸</ LI>
<LI>教育</ LI>
</ UL>
</ H2>
03.自动动画延迟

创建一个名为“code.js”的新文件。模糊容器内的每个项目将在前一项目后三秒钟呈现。 JavaScript用于自动应用唯一的CSS属性。第一步是在页面加载后选择模糊容器中的所有第一级项目。

window.addEventListener(“load”,function(){
var nodes = document.querySelectorAll(“。blur> *”);
***第4步在这里
});
04.秒数

'for'循环用于引用在上一步中返回到'nodes'变量的每个项目。 'for'循环的索引计数器用于计算分配给动画延迟属性的秒数。因此,每个项目的延迟比前一个项目长三秒。

for(var i = 0; i <nodes.length; i ++){
nodes [i] .style.animationDelay =(i * 3)+“s”;
}
05. CSS模糊

创建一个名为“styles.css”的新文件。定义CSS表示规则的第一步是将每个文本项启动为不可见。还应用了一个名为“animationBlur”的动画,该动画将在5秒的持续时间内将项目设置为视图。动画模式必须设置为“前进”,以便在最后一帧停止。

.blur> * {
不透明度:0;
动画:animateBlur 5s前锋;
}
06.发起动画

在此步骤中定义应用于步骤5中的“模糊”元素的动画。对'animationBlur'的引用是作为关键帧动画制作的。第一帧'from'将元素设置为带有文本阴影的可见元素 - 但具有透明文本颜色。这就是产生模糊文本效果的原因。

@keyframes animateBlur {
来自{
不透明度:1;
text-shadow:0 0 1em rgba(0,0,0,.5);
颜色:rgba(0,0,0,0);
}
*** STEP 7在这里
}
07.最终的动画帧

动画中的“到”框架定义了文本将被动画化的最终帧。此框架将文本阴影设置为消失,并且文本颜色完全可见。结合步骤06,浏览器将自动计算“从”和“到”之间的动画帧。

至 {
不透明度:1;
text-shadow:0 0 0px rgba(0,0,0,0);
颜色:#000;
}
本文最初出现在Web Designer杂志上。在这里订阅。

记住 - 总是想到用户

生成 - 网页设计师的会议

 

在为页面引入奇特效果时,它需要有一个目的,您需要考虑用户体验。这就是自由职业前端UI开发人员Sara Soueidan将在Generate London 2018的“使用CSS(和SVG)进行良好用户体验”谈话中所揭示的内容。

在她的演讲中,她将展示CSS提供的各种可能性,以便使用CSS(在这里和那里散布SVG和JS)来改善UI的整体用户体验。

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论