大風起兮雲飛揚，安得猛士兮走四方!html5+css3，不學不行。 做web開發已經有好幾年了，見證了太多語言的崛起和隕落。 其實作為一個程序員最苦逼的事情莫過於每天要不停的追趕各大公司新出的框架和語言(這首當其沖的就是.net程序員，當然很不幸，我就是.net成員，這剛把mvc 4.0整明白現在5.0又出來了。) 當然，抱怨解決不了任何問題，抱怨也無法讓你的錢包鼓起來。so, 程序猿們，繼續學習吧。
html5+css3時代， 簡稱3+5時代(3+5是我自己瞎編的，沒有任何依據 - -)顯然已經鋪天蓋地而來，2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，該標准規范終於制定完成。這也就以為着，我們又該趕緊學習了，不然又要奧特曼了。其實我在很早以前就開始接觸html5了。
本文原始作者博客 http://www.cnblogs.com/toutou
我寫這篇博客，我不想在這叨叨html5與html4的區別，我想這些工作已經有很多人做了。 我只是憑借自己的興趣愛好+項目的需要 在這里demo一下。
代碼效果：ps:水滴效果如果無法顯示，可以在下面下載源代碼。
Html 部分：
1 <!--愛心--> 2 <div class="heart" id="heart"></div> 3 <!--左邊的箭頭--> 4 <span class="arrow arrow-down"></span> 5 <!--右邊的箭頭--> 6 <span class="arrow arrow-down" style="margin-left:152px;"></span> 7 <!--水滴效果--> 8 <div class=""> 9 <span class="water" style="margin-left:10px;"></span> 10 <span class="water" style="margin-left:200px;"></span> 11 <span class="water" style="margin-left:50px;"></span> 12 <!--原文出自 博客園 請叫我頭頭哥： www.cnblogs.com/toutou--> 13 <span class="water" style="margin-left:120px;"></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>
css部分：ps:css3里面一些核心的屬性我都加了注釋，如果大家有不明白的可以留言。另外，代碼中加入了很多這種內容（類似“原文出自......”），相信大家都懂的，這是為了防止惡意爬行剽竊的行為！ 支持正版 :)
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>
作 者：請叫我頭頭哥
出 處：http://www.cnblogs.com/toutou/
關於作者：專注於基礎平台的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角“推薦”一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！