When the wind rises, the clouds float in the sky. Html5 + CSS3, not to learn. I’ve been doing Web development for a few years now, and I’ve seen so many languages rise and fall. In fact, as a programmer, the most frustrating thing is to constantly catch up with the new frameworks and languages of major companies every day (this is the first.net programmer, of course unfortunately, I am a.net member, this just understand MVC 4.0 and now 5.0 comes out). Of course, complaining won’t solve anything, nor will it fill your wallet. So, programmers, keep learning.
The HTML5 + CSS3 era, referred to as the 3+5 era (3+5 was made up by me without any basis), has apparently been overwhelming. On October 29, 2014, the World Wide Web Consortium (W3C) announced that, after nearly eight years of hard work, the standard specification has finally been developed. This also thought, we should study quickly again, otherwise want ultraman again. I’ve been experimenting with HTML5 for a long time.
In this paper, the original author blog http://www.cnblogs.com/toutou
As I write this blog post, I don’t want to go on and on about the difference between HTML5 and HTML4. I think a lot of people are doing this already. I just rely on their own interests + projects need to demo here.
Ps: Water drop effect if not displayed, you can download the source code below.
Html part:
1 <! - love - > 2 < div class = "heart" id = "heart" > < / div > < 3! <span class="arrow -down"></span> 5 <! Word-wrap: break-word! Important;" > <span style="margin-left:152px; ></span> 7 <! <span class="water" style=" max-width: 100%; clear: both; min-height: 1em; ></span> 10 <span class="water" style="margin-left:200px;" ></span> 11 <span class="water" style="margin-left:50px;" ></span> 12 <! "> <span style=" max-width: 100%; clear: both; min-height: 1em; ></span> 14 <span class="water" style="margin-left:30px;" ></span> 15 <span class="water" style="margin-left:170px;" ></span> 16 <span class="water" style="margin-left:200px;" ></span> 17 </div>Copy the codeCSS part: PS: CSS3 inside some core attributes I have added a note, if you do not understand can leave a message. Plus, there’s a lot of this in the code (like “original from……”) ), I believe we all understand, this is to prevent malicious crawling plagiarism behavior! Support legal version 🙂
1 <style>
2 /*爱心*/
3 #heart {
4 position: relative;
5 width: 100px;
6 height: 90px;
7 margin-left: 200px;
8 transform: rotate3d(0.7, 0.5, 0.7, 45deg);
9 -ms-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* IE 9 */
10 -moz-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Firefox */
11 -webkit-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Safari and Chrome */
12 -o-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Opera */
13 /*这里需要插入一段小广告了，不得不说html5+css3实现了各个浏览器更好的兼容模式，这给开发者减少了很多痛苦*/
14 -webkit-transition-duration: 250ms;
15 -webkit-transition-function: ease-out;
16 -ms-transition-duration: 250ms;
17 -ms-transition-function: ease-out;
18 -moz-transition-duration: 250ms;
19 -moz-transition-function: ease-out;
20 -o-transition-duration: 250ms;
21 -o-transition-function: ease-out;
22 -webkit-user-select: none;
23 /***** 原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou ******/
24 -ms-user-select: none;
25 -moz-user-select: none;
26 -o-user-select: none;
27 opacity: 1;
28 animation: myHeart 5s;
29 -moz-animation: myHeart 5s; /* Firefox */
30 -webkit-animation: myHeart 5s; /* Safari 和 Chrome */
31 -o-animation: myHeart 5s; /* Opera */
32 -webkit-animation-name: myHeart;
33 -ms-animation-name: myHeart;
34 animation-name: myHeart;
35 -webkit-animation-duration: 5s;
36 -ms-animation-duration: 5s;
37 animation-duration: 5s;
38 /*nimation-iteration-count: 属性定义动画的播放次数 infinite为无限次播放*/
39 -webkit-animation-iteration-count: infinite;
40 -ms-animation-iteration-count: infinite;
41 animation-iteration-count: infinite;
42 -webkit-animation-timing-function: ease-in-out;
43 -ms-animation-timing-function: ease-in-out;
44 animation-timing-function: ease-in-out;
45 /*animation-dela: 属性定义动画何时开始*/
46 -webkit-animation-delay: 0s;
47 -ms-animation-delay: 0s;
48 animation-delay: 0s;
49 -webkit-animation-play-state: running;
50 -ms-animation-play-state: running;
51 animation-play-state: running;
52 }
53
54 #heart:before,
55 #heart:after {
56 position: absolute;
57 content: "";
58 left: 50px;
59 top: 0;
60 width: 50px;
61 height: 80px;
62 /*园友们可以注意: 这里是实现颜色渐变效果的地方*/
63 background: radial-gradient(#f5ebeb,#f77979,red);
64 -moz-border-radius: 50px 50px 0 0;
65 border-radius: 50px 50px 0 0;
66 -webkit-transform: rotate(-45deg);
67 -moz-transform: rotate(-45deg);
68 -ms-transform: rotate(-45deg);
69 /***** 原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou ******/
70 -o-transform: rotate(-45deg);
71 transform: rotate(-45deg);
72 -webkit-transform-origin: 0 100%;
73 -moz-transform-origin: 0 100%;
74 -ms-transform-origin: 0 100%;
75 -o-transform-origin: 0 100%;
76 transform-origin: 0 100%;
77 }
78
79 #heart:after {
80 left: 0;
81 -webkit-transform: rotate(45deg);
82 -moz-transform: rotate(45deg);
83 -ms-transform: rotate(45deg);
84 -o-transform: rotate(45deg);
85 /***** 原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou ******/
86 transform: rotate(45deg);
87 /*transform-origin：属性允许您改变被转换元素的位置*/
88 -webkit-transform-origin: 100% 100%;
89 -moz-transform-origin: 100% 100%;
90 -ms-transform-origin: 100% 100%;
91 -o-transform-origin: 100% 100%;
92 transform-origin: 100% 100%;
93 }
94
95 #heart:hover {
96 -webkit-transform: scale(1.2);
97 opacity: 0.9;
98 }
99
100 /*这里是每执行到一个百分比时，所执行的效果，其实在这里可以做很多事情*/
101 @keyframes myHeart {
102 0% {
103 transform: scale(0.05);
104 width: 10px;
105 height: 10px;
106 opacity: 0.05;
107 margin-left: 20px;
108 }
109
110 10% {
111 transform: scale(0.1);
112 width: 50px;
113 height: 50px;
114 opacity: 0.1;
115 }
116
117 20% {
118 transform: scale(0.2);
119 opacity: 0.2;
120 }
121
122 30% {
123 transform: scale(0.3);
124 opacity: 0.3;
125 }
126
127 40% {
128 transform: scale(0.4);
129 opacity: 0.4;
130 }
131
132 50% {
133 transform: scale(0.5);
134 opacity: 0.5;
135 }
136
137 60% {
138 transform: scale(0.6);
139 opacity: 0.6;
140 }
141
142 70% {
143 transform: scale(0.7);
144 opacity: 0.7;
145 }
146
147 80% {
148 transform: scale(0.8);
149 opacity: 0.8;
150 }
151
152 90% {
153 transform: scale(0.9);
154 opacity: 0.9;
155 }
156
157 100% {
158 transform: scale(1.0);
159 opacity: 1.0;
160 }
161 }
162
163 @-moz-keyframes myHeart /* Firefox */
164 {
165 0% {
166 -moz-transform: scale(0.05);
167 width: 10px;
168 height: 10px;
169 /***** 原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou ******/
170 opacity: 0.05;
171 margin-left: 20px;
172 }
173
174 10% {
175 -moz-transform: scale(0.1);
176 width: 50px;
177 height: 50px;
178 opacity: 0.1;
179 }
180
181 20% {
182 -moz-transform: scale(0.2);
183 opacity: 0.2;
184 }
185
186 30% {
187 -moz-transform: scale(0.3);
188 opacity: 0.3;
189 }
190
191 40% {
192 -moz-transform: scale(0.4);
193 opacity: 0.4;
194 }
195
196 50% {
197 -moz-transform: scale(0.5);
198 opacity: 0.5;
199 }
200
201 60% {
202 -moz-transform: scale(0.6);
203 opacity: 0.6;
204 }
205
206 70% {
207 -moz-transform: scale(0.7);
208 opacity: 0.7;
209 }
210
211 80% {
212 -moz-transform: scale(0.8);
213 opacity: 0.8;
214 }
215
216 90% {
217 -moz-transform: scale(0.9);
218 opacity: 0.9;
219 }
220
221 100% {
222 -moz-transform: scale(1.0);
223 opacity: 1.0;
224 }
225 }
226
227 @-webkit-keyframes myHeart /* Safari 和 Chrome */
228 {
229 0% {
230 -webkit-transform: scale(0.05);
231 width: 10px;
232 height: 10px;
233 opacity: 0.05;
234 margin-left: 20px;
235 }
236
237 10% {
238 -webkit-transform: scale(0.1);
239 width: 50px;
240 height: 50px;
241 opacity: 0.1;
242 }
243
244 20% {
245 -webkit-transform: scale(0.2);
246 opacity: 0.2;
247 }
248
249 30% {
250 -webkit-transform: scale(0.3);
251 opacity: 0.3;
252 }
253
254 40% {
255 -webkit-transform: scale(0.4);
256 opacity: 0.4;
257 }
258
259 50% {
260 -webkit-transform: scale(0.5);
261 opacity: 0.5;
262 }
263
264 60% {
265 -webkit-transform: scale(0.6);
266 opacity: 0.6;
267 }
268
269 70% {
270 -webkit-transform: scale(0.7);
271 opacity: 0.7;
272 }
273
274 80% {
275 -webkit-transform: scale(0.8);
276 opacity: 0.8;
277 }
278
279 90% {
280 -webkit-transform: scale(0.9);
281 opacity: 0.9;
282 }
283
284 100% {
285 -webkit-transform: scale(1.0);
286 opacity: 1.0;
287 }
288 }
289
290 @-o-keyframes myHeart /* Opera */
291 {
292 0% {
293 -o-transform: scale(0.05);
294 width: 10px;
295 height: 10px;
296 opacity: 0.05;
297 margin-left: 20px;
298 }
299
300 10% {
301 -o-transform: scale(0.1);
302 width: 50px;
303 height: 50px;
304 opacity: 0.1;
305 }
306
307 20% {
308 -o-transform: scale(0.2);
309 opacity: 0.2;
310 }
311
312 30% {
313 -o-transform: scale(0.3);
314 opacity: 0.3;
315 }
316
317 40% {
318 -o-transform: scale(0.4);
319 opacity: 0.4;
320 }
321
322 50% {
323 -o-transform: scale(0.5);
324 opacity: 0.5;
325 }
326
327 60% {
328 -o-transform: scale(0.6);
329 opacity: 0.6;
330 }
331
332 70% {
333 -o-transform: scale(0.7);
334 opacity: 0.7;
335 }
336
337 80% {
338 -o-transform: scale(0.8);
339 opacity: 0.8;
340 }
341
342 90% {
343 -o-transform: scale(0.9);
344 opacity: 0.9;
345 }
346
347 100% {
348 -o-transform: scale(1.0);
349 opacity: 1.0;
350 }
351 }
352
353 .arrow {
354 width: 40px;
355 height: 40px;
356 position: relative;
357 display: inline-block;
358 margin: 10px 10px;
359 }
360
361 .arrow:before, .arrow:after {
362 content: '';
363 border-color: transparent;
364 border-style: solid;
365 position: absolute;
366 }
367
368 .arrow-down:before {
369 border: none;
370 background-color: red;
371 height: 50%;
372 width: 30%;
373 top: 0;
374 left: 35%;
375 }
376
377 .arrow-down:after {
378 left: 0;
379 top: 50%;
380 border-width: 20px 20px;
381 border-top-color: red;
382 }
383
384 .water {
385 height: 40px;
386 width: 40px;
387 display: block;
388 position: relative;
389 }
390
391 .water:before {
392 content: ' ';
393 height: 26px;
394 width: 26px;
395 position: absolute;
396 top: 2px;
397 left: 0px;
398 z-index: 1;
399 line-height: 26px;
400 background: radial-gradient(#dbf5f5,#77f5f5,#21f1f1);
401 border-radius: 40px;
402 -webkit-border-radius: 40px;
403 -moz-border-radius: 40px;
404 color: #0defef;
405 text-align: center;
406 }
407
408 .water:after {
409 content: '';
410 height: 0px;
411 width: 0px;
412 position: absolute;
413 bottom: 2px;
414 left: 3px;
415 border: 10px transparent solid;
416 border-top-color: #0defef;
417 border-width: 15px 10px 0px 10px;
418 }
419 </style>
Copy the codeAlso provide source code download
About the author: Focus on basic platform project development. If you have any questions or suggestions, please feel free to comment! Copyright notice: The copyright of this article belongs to the author and the blog garden, welcome to reprint, but without the consent of the author must retain this statement, and give the original text link in a prominent place on the page of the article. For the record: all comments and messages will be answered as soon as possible. You are welcome to correct your mistakes and make progress together. Or directly message me to support the blogger: if you think the article is helpful to you, you can click on the lower right corner of the article “recommended”. Your encouragement is the author to adhere to the original and continuous writing of the biggest power! \