HTML+CSS图片动画效果

青旅半醒 2024-02-20 09:36 63阅读 0赞

## 一运行效果图 ##

![b634d1f83ef74e96b2d4dc2f209bcb33.png][]

## 二图片资源 ##

![4f11d32caa6d41babbf0e348377a8fe8.png][]![58a6a143849d4848b6ac5a722ca7d065.png][]![8f9030dda48a4df988672e659a158377.png][]![36dfbd8f29a7481bad889145aab16608.png][]

![59608f8ea24f4c2cbbe8bba509396851.png][]![eca2e8a2c4794daba1422aa1881f0c8a.png][]

## 三 HTML ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<link href="css/one.css" rel="stylesheet" type="text/css"/>
    		<title></title>
    	</head>
    	<body>
    		<div id="one">
    		<ul>
    			<li><img class="one" src="img/baby1.png"/>笑笑</li>
    			<li><img class="two" src="img/baby2.png"/>佳佳</li>
    			<li><img class="three" src="img/baby3.png"/>茜茜</li>
    			<li><img class="four" src="img/baby4.png"/>倩倩</li>
    			<li><img class="five" src="img/baby5.png"/>乐乐</li>
    			<li><img class="six" src="img/baby6.png"/>月月</li>
    		</ul>
    		</div>
    	</body>
    </html>

## 四 CSS ##

#one{
    	
    }
    
    #one li {
    	list-style: none;
    	align-items: center;
    	float: left;
    	margin-right: 100px;
    	margin-bottom: 100px;
    	width: 240px;
    	height: 240px;
    	text-align: center;
    	font-size: 24px;
    	position: relative;
    	left: 20%;
    	top: 30%;
    }
    #one li:nth-child(3n+1) {
    	clear: left;
    }
    
    .one{
    	transform: rotate(-5deg);
    }
    .one:hover{
    	border-radius: 50%;
    	/* 正方形变成圆形 */
    	 animation-name: transformCircle;
    	  animation-duration: 1s;
    	  animation-timing-function: linear;
    	  animation-iteration-count: infinite;
    	  animation-fill-mode: forwards;
    }
    .two{
    	transform: rotate(5deg);
    }
    .two:hover{
    	transform: rotate(-60deg);
    }
    .three{
    	transform: rotate(-5deg);
    }
    .three:hover{
    	transform: rotate(360deg);
    	box-shadow: 2px 2px 5px 5px rgba(255, 255, 0, 0.5);
    }
    .four{
    	transform: rotate(-5deg);
    }
    .four:hover{
    	box-shadow: 2px 2px 5px 5px rgba(0, 0, 0, 0.5);
    	/* 元素周围添加 2 像素的水平和垂直偏移量，4 像素的模糊半径，5 像素的阴影扩展和颜色为黑色的半透明阴影 */
    	transform: rotate(-10deg);
    }
    .five{
    	transform: rotate(5deg);
    }
    .five:hover{
    	transform: rotateY(180deg);
    }
    .six{
    	transform: rotate(5deg);
    }
    .six:hover{
    	transform: scale(1.2);
    }
    /* @keyframes transformCircle {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(2);
      }
      100% {
        transform: scale(1);
      }
    } */

[b634d1f83ef74e96b2d4dc2f209bcb33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/ac3f1987fdfb4d108f941191fdb963ed.png
[4f11d32caa6d41babbf0e348377a8fe8.png]: https://img-blog.csdnimg.cn/4f11d32caa6d41babbf0e348377a8fe8.png
[58a6a143849d4848b6ac5a722ca7d065.png]: https://img-blog.csdnimg.cn/58a6a143849d4848b6ac5a722ca7d065.png
[8f9030dda48a4df988672e659a158377.png]: https://img-blog.csdnimg.cn/8f9030dda48a4df988672e659a158377.png
[36dfbd8f29a7481bad889145aab16608.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/acc185f49ae94e788cdcea6ef1db1d01.png
[59608f8ea24f4c2cbbe8bba509396851.png]: https://img-blog.csdnimg.cn/59608f8ea24f4c2cbbe8bba509396851.png
[eca2e8a2c4794daba1422aa1881f0c8a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/cfc68da0da07483e8db904fff19fff7f.png