css3animation动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img{ width:200px; height:200px; } div{ width: 100px; height: 100px; margin: 100px auto; /* animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 */ /*//一个叫heart的动画 每隔0.5s执行动画 无限次*/ animation: heart 1s infinite; } @keyframes heart{ 0%{ transform: scale(1.0); } 50%{ transform: scale(1.4); } 100%{ transform: scale(1.0); } } </style> </head> <body> <div> <img src="imgs/xiaoxinzang.jpg" alt=""> </div> </body> </html>二.animation动画鼠标移动上去图片内容放大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } li{ display:inline-block; margin:50px auto; margin-left: 10px; overflow: hidden; } ul{ margin-left: 200px; } div img{ cursor: pointer; transition: all 0.5s; } div img:hover{ transform: scale(1.2); } </style> </head> <body> <div> <ul> <li><a href=""><img src="imgs/wzry6.png" alt=""></a></li> <li><a href=""><img src="imgs/wzry7.jpg" alt=""></a></li> <li><a href=""><img src="imgs/wzry8.jpg" alt=""></a></li> <li><a href=""><img src="imgs/wzry9.jpg" alt=""></a></li> </ul> </div> </body> </html>