網頁小技巧 --
Div / AP Div/P / Span 以及導覽列/導覽選單
fireworkssample.zip | |
File Size: | 27 kb |
File Type: | zip |
dreamweavercs5.5_20110916.doc | |
File Size: | 707 kb |
File Type: | doc |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神奇的 AP Div</title> <style type="text/css"> #apDiv1 { position: absolute; width: 200px; height: 115px; z-index: 1; left: 55px; top: 33px; } #apDiv2 { position: absolute; width: 102px; height: 101px; z-index: 2; left: 353px; top: 356px; font-size: 58pt; -webkit-transition: all 2s ease 0s; -moz-transition: all 2s ease 0s; -ms-transition: all 2s ease 0s; -o-transition: all 2s ease 0s; transition: all 2s ease 0s; transform: rotate(15deg); background-color: #FF66FF; } #apDiv2:hover { background-color: #00F; color: #FFF; transform: rotate(-45deg); } #apDiv2:active { -webkit-transform: 1; -moz-transform: 1; -ms-transform: 1; -o-transform: 1; transform: rotate(-1068deg); color: #00F; background-color: #0F0; -webkit-transition: transform 12s ease 0s; -moz-transition: -moz-transform 12s ease 0s; -ms-transition: transform 12s ease 0s; -o-transition: transform 12s ease 0s; transition: transform 12s ease 0s; } #apDiv3 { position: absolute; width: 102px; height: 101px; z-index: 2; left: 239px; top: 169px; font-size: 58pt; -webkit-transition: transform 3s linear 0s; -moz-transition: -moz-transform 3s linear 0s; -ms-transition: transform 3s linear 0s; -o-transition: transform 3s linear 0s; transition: transform 3s linear 0s; transform: rotate(-30deg); background-color: #33FFFF; } #apDiv4 { position: absolute; width: 102px; height: 101px; z-index: 2; left: 80px; top: 258px; font-size: 58pt; -webkit-transition: transform 5s ease 0s 0.85; -moz-transition: transform 5s ease 0s; -ms-transition: transform 5s ease 0s; -o-transition: transform 5s ease 0s; transition: transform 5s ease 0s; transform: rotate(15deg); background-color: #FF00CC; color: #2A00FF; visibility: visible; filter: Shadow(Color=red, Direction=left); } #apDiv5 { position: absolute; width: 102px; height: 101px; z-index: 2; left: 488px; top: 356px; font-size: 58pt; -webkit-transition: all 6s ease 0s; -moz-transition: all 6s ease 0s; -ms-transition: all 6s ease 0s; -o-transition: all 6s ease 0s; transform: rotate(30deg); background-color: #00FF00; transition: all 6s ease 0s; } #apDiv6 { position: absolute; width: 102px; height: 101px; z-index: 2; left: 641px; top: 275px; color: blue; font-size: 58pt; -webkit-transition: all 2s ease 0s; -moz-transition: all 2s ease 0s; -ms-transition: all 2s ease 0s; -o-transition: all 2s ease 0s; transition: all 2s ease 0s; transform: rotate(15deg); background-color: #AABFFF; } body { background-color: #FF0; } #apDiv4:hover { transform: translateY(-58px) scale(0.8,1.8); color: green; } #apDiv5:hover { left: 888px; top: 168px; -webkit-transform: rotate(2400deg); -moz-transform: rotate(2400deg); -ms-transform: rotate(2400deg); -o-transform: rotate(2400deg); transform: rotate(2400deg); } #apDiv3:hover { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } #apDiv6 { -webkit-animation: rotation 3s infinite linear; -moz-animation: rotation 3s infinite linear; -ms-animation: rotation 3s infinite linear; -o-animation: rotation 3s infinite linear; animation: rotation 3s infinite linear; } @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);transform: rotate(360deg);} } @keyframes rotation{ from {-webkit-transform: rotate(0deg);transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);transform: rotate(360deg);} } #apDiv6:hover { animation: rotation 0s infinite linear; background-color: #FFFF00; color: #00FF00; } #apDiv6:active { -webkit-animation: scale 6s ; -moz-animation: scale 6s ; transform: scale(0.8,3.3) rotate(-15deg);; color: #f00; } #apDiv6:target { background-color: #00FF00; } </style> </head> <body> <div id="apDiv2">外</div> <div align="center" id="apDiv4">交</div> <div id="apDiv5">mgd</div> <div id="apDiv6">系</div> <div align="center" id="apDiv3">大</div> <div id="apDiv5">文</div> </body> </html>