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

前端开发作者： 2024-08-21 10:50:01

接着之前的[css]我要用css画幅画(五)，由于这个画已经画了很久了，这次一次性加了比较多更新，算是让这幅画告一段落吧。本次的更新包括： 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个

 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-house/sun.css" />
 7     ="../../css/sun-house/house.css"  8     ="../../css/sun-house/human.css"  9     ="../../css/sun-house/cloud.css" 10     ="../../css/sun-house/tree.css"11     ="../../css/sun-house/apple.css"12 
13     ="../../css/sun-house/human-animate.css" 14     ="../../css/sun-house/cloud-animate.css" 15 
16     script type="text/javascript" src="js/analysis.js"></script17 18 body19     div class="sun"20         ="sun-body"div21         ="sun-shine-light sun-shine-light1"22         ="sun-shine-light sun-shine-light2"23         ="sun-shine-light sun-shine-light3"24         ="sun-shine-light sun-shine-light4"25         ="sun-shine-light sun-shine-light5"26     27 
28     ="house-width house"29         ="house-width house-roof house-roof-left"30         ="house-width house-roof house-roof-right"31         ="house-width house-wall">            
32             ="house-wall-door">                
33                 ="house-wall-door-handle"34             35         36     37 
38     ="human human-pos-1"39         p ="lines human-speak">大家好，我叫小明。p40         ="lines human-speak human-speak-delay-3">我是一个程序员，最喜欢宅在家里LOL。41         ="lines human-speak human-speak-delay-12">静静，我们交个朋友好吗？我的电话是13800123456。42         ="human-head-normal"43         ="human-body-normal"44         ="human-arms-normal"45         ="human-legs-normal"46     47 
48     ="human human-pos-2"49         ="lines human-speak human-speak-delay-6">大家好，我叫静静50         ="lines human-speak human-speak-delay-9">和大家看到的一样，我热爱舞蹈。51         ="lines human-speak human-speak-delay-15">不要，程序员什么的最讨厌了！52         53         54         55         ="human-legs-1"56     57 
58     ="cloud cloud-pos cloud-pos-1 cloud-animate-1"59         ="cloud-pos cloud-border cloud-bg cloud-top"60         ="cloud-pos cloud-border cloud-bg cloud-left"61         ="cloud-pos cloud-border cloud-bg cloud-right"62         ="cloud-pos cloud-border cloud-bg cloud-bottom"63     64     ="cloud cloud-pos cloud-pos-2 cloud-animate-2"65         66         67         68         69     70 
71     ="tree"72         ="tree-top"73             ="tree-crowwn tree-crowwn-left"74             ="tree-crowwn tree-crowwn-top"75             ="tree-crowwn tree-crowwn-right"76             ="tree-crowwn tree-crowwn-bottom"77         78         ="tree-middle"79             ="tree-trunk"80         81         ="tree-bottom"82             ="tree-root tree-root-left"83             ="tree-root tree-root-middle"84             ="tree-root tree-root-right"85         86     87     <!-- TODO:     1.苹果左右震动一下再下跌
88             2.苹果跌下来后向左滚动几圈 -->
89     ="apple"90         ="apple-body apple-left"91         ="apple-body apple-right"92         ="apple-stalk"93     94 95 html>

View Code

 1 .cloud-animate-1 {
 2     -webkit-animation-duration: 20s;
 3       -webkit-animation-name: cloudMove-1;
 4       -webkit-animation-iteration-count: infinite;
 5       -webkit-animation-direction: alternate;
 6 }
 7 
 8 .cloud-animate-2 {
 9 10  cloudMove-2;
11 12 13 }
14 
15 @-webkit-keyframes cloudMove-1 {
16     25% {
17         top : 10px;
18     }
19 
20     50% {
21         top: 50px;
22     }
23 
24     75% {
25  20px; 
26     }
28     to {     
29         left: 10%     
30     }
31 }
32 
33 @-webkit-keyframes cloudMove-2 {
34 35  30px;
36     }
38 39  80px;
40     }
41 
42 43  10px; 
44     }
45 
46     to { 
47  85%         
48     }
49 }

could-animate

.tree{
    bottom:    height: 700px;
    position: absolute;
    right: 120px;
 6     width: 500px;
 7 }
 8 
 9 .tree-crowwn {
    background-color: green;
    border-radius: 50%;
13     z-index: 2;
14 }
16 .tree-crowwn-left {
 250px;
18     top: 150px;
19 20 }
21 
22 .tree-crowwn-top {
23  320px;
24     left: 100px;
26 }
.tree-crowwn-right {
30 31 32 33 }
34 
35 .tree-crowwn-bottom {
36 37 38  270px;
 200px;
40 }
.tree-trunk {
 #5d2323;
44  280px;
45  170px;
46  350px;
48  180px;
49  1;
50 }
51 
52 .tree-bottom {
53 54  630px;
55 }
56 
57 .tree-root {
58  #503333;    
59 60 61  20px;
62 }
63 
64 .tree-root-left {
65 66     -webkit-transform: matrix(1,-0.5,1,0);
67     -webkit-transform-origin: right top;
68 }
69 
70 .tree-root-middle {
71 72 73 }
74 
75 .tree-root-right {
76  330px;
77 78  left top;
79 }

tree

.apple {
 360px;
 60px;    
 480px;
 60px;
 7  3;
 1.5s;
    -webkit-animation-delay: 18s;
 appleDrop;
      -webkit-animation-timing-function: cubic-bezier(0.5,0.1,0.85,0.3);
      -webkit-animation-fill-mode: forwards;
.apple-body {
 #ff3300;    
 75% 75% 90% 90%;
20  37px;
22 23 }
24 
25 .apple-left {
26 
27 }
28 
29 .apple-right {
2px;
31 }
.apple-stalk {
    border: none;
 100%;
    border-right: 3px solid #000;
20px;
 8px;
40 -10px;
41 42 43 }
44 
45 @-webkit-keyframes appleDrop{
    from{
47          
    20%{
50          
51     }
    80%{
53          
54     }
55     to{
56         bottom: 35px;
57     }
58 }

apple

normal：正向执行，顺序为从from(0%)执行到to(100%)。
reverse：反向执行，顺序为从to(100%)执行到from(0%)。
alternate: 先正向执行再反向执行，也可以理解为奇数次时正向执行，偶数次时反向执行。
alternate-reverse：和alternate相反，先反向执行再正向执行。

steps : 语法为 steps(N,target),N为正整数， target为目标，可以设置start或end（其他值没试过，文档中也没提到）。意思就是，不匀速的分N次到达start。这里举个栗子
cubic-bezier：贝塞尔曲线，语法为 cubic-bezier(x₁,y₁,x₂,y₂)，其中四个参数都是小数，可以为负数。通过x和y坐标，定出2个点，通过这两个点，描述一个变化曲线。还没深入研究过，这里暂不多谈。前面的链接是百度百科的，有兴趣可以看看。今天搜到一个不错的网站，可以用来感受一下贝塞尔曲线在动画上的实际效果：http://cubic-bezier.com/#.17,.67 。平时写动画时也可以借助这个网站，不用辛苦的调半天数字。

`animation-direction`	`animation-iteration-count`	第一帧	最后一帧
`normal`	任何值	`0%` or `from`	`100%` or `to`
`reverse`	任何值	`100%` or `to`	`0%` or `from`
`alternate`	偶数	`0%` or `from`	`0%` or `from`
`alternate`	奇数	`0%` or `from`	`100%` or `to`
`alternate-reverse`	偶数	`100%` or `to`	`100%` or `to`
`alternate-reverse`	奇数	`100%` or `to`	`0%` or `from`