<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .png1{ width: 200px; height: 200px; border-radius: 50%; } .png2{ width: 200px; height: 200px; margin: 0 auto; transition: all 3s; } .png2:hover{ border-radius: 50%; } .png3{ width: 200px; height: 200px; margin: 0 auto; } .png3:hover{ transform: translate(100px,100px); } .png4{ width: 200px; height: 200px; margin: 0 auto; transition: all 3s; } .png4:hover{ transform: rotateX(180deg); } .png5{ width: 200px; height: 200px; margin: 0 auto; box-shadow: 20px 15px 10px #666665; } .png6{ width: 200px; height:200px; transition: all 5s; } .png6:hover{ transform: rotate(360deg); } .png7{ width: 200px; height: 200px; animation: myfirst1 5s; } .png8{ width: 200px; height: 200px; transition: all 5s; } .png8:hover{ transform: translate(100px); } @keyframes myfirst1 { form{ transform: rotateX(0deg); } to{ transform: rotateX(180deg); } } </style> </head> <body> <div> <img class="png1" src="img/a.png"> <img class="png2" src="img/a.png"> <img class="png3" src="img/a.png"> <img class="png4" src="img/a.png"> <img class="png5" src="img/a.png"> <img class="png6" src="img/a.png"> <img class="png7" src="img/a.png"> <img class="png8" src="img/a.png"> </div> </body> </html>
CSS3边框 圆角 阴影,旋转
最新推荐文章于 2024-06-28 14:24:07 发布