小練習（4）
阿新 • • 發佈：2018-04-03
mes style pos log 技術 itl filter scale type
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滾動</title> <style type="text/css"> *{ margin: 0 auto; } #movie{ width: 100px; height: 100px;background-color: red; animation :movie 10s infinite alternate; } @keyframes movie{ 0%{background-color: blue;margin-left: 0px;} 30%{background-color: yellow;margin-left: 500px;margin-top:0px;border-radius: 50%;} 60%{background-color: red;margin-left: 500px;margin-top:200px;} 90%{background-color: black;margin-left: 0px;margin-top:200px;} 100%{background-color: blue;margin-left: 0px;} } #big_box { width: 350px; height: 250px; } #box1{ width: 100px; height: 100px; float: left; margin-left: 10px; margin-top: 10px; overflow: hidden; } img:hover{ transform: scale(1.5,1.5); transition:2s; } #box2{ width: 100px; height: 100px; background-image: url(../../img/qy/qy2.jpg); background-size: 100% 100%; float: left; margin-left: 10px; margin-top: 10px; } #box2:hover{ transform: rotate(180deg); transition:2s; } #box3{ width: 100px; height: 100px; background-image: url(../../img/qy/qy3.jpg); background-size: 100% 100%; float: left; margin-left: 10px; margin-top: 10px; } #box3:hover{ transform: rotateY(180deg); transition:2s; } #box4{ width: 100px; height: 100px; background-image: url(../../img/qy/qy4.jpg); background-size: 100% 100%; float: left; margin-left: 10px; margin-top: 10px; border: 2px solid red; transition: 2s; } #box4:hover{ box-shadow: 5px 5px blue; border-radius: 10px; } #box5{ width: 100px; height: 100px; background-image: url(../../img/qy/qy5.jpg); background-size: 100% 100%; float: left; margin-left: 10px; margin-top: 10px; transition: 2s; } #box5:hover{ filter: hue-rotate(180deg); } #box6{ width: 100px; height: 100px; background-image: url(../../img/qy/qy6.jpg); background-size: 100% 100%; float: left; margin-left: 10px; margin-top: 10px; transition: 5s; } #box6:hover{ background-image: url(); background-color: blue; } </style> </head> <body> <div id="movie"> </div> <div id="big_box"> <div id="box1"> <img src="../../img/qy/qy1.jpg" width="100%" height="100%"/> </div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> <div id="box5"></div> <div id="box6"></div> </div> </body> </html>
6個div
第一個 鼠標移上，圖片從中間位置拉近
第二個 鼠標移上，2d旋轉180deg
第三個 鼠標移上，3d Y軸旋轉180deg
第四個 鼠標移上，給div加邊框陰影和圓角
第五個 鼠標移上，圖片加濾鏡
第六個 鼠標移上，改div的背景
movie盒子有動畫效果
小練習（4）