html画熊代码,HTML+CSS画一朵向日葵(示例代码)
1 2 3 4 5 6 7 8 9 10 .petal{11 position:absolute;12 width:50px;13 height:130px;14 transform-origin:50% 150%;15 opacity:.9;16 }17 .petal > div:nth-child(1){18 position:absolute;19 left:0;20 top:0;21
1
2
3
4
5
6
7
8
9
10 .petal{
11 position:absolute;
12 width:50px;
13 height:130px;
14 transform-origin:50% 150%;
15 opacity:.9;
16 }
17 .petal > div:nth-child(1){
18 position:absolute;
19 left:0;
20 top:0;
21 width:50%;
22 height:100%;
23 overflow:hidden;
24 }
25 .petal > div:nth-child(1) > div{
26 position:absolute;
27 left:0;
28 top:-20px;
29 width:160px;
30 height:250px;
31 background-image:linear-gradient(95deg,#fef10c 0%,#ffc701 8%,#fef10c 15%,#ffc701 20%);
32 box-shadow:0 0 10px rgba(0,0,0,.3);
33 border-radius:50%;
34 }
35 .petal > div:nth-child(2){
36 position:absolute;
37 left:50%;
38 top:0;
39 width:50%;
40 height:100%;
41 overflow:hidden;
42 }
43 .petal > div:nth-child(2) > div{
44 position:absolute;
45 right:0;
46 top:-20px;
47 width:160px;
48 height:250px;
49 background-image:linear-gradient(-95deg,#fef10c 0%,#ffc701 8%,#fef10c 15%,#ffc701 20%);
50 box-shadow:0 0 10px rgba(0,0,0,.3);
51 border-radius:50%;
52 }
53 #box{
54 width:370px;
55 height:370px;
56 margin:0 auto;
57 position:relative;
58 }
59 .pistilShadow{
60 position:absolute;
61 left:180px;
62 top:195px;
63 width:120px;
64 height:120px;
65 border-radius:50%;
66 transform:translate(-50%,-50%);
67 box-shadow:-5px 5px 80px #bd3d0e;
68 }
69 .pistil{
70 position:absolute;
71 left:180px;
72 top:195px;
73 width:160px;
74 height:160px;
75 border-radius:50%;
76 transform:translate(-50%,-50%);
77 box-shadow:0 0 80px #bd3d0e inset;
78 background:#325302;
79 overflow:hidden;
80 }
81 .pistilLine{
82 position:absolute;
83 left:20%;
84 top:-50%;
85 transform-origin:center bottom;
86 width:60%;
87 height:100%;
88 border-radius:50%;
89 border:solid 1px #2f1307;
90 }
91 .pistil2{
92 position:absolute;
93 left:180px;
94 top:195px;
95 width:60px;
96 height:60px;
97 border-radius:50%;
98 transform:translate(-50%,-50%);
99 box-shadow:0 0 25px #bd3d0e inset;
100 background:#325302;
101 }
102 .dot{
103 position:absolute;
104 left:28px;
105 top:0;
106 width:4px;
107 height:4px;
108 border-radius:50%;
109 background:#fded00;
110 box-shadow:0 0 15px #fded00 inset;
111 transform-origin:center 30px;
112 }
113
114
115
116
更多推荐
所有评论(0)