大风起兮云飞扬，安得猛士兮走四方!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/

关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角“推荐”一下。您的鼓励是作者坚持原创和持续写作的最大动力！

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

  1. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  2. HTML5+CSS3制作无限滚动与文字跳动效果

    ㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...

  3. HTML5 CSS3专题 纯CSS打造相冊效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...

  4. HTML5/CSS3鼠标滑过图片滤镜动画效果

    在线演示 本地下载

  5. 分享10款激发灵感的最新HTML5/CSS3应用

    1.HTML5/CSS3实现iOS Path菜单 菜单动画很酷 Path菜单相信大家都不陌生吧,它在iOS中非常流行,今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path ...

  6. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  7. 8款给力HTML5/CSS3应用插件 可爱的HTML5笑脸

    1.HTML5/CSS3实现笑脸动画 非常可爱 今天我们要分享一款基于纯CSS3实现的笑脸动画,我们只要在面部滑动鼠标,即可让人物的眼睛嘴巴动起来,实现微笑的效果,还挺可爱的. 在线演示 源码下载 2 ...

  8. HTML5&CSS3经典动态表格

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 12款非常精致的免费 HTML5 & CSS3 网站模板

    01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示  下载 02. Folder ...

随机推荐

  1. 【Java每日一题】20161110

    package Nov2016; import java.util.HashSet; public class Ques1110 { public static void main(String[] ...

  2. request的各种方法大全

    request.setAttribute("result", district);//放进作用域,可以用el表达式在页面展示.(名字,调用方法的结果) pageContext.re ...

  3. PopupWindow的使用

    如图是效果图     2种常用PopupWindow的使用 下载地址:http://download.csdn.net/detail/qq_29774291/9683258 第一个展示一个下拉的Lis ...

  4. springmvc 配置多视图，返回jsp,velocity,freeMarker,tiles(模板)等等

    springmvc-servlet.xml配置 <!-- Velocity --> <bean id="velocityViewResolver" class = ...

  5. C#中委托实现的异步编程

    所谓同步:如果在代码中调用了一个方法,则必须等待该方法所有的代码执行完毕之后,才能回到原来的地方执行下一行代码. 异步:如果不等待调用的方法执行完,就执行下一行代码. 1.0 同步例子: class ...

  6. Hashslider – 带有 Hash 标签功能的 jQuery 内容滑块

    Hashslider 实现了常见的 jQuery 滑块的功能,特别之处在于给 URL 加上了标签,因此你能够连接到滑块的某块内容.滑块的内容也可以从外部的 HTML 文件获取. 您可能感兴趣的相关文章 ...

  7. HTML5 表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...

  8. jQuery原型方法.pushStack源码分析

    这次分析的方法跟前面不同,虽然pushStack也是原型方法之一,但是我们几乎从不用在页面调用,在参考手册里面也没有这个方法的使用说明,但是这个方法还是非常重要的,在使用很多jQuery的其他方式都会 ...

  9. 利用ARCHPR明文破解获取PDF

    我们经常下载一些rar或zip压缩文件,解压时有时发现要密码,而密码多是为了推广而设置的网址等,如果不知道密码,可 以去来源网站上寻找或在压缩文件的注释中查看. 而并非所有都是如此,例如,网上有些人, ...

  10. 【Leafletjs】4.L.Map 中文API

    L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. 使用 example // initialize the map on the "map" div with ...