接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果。 github:https://github.com/bee0060/Css-Paint , 完整代码在pages/sun-house-4.html和相关的css中可以找到d ...
接着之前的[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-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]我要用css画幅画(五)
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。