[css]我要用css画幅画(五)

前端开发作者： 2024-08-21 10:55:02

接着之前的[css]我要用css画幅画(四)，这次我给小明和静静增加了对话，用了简单的动画效果。github：https://github.com/bee0060/Css-Paint，完整代码在p

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

View Code

 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: 3s
10 }
11 
12 .human-speak-delay-6 {
13  6s
14 }
15 
16 .human-speak-delay-9 {
17  9s
18 }
19 
20 .human-speak-delay-12 {
21  12s
22 }
23 
24 .human-speak-delay-15 {
25  15s
26 }
27 
28 @-webkit-keyframes humanLineAppear{
29     from{
30         top: -50px;
31         color:32     }
33     20%{
34  -40px;
35  #000;
36         z-index:10;
37     }
38     80%{
39 40 41 42     }
43     to{
44 45 46 1;
47     }
48 }

human-animate.css

 5     }
 6  7  8 10     }
11 12 14 15     }
18 19 20     }
21 }

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_66052.html

相关资讯： [css]我要用css画幅画(五)

[css]我要用css画幅画(五)

猜你喜欢

相关新闻

推荐模板

推荐精华

热门标签