canvas繪制愛心
效果預覽
上代碼
<!doctype html>
<html>
<head>
<title>HTML5 Canvas愛心飄動動畫特效</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="c"></canvas>
<script>
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
</script>
<script>
eval('var M=Math,n=M.pow,i,E=2,F="rgba(233,61,109,",d=M.cos,z=M.sin,L=1,u=30,W=window,w=c.width=W.innerWidth,h=c.height=W.innerHeight,r=_1){return M.random()*2-1},y="px Arial",q="♥",X=w/2,Y=h/2,T=4,p=_1){var e=this;e.g=_1){e.x=X;e.y=Y;e.k=0;e.l=0;e.t=M.random()*19000;e.c=e.t};e.d=_1){a.fillStyle=F+(e.c/e.t)+")";a.fillText(q,e.x,e.y);e.c-=50;e.x+=e.k;e.y+=e.l;e.k=e.k+r();e.l=e.l+r();if(e.c<0||e.x>w||e.x<0||e.y>h||e.y<0){e.g()}};e.g()},A,B;a.textAlign="center";a.strokeStyle="#000";a.lineWidth=2;for(i=0;i<350;i++){M[i]=new p()}setInterval(_1){a.clearRect(0,0,w,h);a.font=u+y;X=(w/6*n(z(T),3)+w/2);Y=0.8*(-h/40*(13*d(T)-5*d(2*T)-2*d(3*T)-d(4*T))+h/2.3);T+=(z(T)+3)/99;for(i=0;i<350;i++){with(M[i]){A=(x/w-0.5)*2,B=-(y/h-0.5);if(L&&(A*A+2*n((B-0.5*n(M.abs(A),0.5)),2))>0.11){k=l=0}d()}}a.font=120+y;if(E>0.1){if(E<1){a.fillStyle=F+E+")";}E-=0.02}a.fillStyle="#E93D6D";a.fillText(v,X,Y+u);a.strokeText(v,X,Y+u)},50);b.bgColor="#FFEFF2";c.οnmοuseup=_1){L=(L)?0:1}'
.replace(/(_1)/g, 'function('))
</script>
</body>
</html>
表格標簽
- 表格標簽學習
table：聲明一個表格- 屬性：
- border:給表格加邊框
- width設置表格的寬度
- height設置表格高度
- cellpadding設置內容距邊框的距離
- cellspacing設置邊框的大小
- 元素
- th：聲明一個單元格默認加黑
- tr:聲明一行
- td：聲明一個單元格
- 屬性：
- width設置表格的寬度
- height設置表格高度
- cowspan行合並
- rowspan列合並
- 特點：默認根據數據的大小顯示
- 屬性：
標簽
- href：網頁路徑（本地資源或者網頁資源）
- target:網頁顯示位置
- _self在當前頁顯示
- _blank在新的標簽顯示
- _top在頂層顯示
- _parent在父級頁面顯示（類似於上一級）
css的盒子模型
div標簽：塊級標簽，主要是用來進行網頁布局的，會將其中的子元素內容作為一個獨立的整體存在
特點：
默認寬度是頁面的寬度，但是可以設置
高度默認是沒有的,但是可以設置（可以頂開）
如果子元素設置了百分比的高或者寬，占據的是div的百分比，不是頁面的。
盒子模型：
外邊距：margin
作用：設置元素與元素之間的間隔
居中設置：margin：0px auto；上下間距10px;左右居中
可以根據需求單獨的設置上下左右的邊距
邊框：border
作用：用來設置元素的邊框大小
可以單獨設置上下左右
內邊距：padding
作用：設置內容和邊框之間的距離（往外擴）
注意：內邊距不會改變內容區域大小，可以單獨設置上下左右的大小
內容區域：
iframe內嵌標簽
- src：顯示網頁資源路徑，可以是本地也可以是網絡資源
（注意默認當前頁面打開及加載src指向的資源） - width：設置顯示區域的寬度
- height：設置顯示區域的高度
- name：設置內嵌區域的名字，結合超鏈接標簽的target屬性
- 特點：在當前網頁中加載其他網頁的1資源，達到不同網頁資源1之間不互相干擾，並能在同一個網頁中展現用戶的目的
示例
<!DOCTYPE html>
<html>
<head>
<title>相冊集</title>
<meta charset="utf-8">
<link rel="icon" href="../images/龍.png" type="image/x-icon">
<link rel="stylesheet" href="../css/時間冊.css">
</head>
<body>
<div id="div01">
<img src="../images/時間冊前景.png" alt="">
<!--我是前景,前景設置設置-->
</div>
<div id="div02">
<!--我是首頁首頁設置-->
<ul class="nav-main">
<li><a href="">Welcome To The Cat Home</a></li>
<li id="change"><a href="東血的自我介紹.html">Introducation</a></li>
<li id="change"><a href="">Photo</a></li>
</ul>
</div>
<div id="div03">
<ul class="nav">
<li><a href="時間冊圖片鏈接2017.html"target="年">2017</a></li>
<li><a href="時間冊圖片鏈接2018.html"target="年">2018</a></li>
<li><a href="時間冊圖片鏈接2019.html"target="年">2019</a></li>
</ul>
<!--時間線，定塊時間選擇-->
</div>
<div id="div04">
<!--圖庫-->
<iframe src="" width="1200px" height="1200px" name="年"></iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>時間冊圖片鏈接2017.html</title>
<meta charset="utf-8" />
<style>
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一張</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一張</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一張</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一張</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一張</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一張</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一張</p>
</li>
</ul>
</body>
</html>
圖標引用
<link rel="icon" href="t01e66ad58688a7e4f5.jpg" type="image/x-icon">
照片牆案例
效果預覽
上代碼
<!DOCTYPE html>
<html>
<head>
<title>css的樣式使用</title>
<meta charset="utf-8" />
<style type="text/css">
/*設置body樣式*/
body {
text-align: center;
background-color: gray;
}
/*設置圖片樣式*/
img {
width: 12%;/*設置高度*/
/*border:solid 1px red;設置邊框*/
padding:10px;/*設置內邊距*/
background-color: white;/*設置背景顏色*/
transform: rotate(-10deg);/*設置傾斜角度*/
margin: 20px;/*設置外邊距*/
}
/*使用偽類給標簽添加樣式*/
img:hover{
border: solid 2px red;
transform: rotate(0deg)scale(1.5);/*設置旋轉角度和縮放比列*/
z-index:1 ;/*設置顯示優先級別*/
transition: 1.5s;/*設置顯示加載時間*/
}
</style>
</head>
<body>
<br /><br /><br />
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" /><br>
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" />
</body>
</html>
注冊頁面
效果預覽
上代碼
<!DOCTYPE html>
<html>
<head>
<title>注冊頁面</title>
<meta charset="utf-8"/>
</head>
<body>
<h3>注冊頁面</h3>
<hr/>
<form action="#"method="get">
<table border="1px"cellspacing="0"cellpadding="5px">
<tr height="35px">
<td width="80px">用戶名：</td>
<td width="200px">
<input type="text"name="uname"id="uname"value=""/>
</td>
</tr>
<tr height="35px">
<td>密碼：</td>
<td>
<input type="password"name="pwd"id="pwd"value=""/>
</td>
</tr>
<tr height="35px">
<td>郵箱：</td>
<td>
<input type="text"name="mail"id="mail"value=""/>
</td>
</tr>
<tr height="35px">
<td>手機號：</td>
<td>
<input type="text"name="phone"id="phone"value=""/>
</td>
</tr>
<tr height="35px">
<td>性別：</td>
<td>
男<input type="radio"name="sex"id="sex"value="1"checked="checked"/>
女<input type="radio"name="sex"id="sex"value="0">
</td>
</tr>
<tr height="35px">
<td>愛好：</td>
<td>
<input type="checkbox"name="fav"id="fav"value="1"/>唱歌
<input type="checkbox"name="fav"id="fav"value="2"/>打球
<input type="checkbox"name="fav"id="fav"value="3"/>睡覺
</td>
</tr>
<tr height="35px">
<td>籍貫：</td>
<td>
<select name="address" id="">
<option value="1">---請選擇---</option>
<option value="2">信陽</option>
<option value="3">菏澤</option>
<option value="4">成都</option>
</select>
</td>
</tr>
<tr height="35px">
<td>個人介紹：</td>
<td>
<textarea name="" id="" cols="20" rows="8"></textarea>
</td>
</tr>
<tr height="35px">
<td colspan="2"align="center">
<input type="checkbox"name="agree"id="agree"value="1"/>
是否同意本公司協議
</td>
<td></td>
</tr>
<tr height="35px">
<td colspan="2"align="center">
<input type="submit"name=""id=""value="注冊"/>
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
愛心點擊
效果預覽
上代碼
<!DOCTYPE html>
<html>
<head>
<title>my css調用</title>
<meta charset="utf-8" />
<!--相對路徑與絕對路徑
相對路徑是例如CSS下圖調用的那個，上級目錄先../回到上級然后再用CSS/文件名定位-->
<script type="text/javascript">
// 自執行匿名函數
(function (window, document, undefined) { // 傳入window，document對象
var hearts = []; // 定義全局變量hearts，值為空數組
// 定義不同瀏覽器下的requestAnimationFrame函數實現，如果都沒有，則用setTimeout實現
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
}
})();
init(); // 執行初始化函數
// 定義初始化函數
function init() {
css(".heart{z-index:100000000;width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); // 定義要生成的愛心的樣式
attachEvent(); // 添加點擊事件（愛心生成）
gameloop(); // 開始循環移除愛心（內含遞歸）
bindEvents();
loop();
}
// 定義循環函數移除生成的愛心
function gameloop() {
for (var i = 0; i < hearts.length; i++) { // 循環hearts數組
if (hearts[i].alpha <= 0) { // 如果當前循環的heart對象的透明度為0或小於0
document.body.removeChild(hearts[i].el); // 從body對象中移除當前循環的heart對象（通過指針）
hearts.splice(i, 1); // 從heart數組中移除當前循環的heart對象（通過下標）
continue; // 跳過當前循環，進入下一個循環
}
hearts[i].y--; // y軸自減1
hearts[i].scale += 0.004; // 縮放增加0.004
hearts[i].alpha -= 0.013; // 透明度減少0.013
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
}
requestAnimationFrame(gameloop); // 定時器定時執行，遞歸
}
// 定義點擊事件函數
function attachEvent() {
var old = typeof window.onclick === "function" && window.onclick;
window.onclick = function (event) {
old && old();
createHeart(event);
}
}
// 定義創建愛心函數
function createHeart(event) {
var d = document.createElement("div"); // 創建一個div對象並賦值給變量d
d.className = "heart"; // 給div對象添加類名
hearts.push({ // 給hearts數組添加heart對象
el: d, // div對象
x: event.clientX - 5, // 鼠標當前位置x軸 - 5
y: event.clientY - 5, // 鼠標當前位置y軸 - 5
scale: 1, // 縮放
alpha: 1, // 透明度
color: randomColor() // 顏色（隨機顏色）
});
document.body.appendChild(d); // 添加創建的div對象到body對象
}
// 定義生成樣式函數
function css(css) {
var style = document.createElement("style"); // 創建一個style對象並賦值給變量style
style.type = "text/css"; // 給style對象添加屬性並賦屬性值
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style); // 添加創建的style對象到head對象
}
// 定義生成隨機顏色函數
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
}
})(window, document);
</script>
</head>
<body>
<span class="container"></span>
<script src="../js/fairyDustCursor.js" type="text/javascript"></script>
</body>
</html>
/*!
* Fairy Dust Cursor.js
* - 90's cursors collection
* -- https://github.com/tholman/90s-cursor-effects
* -- http://codepen.io/tholman/full/jWmZxZ/
/js/fairyDustCursor.js
*/
(function fairyDustCursor() {
var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = {x: width/2, y: width/2};
var particles = [];
function init() {
bindEvents();
loop();
}
// Bind events that are needed
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchstart', onTouchMove);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}
function onTouchMove(e) {
if( e.touches.length > 0 ) {
for( var i = 0; i < e.touches.length; i++ ) {
addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
}
}
}
function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
}
function addParticle(x, y, color) {
var particle = new Particle();
particle.init(x, y, color);
particles.push(particle);
}
function updateParticles() {
// Updated
for( var i = 0; i < particles.length; i++ ) {
particles[i].update();
}
// Remove dead particles
for( var i = particles.length -1; i >= 0; i-- ) {
if( particles[i].lifeSpan < 0 ) {
particles[i].die();
particles.splice(i, 1);
}
}
}
function loop() {
requestAnimationFrame(loop);
updateParticles();
}
/**
* Particles
*/
function Particle() {
this.character = "*";
this.lifeSpan = 120; //ms
this.initialStyles ={
"position": "absolute",
"display": "block",
"pointerEvents": "none",
"z-index": "10000000",
"fontSize": "16px",
"will-change": "transform"
};
// Init, and set properties
this.init = function(x, y, color) {
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};
this.position = {x: x - 10, y: y - 20};
this.initialStyles.color = color;
console.log(color);
this.element = document.createElement('span');
this.element.innerHTML = this.character;
applyProperties(this.element, this.initialStyles);
this.update();
document.body.appendChild(this.element);
};
this.update = function() {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.lifeSpan--;
this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
}
this.die = function() {
this.element.parentNode.removeChild(this.element);
}
}
/**
* Utils
*/
// Applies css `properties` to an element.
function applyProperties( target, properties ) {
for( var key in properties ) {
target.style[ key ] = properties[ key ];
}
}
init();
})();
列表標簽
- 列表標簽學習
- 無序列表ul
- li：一個行數據（默認數據前有黑圓點）
- 有序列表ol
- type：1，a等等（順序由小到大）
- 自定義列表dl
- dt數據標題
- dd一行數據
- 無序列表ul
標題標簽
- 標題標簽：h1-h6加黑加粗按級別
- 屬性：
- align：center left right（）居中，左對齊，右對齊
- 水平線標簽
- hr：默認居中
- 屬性：
- width=“寬度”
- size=“高度”
- color=“顏色”
- 段落標簽：
- p：特點段間距大
- 換行符：br
- 空格符： 
- 權重標簽：b:加黑
- i:斜體
- u：下划線
- del：刪除線
CSS的聲明
- 在head標簽中使用style標簽聲明
- 作用：此聲明一般聲明當前網頁的公共樣式或者給某個標簽單獨樣式
- 在標簽上使用style屬性進行聲明：
- 作用：此聲明會將CSS樣式直接作用於當前標簽
- 在head標簽中使用link標簽引入外部聲明好的CSS文件
- 作用：此聲明相當於調用,解決了不同網頁間樣式重復使用的問題
- 問題：不同的聲明給同一個標簽操作了同一個樣式，會先使用誰的？
- 執行順序，就是CSS樣式的位置
- 如果CSS的聲明全部在head標簽中，就遵循就近原則，誰離標簽近，誰就會被顯示
CSS定位position
- 相對定位：relative
- 作用：相對元素原有位置移動指定的距離（相對的自己的原有位置）
- 可以使用top,left,right,bottom來進行設置網頁界面
- 注意：其他元素的位置是不改變的
- 絕對定位：absolute
- 作用：可以使用元素參照界面或者相對元素進行移動，就是上一級網塊
- 注意：如果父級元素成為參照元素，必須使用相對定位屬性，默認情況選是以界面為基准進行移動的
- 固定定位：fixed
- 作用：將元素固定現在頁面的指定位置，不會隨着滾動條的移動而改變位置
- 以上定位都可以使用top,left,right,bottom來進行移動
- z-index:此屬性是用來聲明元素的顯示
CSS選擇器
- 標簽選擇器：標簽名{樣式名1：樣式名2；...}
- 作用：會將當前網頁內所有的該標簽增加相同的樣式
- id選擇器：#標簽的id屬性值{樣式名1：樣式名2；...}
- 作用：給某個指定的標簽添加指定樣式
- 類選擇器：.類選擇器名{樣式名1：樣式名2；...}
- 作用：給不同的標簽添加相同的樣式
- 全部選擇器：*{樣式名1：樣式名2；...}
- 作用：選擇所有的HTML標簽，並添加相同的樣式
- 組合選擇器：選擇器1，選擇器2，......{樣式名1：樣式名2；..}
- 作用：解決不同的選擇器之間重復樣式的問題
- 子標簽選擇器：選擇器1 子標簽選擇器{樣式名1：樣式名2；...}
- 屬性選擇器：標簽名[屬性名=屬性值]{樣式名1：樣式名2；...}
- 作用：選擇某標簽指定具備某屬性值為某屬性值的標簽，逐級遞減添加到id選擇器
form標簽
- form表單標簽
- 作用：收集並提交用戶數據給指定服務器
- 注意1：form標簽會手機其標簽內部的數據
- 屬性：
- action：收集到的數據提交地址就是URL
- method：收集到的數據提交方式
- get：適合小量數據，表單數據以？隔開拼接在URL后面，不同的鍵值對使用&符號隔開，不安全。
- post:適合大量數據，安全，隱式提交
- 屬性：
- 注意2：
- 表單數據的提交，要提交的表單項必須要有name屬性值，否則不會提交
- 提交的表單項數據為鍵值對,健為name屬性的值，值為用戶書寫的數據
- form標簽會手機其標簽內部的數據
- form表單的數據提交需要依賴submit提交按鈕（value是按鈕上的值）
- form表單域
- 作用：給用戶提供可以進行數據書寫或者選擇的標簽
- 使用：input type
- 文本框：
- text收集少量數據，用戶可見
- password收集用戶密碼數據，黑點不可見
- name：數據提交的健,也會被JS使用
- value:默認值
- 單選框：radio
- name:name屬性值相同的單選框只能選擇一項數據
- value:要提交的數據
- checked：checked使用此屬性的單選是默認狀態
- 多選框：checkbox
- name:一個多選框需要使用相同的name屬性值
- value：要提交的數據
- checked：checked使用此屬性的單選是默認狀態
- 下拉框：select
- name:數據提交的健名，必須聲明
- 子標簽option：一個option標簽表示一個下拉選項
- value:要提交的數據
- 注意：表單數據提交的是表單域標簽的value值
- 文本域：textarea
- 聲明一個可以書寫大量文字的文本區域
- name：數據提交的健名，js和CSS也會使用
- cows：聲明文本域的行數
- rows: 聲明文本域的列數
- 普通按鈕：button
- 在點擊數據提交時，form標簽會將其內部所有form表單域標簽中用戶書寫的數據使用method指明的提交方式提交給action屬性所指明的提交地址
head配置
<!--head標簽中主要配置瀏覽器的配置信息-->
<head>
<title>html學習</title><!--網頁標題標簽：告訴瀏覽器使用什么標題顯示網頁-->
<meta http-equiv="content-type"content="text/html;charset=utf-8"/><!--告訴瀏覽器使用指定格式編譯文檔-->
<meta name="keywords"content="html"/><!--關鍵字，網頁描述，作者，自動刷新-->
<meta name="description"content="benwangye"/>
<meta name="author"content="wuzedong"/>
<meta http-equiv="refresh"content="5;url=http://www"/>
</head>
變形2d案例
效果預覽
上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid #f00;
margin: 100px auto;
transition: all 2s;
}
div:nth-child(1):hover {
transform: translateX(200px);
}
div:nth-child(2):hover {
transform: rotate(90deg);
}
div:nth-child(3):hover {
transform: scale(2, 2);
}
div:nth-child(4):hover {
transform: skew(30deg, 30deg);
}
div:nth-child(5):hover {
transform: translateX(200px) rotate(90deg) scale(2, 2) skew(30deg, 30deg);
}
</style>
</head>
<body>
<div>2D平移</div>
<div>2D旋轉</div>
<div>2D縮放</div>
<div>2D扭曲</div>
<div>2D綜合</div>
</body>
</html>
導航塊案例
效果預覽
上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>導航塊</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
height: 60px;
background: palegoldenrod;
}
.box1 ul {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.box1 ul li {
list-style: none;
float: left;
border-right: 1px solid #f30;
}
.box1 ul li a {
text-decoration: none;
display: block;
width: 119px;
height: 60px;
text-align: center;
line-height: 60px;
}
.box1 ul li a:hover {
background: cornflowerblue;
}
.box1 ul li.box2 {
border-right: none;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li><a href="#">導航塊1</a></li>
<li><a href="#">導航塊2</a></li>
<li><a href="#">導航塊3</a></li>
<li><a href="#">導航塊4</a></li>
<li><a href="#">導航塊5</a></li>
<li><a href="#">導航塊6</a></li>
<li><a href="#">導航塊7</a></li>
<li class="box2"><a href="#">導航塊8</a></li>
</ul>
</div>
</body>
</html>
動畫案例
效果預覽
上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>donghua</title>
<!--
為了適應不同瀏覽器
-webkit_(webkit/safari/舊版的chrome)
-moz-(firefox)
-ms-(ie)
-o-(opera)
-->
<style>
*{
margin: 0;
padding: 0;
/*讓css3的效果兼容其他瀏覽器*/
/*定義當元素不面向屏幕時是否可見*/
-webkit-backface-visibility: hidden;
/*把鼠標指針放到div元素上，會產生帶有平滑改變元素寬度的過渡效果*/
-webkit-transition: all 0.5s;
-moz-transition:all 0.5s;
transition: all 0.5s;
}
body{
background-color: black;
/*產生每隔20px的斜線*/
background: repeating-linear-gradient(45deg,#f6f6f6,0,#efff)
}
#container{
width: 330px;
margin: 25px auto;
}
h1{
color:#333;
font-family: open sans condensed;
font-size: 2.5em;
text-align: centerd;
margin-bottom:40px;
}
/*偽類
h1:hover{
font-size:2,5em;
}*/
/*::before和::after必須配合content屬性來使用
content用來定義插入的內容，content必須有值，至少是空
默認情況下，偽類元素的display：block來改變其顯示
具體情況請參考：https://www.cnblogs.com/starof/p/4459991.html*/
/*給h1標簽鼠標移動上去的樣式*/
h1:hover{
font-size:2.5em;
}
h1:hover::before,
h1:hover::after{
font-style:italic;
font-size:0.5em;
}
h1:hover::before{
content:"some";
}
h1:hover::after{
content:"by nobadyrocks";
}
/*transition逐步變化*/
button{
width: 100px;
height:100px;
color: #ffffff;
background-color: #3498db;
text-decoration: none;
font-size:1.8em;
border:2px #ffffff solid;
margin: 10px 0 0 5px;
-webkit-transition: all 0.5s;
-moz-transition:all 0.5s;
transition: all 0.5s;
}
button:hover{
/*鼠標 手*/
cursor: pointer;
}
.highlight:hover{
background-color: #ffffff;
color: #3498db;
}
.fade:hover{
border: 0px;
color: #009999;
opacity: 0;
}
/*transform旋轉*/
.boom:hover{
/*color: #009999;
border: #009999;*/
opacity: 0;
-webkit-transform: scale(2,2);
-moz-transform:scale(2,2);
transform: scale(2,2);
/*scale縮放*/
}
.focus:hover{
border-width:20px;
}
.rotate:hover{
-webkit-transform: rotate(90deg);
-moz-transform:rotate(90deg);
transform: rotate(90deg);
/*rotate 2d旋轉*/
}
.knit:hover{
height:0px;
}
.shrink:hover{
-webkit-transform: scale(0.0,0.0);
-moz-transform:scale(0.0,0.0);
transform: scale(0.0,0.0);
}
.squeeze:hover{
-webkit-transform: scale(1.5,0.0);
-moz-transform:scale(0.0,0.0);
transform: scale(0.0,0.0);
}
.deform:hover{
-webkit-transform:skew(45deg,45deg);
-moz-transform:skew(45deg,45deg);
transition: skew(45deg,45deg);
/* skew 2d傾斜*/
}
/*for the sake of responsiveness*/
/*如果html最大寬度小於330像素
則修改#container,button的樣式
定義輸出設備中的頁面最大可見區域寬度
其他的具體情況：
http://www.runoob.com/cssref/css3-pr-mediaquery.html*/
@media(max-width:330px){
#container{
width: 100%;
}
button{
width: 90%;
margin:5% 0 0 5%;
}
}
#linkBack{
position: absolute;
right: 0px;
top: 0px;
background-color: #333;
margin: 0;
width: 60px;
}
#linkBack>a{
font-size: 14px;
text-decoration: none;
color:#fff;
padding:0 0 0 5px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="container">
<h1>css3 animated buttons</h1>
<button class="highlight">highlight</button>
<button class="fade">fade</button>
<button class="boom">boom</button>
<button class="focus">focust</button>
<button class="rotate">rotate</button>
<button class="knit">knit</button>
<button class="shrink">shrink</button>
<button class="squeeze">squeeze</button>
<button class="deform">deform</button>
</div>
<div id="linkback">
<a href="http://www"
</div>
</body>
</html>