HTML5+css3 案例
阿新 • • 發佈：2020-08-14
css3模擬三角效果
div{ /*用css邊框可以模擬三角效果 1.寬度高度為0 2.4個邊框都要寫，只保留需要的邊框顏色，其餘的不能省略，都改為transparent 3.為了照顧相容性，加上font-size:0; line-height:0; * */ width: 0; height: 0; border-left: 10px solid red; border-right: 10px solid transparent; border-top: 10px solid transparent; border-bottom: 10px solid transparent; font-size: 0; line-height: 0; }
照片旋轉木馬效果
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ perspective: 1000px; } section{ margin: 100px auto; position: relative; width: 300px; height: 200px; animation: rotate 10s linear infinite; transform-style: preserve-3d; } section:hover{ animation-play-state: paused; } @keyframes rotate{ 0%{ transform: rotateY(0); } 100%{ transform: rotateY(360deg); } } section div{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(img/han.JPG) no-repeat; } section div:nth-child(1){ transform: translateZ(300px); } section div:nth-child(2){ transform:rotateY(60deg) translateZ(300px); } section div:nth-child(3){ transform:rotateY(120deg) translateZ(300px); } section div:nth-child(4){ transform: rotateY(180deg) translateZ(300px); } section div:nth-child(5){ transform:rotateY(240deg) translateZ(300px) ; } section div:nth-child(6){ transform: rotateY(300deg) translateZ(300px); } </style> </head> <body> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> </body> </html>
淘寶產品邊框效果
<style type="text/css"> div{ position: relative; float: left; width: 200px; height: 300px; /*使兩個div的邊框只顯示一條*/ margin-right: -1px; border: 1px solid #ccc; } div:hover{ border: 1px solid pink; /*要讓當前滑鼠經過的這個div升到最高處就好了*/ /*定位的盒子是最高層的*/ /*只要保證當前的盒子 是定位 就會壓住標準流和浮動盒子*/ z-index: 1; } </style>
兩個盒子面旋轉效果
<style type="text/css"> body{ perspective: 500px; } .box{ position: relative; width: 300px; height: 300px; margin: 0 auto; transform-style: preserve-3d; transition: all .4s; } .box:hover{ transform: rotateY(180deg); } .front, .back{ position: absolute; top: 0; left: 0; width: 300px; height: 300px; text-align: center; line-height: 300px; color: #fff; border-radius: 50%; } .front{ background-color: pink; } .back{ background-color: plum; transform: rotateY(180deg); } </style> </head> <body> <div class="box"> <div class="front">粉色盒子</div> <div class="back">這裡紫色盒子</div> </div> </body>
地圖標註
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{background-color: #ccc;} .map{ background:url(img/map.png) no-repeat; width: 953px; height: 472px; margin: 0 auto; } .city{ position: absolute; top: 164px; left: 712px; } .dotted{ position: absolute; width: 8px; height: 8px; background-color: pink; border-radius: 50%; } .city div[class^='pusle']{ /*保證小波紋在父盒子裡水平垂直居中 放大之後就會中心向四周發散*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; box-shadow: 0 0 12px hotpink; border-radius: 50%; animation: pusle 1.2s linear infinite forwards; } .city div.pusle2{ animation-delay: 0.4s; } .city div.pusle3{ animation: .8s; } @keyframes pusle{ 0%{ opacity: 1; } 70%{ width: 40px; height: 40px; opacity: 1; } 100%{ width: 70px; height: 70px; opacity: 0; } } </style> </head> <body> <div class="map"> <div class="city"> <div class="dotted"></div> <div class="pusle1"></div> <div class="pusle2"></div> <div class="pusle3"></div> </div> </div> </body>
奔跑的小熊
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{background-color: #ccc;} div{ position: absolute; width: 200px; height: 100px; background: url(img/bear.png)no-repeat; animation: run 1s steps(8) infinite,mov 4s forwards; } @keyframes run{ from{ background-position: 0 0; } to{ background-position: -1600px 0; } } @keyframes mov{ from{ left: 0; } to{ left: 50%; transform: translate(-50%); } } </style> </head> <body> <div> </div> </body>
3D盒子導航
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul li{ float: left; list-style: none; width: 100px; height: 35px; margin: 0 5px; perspective: 500px; text-align: center; line-height: 35px; color: #fff; cursor: pointer; } .box{ position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all .3s; } .box:hover{ transform: rotateX(90deg); } .front, .bottom{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .front{ background-color: pink; transform: translateZ(17.5px); } .bottom{ background-color: purple; transform:translateY(17.5px) rotatex(-90deg); } </style> </head> <body> <ul> <li> <div class="box"> <div class="front">這裡是導航</div> <div class="bottom">Hello!</div> </div> </li> <li> <div class="box"> <div class="front">這裡是導航</div> <div class="bottom">Hello!</div> </div> </li> <li> <div class="box"> <div class="front">這裡是導航</div> <div class="bottom">Hello!</div> </div> </li> <li> <div class="box"> <div class="front">這裡是導航</div> <div class="bottom">Hello!</div> </div> </li> <li> <div class="box"> <div class="front">這裡是導航</div> <div class="bottom">Hello!</div> </div> </li> </ul> </body>