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 部分:
<!--爱心-->
<div class="heart" id="heart"></div>
<!--左边的箭头-->
<span class="arrow arrow-down"></span>
<!--右边的箭头-->
<span class="arrow arrow-down" style="margin-left:152px;"></span>
<!--水滴效果-->
<div class="">
<span class="water" style="margin-left:10px;"></span>
<span class="water" style="margin-left:200px;"></span>
<span class="water" style="margin-left:50px;"></span>
<!--原文出自 博客园 请叫我头头哥: www.cnblogs.com/toutou-->
<span class="water" style="margin-left:120px;"></span>
<span class="water" style="margin-left:30px;"></span>
<span class="water" style="margin-left:170px;"></span>
<span class="water" style="margin-left:200px;"></span>
</div>
css部分:ps:css3里面一些核心的属性我都加了注释,如果大家有不明白的可以留言。另外,代码中加入了很多这种内容(类似“原文出自......”),相信大家都懂的,这是为了防止恶意爬行剽窃的行为! 支持正版 :)
<style>
/*爱心*/
#heart {
position: relative;
width: 100px;
height: 90px;
margin-left: 200px;
transform: rotate3d(0.7, 0.5, 0.7, 45deg);
-ms-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* IE 9 */
-moz-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Firefox */
-webkit-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Safari and Chrome */
-o-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Opera */
/*这里需要插入一段小广告了,不得不说html5+css3实现了各个浏览器更好的兼容模式,这给开发者减少了很多痛苦*/
-webkit-transition-duration: 250ms;
-webkit-transition-function: ease-out;
-ms-transition-duration: 250ms;
-ms-transition-function: ease-out;
-moz-transition-duration: 250ms;
-moz-transition-function: ease-out;
-o-transition-duration: 250ms;
-o-transition-function: ease-out;
-webkit-user-select: none;
/***** 原文出自 博客园 请叫我头头哥: www.cnblogs.com/toutou ******/
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
opacity: 1;
animation: myHeart 5s;
-moz-animation: myHeart 5s; /* Firefox */
-webkit-animation: myHeart 5s; /* Safari 和 Chrome */
-o-animation: myHeart 5s; /* Opera */
-webkit-animation-name: myHeart;
-ms-animation-name: myHeart;
animation-name: myHeart;
-webkit-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
/*nimation-iteration-count: 属性定义动画的播放次数 infinite为无限次播放*/
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
/*animation-dela: 属性定义动画何时开始*/
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
} #heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
/*园友们可以注意: 这里是实现颜色渐变效果的地方*/
background: radial-gradient(#f5ebeb,#f77979,red);
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
/***** 原文出自 博客园 请叫我头头哥: www.cnblogs.com/toutou ******/
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
} #heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
/***** 原文出自 博客园 请叫我头头哥: www.cnblogs.com/toutou ******/
transform: rotate(45deg);
/*transform-origin:属性允许您改变被转换元素的位置*/
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
} #heart:hover {
-webkit-transform: scale(1.2);
opacity: 0.9;
} /*这里是每执行到一个百分比时,所执行的效果,其实在这里可以做很多事情*/
@keyframes myHeart {
0% {
transform: scale(0.05);
width: 10px;
height: 10px;
opacity: 0.05;
margin-left: 20px;
} 10% {
transform: scale(0.1);
width: 50px;
height: 50px;
opacity: 0.1;
} 20% {
transform: scale(0.2);
opacity: 0.2;
} 30% {
transform: scale(0.3);
opacity: 0.3;
} 40% {
transform: scale(0.4);
opacity: 0.4;
} 50% {
transform: scale(0.5);
opacity: 0.5;
} 60% {
transform: scale(0.6);
opacity: 0.6;
} 70% {
transform: scale(0.7);
opacity: 0.7;
} 80% {
transform: scale(0.8);
opacity: 0.8;
} 90% {
transform: scale(0.9);
opacity: 0.9;
} 100% {
transform: scale(1.0);
opacity: 1.0;
}
} @-moz-keyframes myHeart /* Firefox */
{
0% {
-moz-transform: scale(0.05);
width: 10px;
height: 10px;
/***** 原文出自 博客园 请叫我头头哥: www.cnblogs.com/toutou ******/
opacity: 0.05;
margin-left: 20px;
} 10% {
-moz-transform: scale(0.1);
width: 50px;
height: 50px;
opacity: 0.1;
} 20% {
-moz-transform: scale(0.2);
opacity: 0.2;
} 30% {
-moz-transform: scale(0.3);
opacity: 0.3;
} 40% {
-moz-transform: scale(0.4);
opacity: 0.4;
} 50% {
-moz-transform: scale(0.5);
opacity: 0.5;
} 60% {
-moz-transform: scale(0.6);
opacity: 0.6;
} 70% {
-moz-transform: scale(0.7);
opacity: 0.7;
} 80% {
-moz-transform: scale(0.8);
opacity: 0.8;
} 90% {
-moz-transform: scale(0.9);
opacity: 0.9;
} 100% {
-moz-transform: scale(1.0);
opacity: 1.0;
}
} @-webkit-keyframes myHeart /* Safari 和 Chrome */
{
0% {
-webkit-transform: scale(0.05);
width: 10px;
height: 10px;
opacity: 0.05;
margin-left: 20px;
} 10% {
-webkit-transform: scale(0.1);
width: 50px;
height: 50px;
opacity: 0.1;
} 20% {
-webkit-transform: scale(0.2);
opacity: 0.2;
} 30% {
-webkit-transform: scale(0.3);
opacity: 0.3;
} 40% {
-webkit-transform: scale(0.4);
opacity: 0.4;
} 50% {
-webkit-transform: scale(0.5);
opacity: 0.5;
} 60% {
-webkit-transform: scale(0.6);
opacity: 0.6;
} 70% {
-webkit-transform: scale(0.7);
opacity: 0.7;
} 80% {
-webkit-transform: scale(0.8);
opacity: 0.8;
} 90% {
-webkit-transform: scale(0.9);
opacity: 0.9;
} 100% {
-webkit-transform: scale(1.0);
opacity: 1.0;
}
} @-o-keyframes myHeart /* Opera */
{
0% {
-o-transform: scale(0.05);
width: 10px;
height: 10px;
opacity: 0.05;
margin-left: 20px;
} 10% {
-o-transform: scale(0.1);
width: 50px;
height: 50px;
opacity: 0.1;
} 20% {
-o-transform: scale(0.2);
opacity: 0.2;
} 30% {
-o-transform: scale(0.3);
opacity: 0.3;
} 40% {
-o-transform: scale(0.4);
opacity: 0.4;
} 50% {
-o-transform: scale(0.5);
opacity: 0.5;
} 60% {
-o-transform: scale(0.6);
opacity: 0.6;
} 70% {
-o-transform: scale(0.7);
opacity: 0.7;
} 80% {
-o-transform: scale(0.8);
opacity: 0.8;
} 90% {
-o-transform: scale(0.9);
opacity: 0.9;
} 100% {
-o-transform: scale(1.0);
opacity: 1.0;
}
} .arrow {
width: 40px;
height: 40px;
position: relative;
display: inline-block;
margin: 10px 10px;
} .arrow:before, .arrow:after {
content: '';
border-color: transparent;
border-style: solid;
position: absolute;
} .arrow-down:before {
border: none;
background-color: red;
height: 50%;
width: 30%;
top: 0;
left: 35%;
} .arrow-down:after {
left: 0;
top: 50%;
border-width: 20px 20px;
border-top-color: red;
} .water {
height: 40px;
width: 40px;
display: block;
position: relative;
} .water:before {
content: ' ';
height: 26px;
width: 26px;
position: absolute;
top: 2px;
left: 0px;
z-index: 1;
line-height: 26px;
background: radial-gradient(#dbf5f5,#77f5f5,#21f1f1);
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
color: #0defef;
text-align: center;
} .water:after {
content: '';
height: 0px;
width: 0px;
position: absolute;
bottom: 2px;
left: 3px;
border: 10px transparent solid;
border-top-color: #0defef;
border-width: 15px 10px 0px 10px;
}
</style>
作 者:请叫我头头哥
出 处:http://www.cnblogs.com/toutou/
关于作者:专注于基础平台的项目开发。如有问题或建议,请多多赐教!
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者直接私信我
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角“推荐”一下。您的鼓励是作者坚持原创和持续写作的最大动力!
html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]的更多相关文章
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- HTML5+CSS3制作无限滚动与文字跳动效果
㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...
- HTML5 CSS3专题 纯CSS打造相冊效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...
- HTML5/CSS3鼠标滑过图片滤镜动画效果
在线演示 本地下载
- 分享10款激发灵感的最新HTML5/CSS3应用
1.HTML5/CSS3实现iOS Path菜单 菜单动画很酷 Path菜单相信大家都不陌生吧,它在iOS中非常流行,今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path ...
- 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...
- 8款给力HTML5/CSS3应用插件 可爱的HTML5笑脸
1.HTML5/CSS3实现笑脸动画 非常可爱 今天我们要分享一款基于纯CSS3实现的笑脸动画,我们只要在面部滑动鼠标,即可让人物的眼睛嘴巴动起来,实现微笑的效果,还挺可爱的. 在线演示 源码下载 2 ...
- HTML5&CSS3经典动态表格
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 12款非常精致的免费 HTML5 & CSS3 网站模板
01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示 下载 02. Folder ...
随机推荐
- 删除Android包
Android删除包有很多种方法,其中一种通过Intent删除,代码如下: public boolean unload (String n){ boolean res = true; try{ // ...
- POJ 1811 大素数判断
数据范围很大,用米勒罗宾测试和Pollard_Rho法可以分解大数. 模板在代码中 O.O #include <iostream> #include <cstdio> #inc ...
- CentOS6.5安装telnet命令
安装好memcache之后想进入连接测试,telnet localhost 11211发现竟然提示没有telnet这个命令,于是需要自己进行安装. 一.查看本机是否安装telnet #rpm -qa ...
- JAVA中的GC机制详解
优秀Java程序员必须了解的GC工作原理 一个优秀的Java程序员必须了解GC的工作原理.如何优化GC的性能.如何与GC进行有限的交互,因为有一些应用程序对性能要求较高,例如嵌入式系统.实时系统等,只 ...
- css知多少(2)——学习css的思路
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
- Spirit - 腾讯移动 Web 整体解决方案
Spirit 并不是一个具体的框架或者工具,但是她是移动端一系列解决方案的整合与聚拢.她是腾讯 Alloyteam 开发团队在移动开发项目中通过大量实践.归纳.总结提炼而成,最终沉淀下来的一个体系,真 ...
- [deviceone开发]-动画示例源码
一.简介 do_FrameAnimtionView组件是用加载GIF动态图片和加载一系列图片形成动画效果的展示组件,这个示例直观的展示组件基本的使用方式.适合初学者. 二.效果图 三.相关讨论 htt ...
- JavaScript数组与对象的关系
JavaScript的数组,相比其他语言,是比较特殊的.数组是Object类型,只不过,有几个比较特殊的地方: 有索引下标 有默认的length属性 是有序的(注意,对象是无序的) 可以使用一些特殊的 ...
- javascript --- 原型初探七日谈(一)
在javascript中,像原型,闭包这样的概念,只要我们能领悟其中的原理,一切都会显得格外清晰与明了. 原型属性(prototype): 下面我们简单定义一个函数 function her(a, b ...
- SharePoint 2013必备组件离线包安装:AppFabric无法安装问题解决
由于没有网络,无法使用sharepoint2013的安装必备软件的在线下载向导安装,当要安装 SharePoint 2013 的服务器与 Internet 隔离时,通常需要从脱机位置安装必备组件.即使 ...