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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7833

Java教學

1648

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1240

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

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

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

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。