多特效代码请添加HTML5前端交流群581549454
废话不多说上代码!
normalize.css
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"1C" "1D" "18" "19";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
zzsc.css
body, html { font-size: 100%; padding: 0; margin: 0;}
/* Reset */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body{
background: #494A5F;
color: #D5D6E2;
font-weight: 500;
font-size: 1.05em;
font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
a:hover,a:focus{color:#74777b;text-decoration: none;}
网站代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas逼真水波纹动画特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.waterrippleeffect.min.js"></script>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
/*background: transparent;*/
box-sizing: border-box;
}
body {
overflow: hidden;
}
.container{
width: 480px;
height: 480px;
margin:20px auto;
position: relative;
}
.clear {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
}
</style>
<script>
$( document ).ready( function() {
//------------------------------------------------------------------------
$( '#preloaderDiv' ).delay( 1000 ).fadeTo( 1000 , 0, function() {
$( this ).css( 'display', 'none' );
} );
$( '#startDiv' ).css( 'cursor', 'pointer' ).click( function() {
//$( this ).css( 'display', 'none' );
$( this ).delay( 10 ).fadeTo( 1000 , 0, function() {
$( this ).css( 'display', 'none' );
} );
init();
} );
//------------------------------------------------------------------------
function init() {
//Settings - params for WaterRippleEffect
var settings = {
image: './img/SwimmingPool.jpg',//image path
rippleRadius: 3,//radius of the ripple
width: 480,//width
height: 480,//height
delay: 1,//if auto param === true. 1 === 1 second delay for animation
auto: true//if auto param === true, animation starts on it´s own
};
//------------------------------------------------------------------------
//standalone
//init
var waterRippleEffect = new WaterRippleEffect( document.getElementById( 'holder' ), settings );
document.getElementById( 'holder' ).style.cursor = 'pointer';
//on click
document.getElementById( 'holder' ).addEventListener( 'click', function( e ) {
var mouseX = e.layerX;
var mouseY = e.layerY;
waterRippleEffect.disturb( mouseX, mouseY );
} );
//on mousemove
document.getElementById( 'holder' ).addEventListener( 'mousemove', function( e ) {
var mouseX = e.layerX;
var mouseY = e.layerY;
waterRippleEffect.disturb( mouseX, mouseY );
} );
//------------------------------------------------------------------------
//jQuery
//init
/*
$( '#holder' ).waterRippleEffect( settings );
$( '#holder' ).css( 'cursor', 'pointer' );
*/
//on click
/*
$( '#holder' ).click( function( e ) {
var mouseX = e.pageX - $( this ).offset().left;
var mouseY = e.pageY - $( this ).offset().top;
$( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );
} );
*/
//on mousemove
/*
$( '#holder' ).mousemove( function( e ) {
var mouseX = e.pageX - $( this ).offset().left;
var mouseY = e.pageY - $( this ).offset().top;
$( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );
} );
*/
};
//------------------------------------------------------------------------
} );
</script>
</head>
<body><script src="/demos/googlegg.js"></script>
<div>
<div id='holder' style='width:480px; height:480px; position:absolute;'></div>
<div id='startDiv' style='background-color:#000; position:absolute; width:480px; height:480px;'>
<img src='img/startBt.jpg' width='480px' height='480px' alt='Start' style='position:absolute; top:50%; left:50%; margin-top:-240px; margin-left:-240px;'>
</div>
<div id='preloaderDiv' style='background-color:#000; position:absolute; width:480px; height:480px; pointer-events:none'>
<img src='img/PreloaderDark.gif' width='44px' height='48px' alt='Preloader' style='position:absolute; top:50%; left:50%; margin-top:-22px; margin-left:-24px;'>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://www.aaa-cg.com.cn/xue/?lcc" target="_blank">素材</a></p>
</div>
</body>
</html>
TML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。
CSS 是一种描述 HTML 文档样式的语言。
CSS 描述应该如何显示 HTML 元素。
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
CSS3 被拆分为"模块"。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS3的新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。
要实现如下效果:
HTML5:
<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>,
<ruby>
乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。
使用说明 | |
line-break | 用于指定如何(或是否)断行。除了Firefox,其它浏览器都支持。取值包括: |
word-wrap | 允许长单词或URL地址换行到下一行。所有浏览器都支持。取值包括: |
word-break | 定义文本自动换行。Chrome和Safari浏览器支持不够友好。取值包括: |
white-space | 设置如何处理元素中的空格。所有浏览器都支持。取值包括: |
要实现的效果:
CSS3:
p {
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
}
要实现的效果:
CSS3:
p {
text-align: center;
font:bold 60px helvetica, arial, sans-serif;
color: red;
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
要实现的效果:
CSS3:
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background: #CCC;
text-shadow: -1px -1px white,
1px 1px #333;
}
要实现的效果:
CSS3:
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background: #CCC;
text-shadow: 1px 1px white,
-1px -1px #333;
}
要实现的效果:
CSS3:
#demo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
要实现的效果:
CSS3:
#demo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
要实现的效果:
CSS3:
#demo {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
要实现的效果:
CSS3:
#demo {
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
要实现的效果:
CSS3和HTML5:
<style type="text/css">
.bubble {
width: 200px; /*定义框大小,可忽略,让消息框自由收缩*/
height: 50px;
background:hsla(93,96%,62%,1); /*定义背景色,必须与下面箭头背景色一致*/
padding: 12px; /*增加补白,防止消息文本跑到框外*/
position: relative; /*定义定位包含框,方便定位箭头*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /*圆角*/
}
.bubble:before {
content: ""; /*不显示任何内容*/
width: 0; /*定义箭头内容区大小*/
height: 0;
position: absolute; /*绝对定位*/
z-index:-1; /*显示在消息框下面*/
}
.bubble.bubble-left:before {
right: 90%;
top: 50%;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
transform: rotate(-25deg); /*定位箭头倾斜角度*/
/*定义箭头长短、粗细*/
border-top: 20px solid transparent;
border-right: 80px solid hsla(93,96%,62%,1);
border-bottom: 20px solid transparent;
}
div {
margin:50px;
}
<div class="bubble bubble-left">左侧消息提示框<br>class="bubble bubble-left"</div>
要实现的效果:
CSS3:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
background-size: 100% 30px;
position: relative;
}
body:before {
content: "";
display: inline-block;
height: 100%;
width: 4px;
border-left: 4px double #FCA1A1;
position: absolute;
left: 30px;
}
需要实现的效果:
CSS3:
.box {
background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
color: #fff;
padding: 12px 24px;
}
<script>
function setTab(cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById("tab_"+i);
var con=document.getElementById("con_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
<div id="tab">
<div class="Menubox">
<ul>
<li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
<li id="tab_2" onclick="setTab(2,4)">搞笑</li>
<li id="tab_3" onclick="setTab(3,4)">美女</li>
<li id="tab_4" onclick="setTab(4,4)">摄影</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_1" class="hover" ><img src="images/1.png" /></div>
<div id="con_2" class="hide"><img src="images/2.png" /></div>
<div id="con_3" class="hide"><img src="images/3.png" /></div>
<div id="con_4" class="hide"><img src="images/4.png" /></div>
</div>
</div>
</body>
CSS3:
tbody tr:nth-child(2n) {
background-color: #f5fafe;
}
圆角表格的CSS3:
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
单线表格的CSS3:
table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
width: 100%;
}
设计图片翘边阴影效果:
CSS3:
.box {
width: 980px;
clear: both;
overflow: hidden;
height: auto;
margin: 20px auto;
}
.box li {
background: #fff;
float: left;
position: relative;
margin: 20px 10px;
border: 2px solid #efefef;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
width: 290px;
height: 200px;
margin: 5px;
}
.box li:before {
content: "";
position: absolute;
width: 90%;
height: 80%;
bottom: 13px;
left: 21px;
background: transparent; /*透明背景*/
z-index: -2; /*显示在照片的下面*/
box-shadow: 0 8px 20px rgba(0,0,0,0.8); /*添加阴影*/
-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
-o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
transform: skew(-12deg) rotate(-6deg); /*变形并旋转阴影,让其翘起*/
-webkit-transform: skew(-12deg) rotate(-6deg);
-moz-transform: skew(-12deg) rotate(-6deg);
-os-transform: skew(-12deg) rotate(-6deg);
-o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左侧添加翘边阴影*/
content: "";
position: absolute;
width: 90%;
height: 80%;
bottom: 13px;
right: 21px;
z-index: -2;
background: transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.8);
transform: skew(12deg) rotate(6deg);
-webkit-transform: skew(12deg) rotate(6deg);
-moz-transform: skew(12deg) rotate(6deg);
-os-transform: skew(12deg) rotate(6deg);
-o-transform: skew(12deg) rotate(6deg);
}
<ul class="box">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
</ul>
ref
《HTML5+CSS3+JavaScript从入门到精通(实例版)》
-End-
们分享过很多漂亮的HTML5动画,包括CSS3菜单、HTML5 Canvas动画等。今天我们精选了9款非常不错的超炫HTML5最新动画,一起来看看。
1、HTML5可爱的404页面动画 很逗的机器人
很久以前我在网上看到一篇帖子,是专门分享创意404页面的,很可惜我已经找不到了。但是今天我找到一款利用HTML5实现的404机器人动画,当你进入该404页面时,就会出现一个机器人在跳舞,非常可爱。这个机器人跳舞的动作是利用HTML5和CSS3的动画属性实现的。
2、HTML5/CSS3鼠标滑过抖动图标 非常可爱
这是一款简单的利用CSS3实现的图标抖动特效,首先我们精选了几款常用而且漂亮的图标,并在图标下方写有描述性的文字。当我们把鼠标滑过图标时,图标即会不停的抖动,像是在告诉用户“点我吧”,这个功能很多地方应该能用到。
3、HTML5/jQuery 3D焦点图插件 多种超酷切换动画
之前我们分享过一些很酷的焦点图插件了,有些是基于jQuery的焦点图应用,今天我们要分享一款基于HTML5和jQuery的3D焦点图插件,该HTML5焦点图有多种超酷的切换动画,包括3D百叶窗、3D翻转等特效,有些切换效果在高版本Chrome中有效果。
4、CSS3各大网站分享按钮 带网站Logo小图标
对于CSS3分享按钮,我们在之前的文章中已经分享几款了,像纯CSS3社会化分享按钮 可固定网页顶部、CSS3发光社会分享按钮等。今天我又收集了一款非常强大的CSS3各大网站分享按钮,非常多的按钮,基本上一些国外的社交网站都有。另外,这款CSS3分享按钮还带有社交网站的Logo小图标,外观非常漂亮。
5、CSS3滑块菜单 菜单动画很酷
我们之前分享过不少很酷且非常实用的CSS3菜单,今天我们再来分享一款CSS3滑块菜单,这款菜单初始化时是几个很漂亮的小图标,当鼠标滑过菜单项时,小图标即展开成具体菜单内容,这些内容可以自己定义,效果非常不错。
6、HTML5画图特效 超酷的笔刷动画
之前我们分享过一款HTML5画图工具HTML5 Canvas画板画图工具 可定义笔刷和画布,我们基本对HTML5的画图功能有一定的了解。今天我们要分享一款超酷的HTML5笔刷动画,我们可以选择不同的笔刷形状,笔刷在画布上移动时就会播放非常绚丽的动画效果。
7、HTML5/CSS3实现蝙蝠侠人物动画 蜘蛛侠变身
利用CSS3实现人物动画效果非常多,我们在html5tricks上也分享了不少,像HTML5/CSS3实现笑脸动画、纯CSS3绘制可爱小男孩动画等。今天我们再分享一款利用纯CSS3实现的蝙蝠侠动画,页面加载后就会启动蝙蝠侠的绘制,就像组装汽车一样。
8、HTML5 SVG环形图表应用 很酷的数据初始动画
之前我们也分享过几个HTML5饼状图表应用,像HTML5 Canvas饼状图表,可以很清晰的展示各个数据的所占比例。今天要分享的这款HTML5图表是一个环形的,和饼状图表类似,主要特点也是能清晰的了解每项数据所占的比例。这款HTML5环形图表是利用SVG实现的,图表数据在初始化的时候将出现非常酷的动画效果。
9、HTML5迷你音乐播放器 3D翻转播放按钮
上一篇我们分享了一款外观很酷的HTML5音乐播放器,这次分享的播放器比较小巧迷你,虽然外观没有上一个播放器那么精致,但是功能却是很齐全的。该HTML5音乐播放器的特点是有一个3D的翻转播放按钮。当然对于HTML5播放器的外观,大家可以自己设计定义。
以上就是9款超炫HTML5最新动画源码,你喜欢么?
出处:极客头条
*请认真填写需求信息,我们会在24小时内与您取得联系。