当前位置:
首页 > temp > JavaScript教程 >
-
html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]
大风起兮云飞扬，安得猛士兮走四方!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>
另外提供源码下载
https://files.cnblogs.com/files/toutou/xintiao.zip
作 者：请叫我头头哥
出 处：http://www.cnblogs.com/toutou/
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀（爬取学校通知公告）
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求：requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量？
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析：SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL，这些神奇的特性你知道吗？
openGauss内核分析：执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
SQL Server -- 解决存储过程传入参数作为s
关于JS定时器的整理
JS中使用Promise.all控制所有的异步请求都完
js中字符串的方法
import-local执行流程与node模块路径解析流程
检测数据类型的四种方法
js中数组的方法,32种方法
前端操作方法
数据类型
window.localStorage.setItem 和 localStorage.setIte
如何完美解决前端数字计算精度丢失与数
