<!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盒子有动画效果
