html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]

html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]

 2015/4/29 17:55:14  请叫我头头哥  程序员俱乐部  我要评论(0)
  • 摘要:大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行。做web开发已经有好几年了,见证了太多语言的崛起和陨落。其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语言(这首当其冲的就是.net程序员,当然很不幸,我就是.net成员,这刚把mvc4.0整明白现在5.0又出来了。)当然,抱怨解决不了任何问题,抱怨也无法让你的钱包鼓起来。so,程序猿们,继续学习吧。html5+css3时代,简称3+5时代(3+5是我自己瞎编的,没有任何依据--)显然已经铺天盖地而来
  • 标签:原创 实现 HTML5

  大风起兮云飞扬,安得猛士兮走四方!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 转载请注入出处

 

  if您看了这篇博客。对您有所帮助,请不要吝啬您的“推荐”,您的推荐将是我最大的动力。有问题的话可以评论交流。

发表评论
用户名: 匿名