整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
多特效代碼請?zhí)砑親TML5前端交流群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;}
網(wǎng)站代碼
<!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 target="_blank">素材</a></p>
</div>
</body>
</html>
TML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網(wǎng)頁
HTML5 是最新的 HTML 標準。
HTML5 是專門為承載豐富的 web 內(nèi)容而設(shè)計的，并且無需額外插件。
HTML5 擁有新的語義、圖形以及多媒體元素。
HTML5 提供的新元素和新的 API 簡化了 web 應(yīng)用程序的搭建。
HTML5 是跨平臺的，被設(shè)計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行。
CSS 是一種描述 HTML 文檔樣式的語言。
CSS 描述應(yīng)該如何顯示 HTML 元素。
CSS 用于控制網(wǎng)頁的樣式和布局。
CSS3 是最新的 CSS 標準。
CSS3 被拆分為"模塊"。主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現(xiàn)透明效果、漸變效果、使用@Font-Face實現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄布局、媒體查詢等。
要實現(xiàn)如下效果：
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>
鄉(xiāng)<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 | 設(shè)置如何處理元素中的空格。所有瀏覽器都支持。取值包括： |
要實現(xiàn)的效果：
CSS3：
p {
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
}要實現(xiàn)的效果：
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;
}要實現(xiàn)的效果：
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;
}要實現(xiàn)的效果：
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;
}要實現(xiàn)的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}要實現(xiàn)的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}要實現(xiàn)的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}要實現(xiàn)的效果：
CSS3：
#demo {
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}要實現(xiàn)的效果：
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: ""; /*不顯示任何內(nèi)容*/
width: 0; /*定義箭頭內(nèi)容區(qū)大小*/
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">左側(cè)消息提示框<br>class="bubble bubble-left"</div>要實現(xiàn)的效果：
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;
}需要實現(xiàn)的效果：
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%;
}設(shè)計圖片翹邊陰影效果：
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); /*變形并旋轉(zhuǎn)陰影，讓其翹起*/
-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 { /*在左側(cè)添加翹邊陰影*/
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頁面動畫 很逗的機器人
很久以前我在網(wǎng)上看到一篇帖子，是專門分享創(chuàng)意404頁面的，很可惜我已經(jīng)找不到了。但是今天我找到一款利用HTML5實現(xiàn)的404機器人動畫，當(dāng)你進入該404頁面時，就會出現(xiàn)一個機器人在跳舞，非?？蓯?。這個機器人跳舞的動作是利用HTML5和CSS3的動畫屬性實現(xiàn)的。
2、HTML5/CSS3鼠標滑過抖動圖標 非?？蓯?/strong>
這是一款簡單的利用CSS3實現(xiàn)的圖標抖動特效，首先我們精選了幾款常用而且漂亮的圖標，并在圖標下方寫有描述性的文字。當(dāng)我們把鼠標滑過圖標時，圖標即會不停的抖動，像是在告訴用戶“點我吧”，這個功能很多地方應(yīng)該能用到。
3、HTML5/jQuery 3D焦點圖插件 多種超酷切換動畫
之前我們分享過一些很酷的焦點圖插件了，有些是基于jQuery的焦點圖應(yīng)用，今天我們要分享一款基于HTML5和jQuery的3D焦點圖插件，該HTML5焦點圖有多種超酷的切換動畫，包括3D百葉窗、3D翻轉(zhuǎn)等特效，有些切換效果在高版本Chrome中有效果。
4、CSS3各大網(wǎng)站分享按鈕 帶網(wǎng)站Logo小圖標
對于CSS3分享按鈕，我們在之前的文章中已經(jīng)分享幾款了，像純CSS3社會化分享按鈕 可固定網(wǎng)頁頂部、CSS3發(fā)光社會分享按鈕等。今天我又收集了一款非常強大的CSS3各大網(wǎng)站分享按鈕，非常多的按鈕，基本上一些國外的社交網(wǎng)站都有。另外，這款CSS3分享按鈕還帶有社交網(wǎng)站的Logo小圖標，外觀非常漂亮。
5、CSS3滑塊菜單 菜單動畫很酷
我們之前分享過不少很酷且非常實用的CSS3菜單，今天我們再來分享一款CSS3滑塊菜單，這款菜單初始化時是幾個很漂亮的小圖標，當(dāng)鼠標滑過菜單項時，小圖標即展開成具體菜單內(nèi)容，這些內(nèi)容可以自己定義，效果非常不錯。
6、HTML5畫圖特效 超酷的筆刷動畫
之前我們分享過一款HTML5畫圖工具HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布，我們基本對HTML5的畫圖功能有一定的了解。今天我們要分享一款超酷的HTML5筆刷動畫，我們可以選擇不同的筆刷形狀，筆刷在畫布上移動時就會播放非常絢麗的動畫效果。
7、HTML5/CSS3實現(xiàn)蝙蝠俠人物動畫 蜘蛛俠變身
利用CSS3實現(xiàn)人物動畫效果非常多，我們在html5tricks上也分享了不少，像HTML5/CSS3實現(xiàn)笑臉動畫、純CSS3繪制可愛小男孩動畫等。今天我們再分享一款利用純CSS3實現(xiàn)的蝙蝠俠動畫，頁面加載后就會啟動蝙蝠俠的繪制，就像組裝汽車一樣。
8、HTML5 SVG環(huán)形圖表應(yīng)用 很酷的數(shù)據(jù)初始動畫
之前我們也分享過幾個HTML5餅狀圖表應(yīng)用，像HTML5 Canvas餅狀圖表，可以很清晰的展示各個數(shù)據(jù)的所占比例。今天要分享的這款HTML5圖表是一個環(huán)形的，和餅狀圖表類似，主要特點也是能清晰的了解每項數(shù)據(jù)所占的比例。這款HTML5環(huán)形圖表是利用SVG實現(xiàn)的，圖表數(shù)據(jù)在初始化的時候?qū)⒊霈F(xiàn)非?？岬膭赢嬓Ч?。
9、HTML5迷你音樂播放器 3D翻轉(zhuǎn)播放按鈕
上一篇我們分享了一款外觀很酷的HTML5音樂播放器，這次分享的播放器比較小巧迷你，雖然外觀沒有上一個播放器那么精致，但是功能卻是很齊全的。該HTML5音樂播放器的特點是有一個3D的翻轉(zhuǎn)播放按鈕。當(dāng)然對于HTML5播放器的外觀，大家可以自己設(shè)計定義。
以上就是9款超炫HTML5最新動畫源碼，你喜歡么？
出處：極客頭條
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
