CSS3学习笔记（1）-淡入的文字_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

CSS3学习笔记（1）-淡入的文字_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:35 AM

今天有空把前几天学的东西发一下，都是一些简单的东西，但是千里之行始于足下，我虽然走的慢，但是未停下前进的脚步~~~~~~~

下来看下我做的“淡入的文字”最终动态效果：

上面这个动画效果制作的过程是：

（1）先自定义一个透明度从0到1变化的动画，然后在animation中调用这个动画效果

（2）注意不同行文字出现的时间先后，这个通过animation中延时属性可以实现

（3）规定文字最终动态为动画的最终显示状态，否则文字显示完会自动消失，这个用animation-fill-mode可以实现

一、先来看看HTML中程序：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>淡入的文字</title>        <link type="text/css" rel="stylesheet" href="css/animate.css" />    </head>    <body>        <div class="fade-in-words">            <div class="first-words">山一程，水一程，</div>            <div class="second-words">身向榆关那畔行，</div>            <div class="third-words">夜深千帐灯。</div>            <div class="four-words">风一更，雪一更，</div>            <div class="five-words">聒碎乡心梦不成，</div>            <div class="six-words">故园无此声。</div>        </div>    </body></html>

上面这段程序主要是先把文字呈现出来，我随便找了一首诗啦~~~~~大家不要去猜它的意思QAQ

二、看看CSS样式（主要是CSS3）

.fade-in-words{    width: 200px;    margin: 0 auto;    text-align: center;}/*自定义一个透明度从0到1的动画，它的名称是fade-in*/@keyframes fade-in{      0%{ opacity: 0;}    100%{opacity:1;}}@-webkit-keyframes fade-in{    0%{ opacity: 0;}    100%{opacity:1;}}@-ms-keyframes fade-in{    0%{ opacity: 0;}    100%{opacity:1;}}@-o-keyframes fade-in{    0%{ opacity: 0;}    100%{opacity:1;}}@-moz-keyframes fade-in{    0%{ opacity: 0;}    100%{opacity:1;}}.first-words{     opacity: 0;      /*实先规定文字的状态是不显示的*/    animation: fade-in 4s ease 0s 1;    /*调用名称为fade-in的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/    -webkit-animation: fade-in 4s ease 0s 1;    -moz-animation: fade-in 4s ease 0s 1;    -o-animation: fade-in 4s ease 0s 1;    -ms-animation: fade-in 4s ease 0s 1;        /*规定动画的最后状态为结束状态*/    animation-fill-mode:forwards;    -webkit-animation-fill-mode: forwards;        -o-animation-fill-mode: forwards;       -ms-animation-fill-mode: forwards;         -moz-animation-fill-mode: forwards; }.second-words{     opacity: 0;        animation: fade-in 4s ease 2s 1;    -webkit-animation: fade-in 4s ease 2s 1;    -moz-animation: fade-in 4s ease 2s 1;    -o-animation: fade-in 4s ease 2s 1;    -ms-animation: fade-in 4s ease 2s 1;        /*规定动画的最后状态为结束状态*/    animation-fill-mode:forwards;    -webkit-animation-fill-mode: forwards;        -o-animation-fill-mode: forwards;       -ms-animation-fill-mode: forwards;         -moz-animation-fill-mode: forwards; }.third-words{     opacity: 0;        animation: fade-in 4s ease 4s 1;    -webkit-animation: fade-in 4s ease 4s 1;    -moz-animation: fade-in 4s ease 4s 1;    -o-animation: fade-in 4s ease 4s 1;    -ms-animation: fade-in 4s ease 4s 1;        /*规定动画的最后状态为结束状态*/    animation-fill-mode:forwards;    -webkit-animation-fill-mode: forwards;        -o-animation-fill-mode: forwards;       -ms-animation-fill-mode: forwards;         -moz-animation-fill-mode: forwards; }.four-words{     opacity: 0;        animation: fade-in 4s ease 6s 1;    -webkit-animation: fade-in 4s ease 6s 1;    -moz-animation: fade-in 4s ease 6s 1;    -o-animation: fade-in 4s ease 6s 1;    -ms-animation: fade-in 4s ease 6s 1;        /*规定动画的最后状态为结束状态*/    animation-fill-mode:forwards;    -webkit-animation-fill-mode: forwards;        -o-animation-fill-mode: forwards;       -ms-animation-fill-mode: forwards;         -moz-animation-fill-mode: forwards; }.five-words{     opacity: 0;        animation: fade-in 4s ease 8s 1;    -webkit-animation: fade-in 4s ease 8s 1;    -moz-animation: fade-in 4s ease 8s 1;    -o-animation: fade-in 4s ease 8s 1;    -ms-animation: fade-in 4s ease 8s 1;        /*规定动画的最后状态为结束状态*/    animation-fill-mode:forwards;    -webkit-animation-fill-mode: forwards;        -o-animation-fill-mode: forwards;       -ms-animation-fill-mode: forwards;         -moz-animation-fill-mode: forwards; }.six-words{     opacity: 0;        animation: fade-in 4s ease 10s 1;    -webkit-animation: fade-in 4s ease 10s 1;    -moz-animation: fade-in 4s ease 10s 1;    -o-animation: fade-in 4s ease 10s 1;    -ms-animation: fade-in 4s ease 10s 1;        /*规定动画的最后状态为结束状态*/    animation-fill-mode:forwards;    -webkit-animation-fill-mode: forwards;        -o-animation-fill-mode: forwards;       -ms-animation-fill-mode: forwards;         -moz-animation-fill-mode: forwards; }

上面的程序我在注释里面都写得很清楚，感兴趣的可以看我写的注释，我觉得比较简单，没有难度，但是需要注意浏览器前缀的添加，否则你懂得~~~~

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles