cari
Rumahhujung hadapan webhtml tutorial[css]我要用css画幅画(五)_html/css_WEB-ITnose

接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果。

 

github:https://github.com/bee0060/Css-Paint , 完整代码在pages/sun-house-4.html和相关的css中可以找到

demo: http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-5.html

 

完整html如下:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Css Paint</title> 6     <link rel="stylesheet" type="text/css" href="../css/sun.css" /> 7     <link rel="stylesheet" type="text/css" href="../css/house.css" /> 8     <link rel="stylesheet" type="text/css" href="../css/human.css" /> 9     <link rel="stylesheet" type="text/css" href="../css/cloud.css" />10 11     <link rel="stylesheet" type="text/css" href="../css/human-animate.css" />12 </head>13 <body>14     <div class="sun">15         <div class="sun-body"></div>16         <div class="sun-shine-light sun-shine-light1"></div>17         <div class="sun-shine-light sun-shine-light2"></div>18         <div class="sun-shine-light sun-shine-light3"></div>19         <div class="sun-shine-light sun-shine-light4"></div>20         <div class="sun-shine-light sun-shine-light5"></div>21     </div>22 23     <div class="house-width house">24         <div class="house-width house-roof house-roof-left"></div>25         <div class="house-width house-roof house-roof-right"></div>26         <div class="house-width house-wall">            27             <div class="house-wall-door">                28                 <div class="house-wall-door-handle"></div>29             </div>30         </div>31     </div>32 33     <div class="human human-pos-1">34         <p class="lines human-speak">大家好,我叫小明。</p>35         <p class="lines human-speak human-speak-delay-3">我是一个程序员,最喜欢宅在家里LOL。</p>36         <p class="lines human-speak human-speak-delay-12">静静,我们交个朋友好吗?我的电话是13800123456。</p>37         <div class="human-head-normal"></div>38         <div class="human-body-normal"></div>39         <div class="human-arms-normal"></div>40         <div class="human-legs-normal"></div>41     </div>42 43     <div class="human human-pos-2">44         <p class="lines human-speak human-speak-delay-6">大家好,我叫静静</p>45         <p class="lines human-speak human-speak-delay-9">和大家看到的一样,我热爱舞蹈。</p>46         <p class="lines human-speak human-speak-delay-15">不要,程序员什么的最讨厌了!</p>47         <div class="human-head-normal"></div>48         <div class="human-body-normal"></div>49         <div class="human-arms-normal"></div>50         <div class="human-legs-1"></div>51     </div>52 53     <div class="cloud cloud-pos cloud-pos-1">54         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>55         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>56         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>57         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>58     </div>59     <div class="cloud cloud-pos cloud-pos-2">60         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>61         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>62         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>63         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>64     </div>65 </body>66 </html>

 

我将所需的动画css放在独立的文件中:

 1 .human-speak { 2     color: #fff; 3     float: left; 4     -webkit-animation-duration: 3s; 5       -webkit-animation-name: humanLineAppear; 6 }  7  8 .human-speak-delay-3 { 9     -webkit-animation-delay: 3s10 }11 12 .human-speak-delay-6 {13     -webkit-animation-delay: 6s14 }15 16 .human-speak-delay-9 {17     -webkit-animation-delay: 9s18 }19 20 .human-speak-delay-12 {21     -webkit-animation-delay: 12s22 }23 24 .human-speak-delay-15 {25     -webkit-animation-delay: 15s26 }27 28 @-webkit-keyframes humanLineAppear{29     from{30         top: -50px;31         color: #fff;32     }33     20%{34         top: -40px;35         color: #000;36         z-index:10;37     }38     80%{39         top: -40px;40         color: #000;41         z-index:10;42     }43     to{44         top: -50px;45         color: #fff;46         z-index:1;47     }48 }

 

这里用到的陌生的css属性或关键字包括:

1. -webkit-animation-duration

2.-webkit-animation-delay

3. -webkit-animation-name

4.@-webkit-keyframes

 

照例先上MDN文档地址: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations

 

动画系(animation属性及其子属性)的css在chrome中都需要加上浏览器前缀(-webkit-), 本以为前卫的chrome中不需要加前缀了,小小的遗憾了一把。下面的说明都把前缀省略。

 

以上1-3都是css属性,可以添加在css选择器中,或以内联属性的方式直接添加在标签的style属性中。

而第4个keyframes不同,下面再说。

 

1.animation-duration: 指定整个动画执行所需的时间, 接受time格式的值,即必须是数字+单位的格式, 单位可以是s(秒)或ms(毫秒),默认值为0s。

2.animation-delay: 指动画延迟执行的时间,即对象加载完毕到开始执行动画之间的时间,接受的时间格式也是时间,默认值为0s。

3.animation-name: 用于指定使用的动画规则名称。 默认值为none。

4.@keyframes:这是一个关键字, 中文翻译是“关键帧”。 开头的“@”符号是必须的,加上浏览器前缀时应该写成: @-webkit-keyframes yourKeyframesName, 其中yourKeyframesName是你的关键帧名称。

        该关键字用于声明动画规则,也可以看作一个特殊的选择器。 有点类似js中用于声明函数的function关键字。 语法类似如下:(示例中增加了-wekit-前缀)

 1 @-webkit-keyframes humanLineAppear{ 2     from{ 3         top: -50px; 4         color: #fff; 5     } 6     20%{ 7         top: -40px; 8         color: #000; 9         z-index:10;10     }11     80%{12         top: -40px;13         color: #000;14         z-index:10;15     }16     to{17         top: -50px;18         color: #fff;19         z-index:1;20     }21 }

关键帧的语法如上,关键帧内部以类似选择器的方式书写css属性,但是“选择器” 名字不再是id、className, 而是帧的描述, 或叫时间节点的描述,接受from,to或百分比数值。

其中from等同于0%, to等同于100%,

0%表示动画开始时刻, 100%表示结束时刻。 如果动画执行时间(animation-duration属性的值)是10s,那么50%表示第5秒这个时刻。

 

里面的每个百分比数值,都代表动画执行过程中的一个时间节点,我们暂称为: “帧”, 而帧的CSS属性集合,暂称为“帧选择器”。

帧选择器用于设置动画运行中某时间节点的css样式。

 

不同帧之间如果设置了相同的css属性名和不同的属性值,

浏览器会按照帧的时间顺序,针对这个CSS属性,找到属性值不同的最相邻的帧的组合(可能有多个帧的组合),以示例中的代码为例, 对于top属性会找到如下组合:

1. from(0%) --> 20%  :  top从-50px 变为-40px

2. 80% -->  to(100%) :  top从-40px 变为-50px 

 

上面的帧组合都有开始和结束帧,且其中都包含至少一个CSS属性的改变,我们暂时称其为: “帧区间”。

浏览器在动画执行时, CSS属性会在帧区间内匀速的变化,即从开始帧指定的属性值匀速增加或减少至结束帧指定的属性值。

 

---------------------------------------------------------------------------  我是突兀的分割线  ---------------------------------------------------------------------------

 

要让一个动画生效, 以下3个条件必须满足:

1. animation-name需要指向一个有效的用@keyframes声明的关键帧 , 表示动画有一个有效的动画规则。

2. animation-duration大于0s, 表示动画会有大于0秒的执行时间。

3. animation-iteration-count大于0, 表示动画至少会执行1次。(该属性默认值是1,所以一般不用设置就可以) 

 

好了,现在你应该也可以写一个属于自己的简单动画了。

 

今天就到这里, 谢谢观看。 如有错误,欢迎指正。

 

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Memahami HTML, CSS, dan JavaScript: Panduan PemulaMemahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebPeranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

HTML dan Kod: Melihat lebih dekat pada istilahHTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

HTML, CSS, dan JavaScript: Alat penting untuk pemaju webHTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab TerasPeranan HTML, CSS, dan JavaScript: Tanggungjawab TerasApr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Adakah HTML mudah belajar untuk pemula?Adakah HTML mudah belajar untuk pemula?Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Apakah contoh tag permulaan dalam html?Apakah contoh tag permulaan dalam html?Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Bagaimana cara menggunakan susun atur flexbox CSS untuk mencapai penjajaran yang berpusat pada kesan segmentasi garis putus -putus dalam menu?Bagaimana cara menggunakan susun atur flexbox CSS untuk mencapai penjajaran yang berpusat pada kesan segmentasi garis putus -putus dalam menu?Apr 05, 2025 pm 01:24 PM

Bagaimana untuk merancang kesan segmentasi garis bertitik di menu? Semasa merancang menu, biasanya tidak sukar untuk menyelaraskan kiri dan kanan antara nama hidangan dan harga, tetapi bagaimana pula dengan garis bertitik atau titik di tengah ...

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod