HTML5作业6过度与变形
本次的作业是练习过度与变形
1、是改变边框为圆形
2、是放大图片
3、是旋转
4、是变透明
源代码如下
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>过度与变形</title> <style type="text/css"> *{ padding: 0; margin: 0; list-style: none; } div{ width: 100%; height: 500px; margin: 0 auto; background: #000000; } ul{ display: flex; justify-content: space-around; width: 100%; height: 250px; padding-top: 30px; } ul li{ width: 240px; height: 300px; margin: 20px; text-align: center; } ul li span{ color: #fff; line-height: 50px; } ul li p{ border: 10px solid #fff; border-radius: 10px; overflow: hidden; } ul li p img{ width: 180px; } ul li:nth-of-type(1) p{ transition-duration: 2s; } ul li:nth-of-type(1) p:hover{ border-radius: 120px; } ul li:nth-of-type(2) p img{ transform: scale(1); transition-duration: 2s; } ul li:nth-of-type(2) p:hover img{ transform: scale(2); } ul li:nth-of-type(3) p{ transition-duration: 2s; } ul li:nth-of-type(3) p:hover{ transform: rotate(45deg); } ul li:nth-of-type(4) p{ transition-duration: 2s; } ul li:nth-of-type(4) p:hover{ opacity:0.4; } </style> </head> <body> <div> <ul> <li> <span>SHAN</span> <p><img src="img/240/1.jpeg" ></p> </li> <li> <span>DISPLI</span> <p><img src="img/240/2.jpeg" ></p> </li> <li> <span>AUDIVSEG</span> <p><img src="img/240/3.jpeg" ></p> </li> <li> <span>KDOSJN</span> <p><img src="img/240/4.jpeg" ></p> </li> </ul> </div> </body> </html>
运行结果如图
