js 实现iFonts书签动画

具体网址效果

https://ifonts.com/clientdown?from=360fontDownload&fk=766471

 html

<div class="box">
	<div class="box1">
		<ul>
			<li class="lis">
				<i></i>
				<img src="https://pic.51ifonts.com/images/client-index/card1.jpg" alt="">
			</li>
			<li class="lis">
				<i></i>
				<img src="https://pic.51ifonts.com/images/client-index/card2.jpg" alt="">
			</li>
			<li class="lis">
				<i></i>
				<img src="https://pic.51ifonts.com/images/client-index/card3.jpg" alt="">
			</li>
			<li class="lis">
				<i></i>
				<img src="https://pic.51ifonts.com/images/client-index/card4.jpg" alt="">
			</li>
			<li class="lis">
				<i></i>
				<img src="https://pic.51ifonts.com/images/client-index/card5.jpg" alt="">
			</li>
			<li class="lis">
				<i></i>
				<img src="https://pic.51ifonts.com/images/client-index/card6.jpg" alt="">
			</li>
			<li class="lis">
				<i></i>
				<img src="https://pic.51ifonts.com/images/client-index/card7.jpg" alt="">
			</li>
		</ul>
	</div>
	<!-- box -->
</div>

css

<style>
	.box {
		width: 100%;
		background-color: #ccc;
		height: 50vh;
	}

	.box1 {
		width: 1110px;
		margin: 0 auto;
	}

	.box1:after {
		content: "";
		display: block;
		clear: both;
	}

	.box1 ul li {
		list-style: none;
		float: left;
		margin-right: 42px;
		width: 84px;
		height: 228px;
		background: #fff;
		border: 1px solid #d9ddea;
		box-shadow: 0 1px 5px 0 rgb(217 221 234 / 56%);
		border-radius: 42px;
		padding-top: 36px;
		text-align: center;
		transform-origin: 42px 36px;
		/*旋转中心点*/
	}

	.box1 ul li:last-child {
		margin-right: 0;
	}

	.box1 ul li i {
		display: block;
		margin: 0px auto 24px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		border: 1px solid #ccd0dc;
		background: #f4f6f9;
	}

	.box1 ul li img {
		width: 30px;
	}

	.begin {
		animation: sky 2s linear alternate;
	}


	@keyframes sky {
		0% {
			transform: rotate(15deg);
		}

		20% {
			transform: rotate(-15deg);
		}

		50% {
			transform: rotate(8deg);
		}

		70% {
			transform: rotate(-8deg);
		}

		90% {
			transform: rotate(3deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}
</style>

script

<script>
	let lis = document.getElementsByClassName("lis");
	for (let val of lis) {
		val.onmouseover = function start() {
			this.className = 'begin';
		};
		val.onmouseout = function stop() {
			setTimeout(() => {
				this.className = '';
			}, 2000)
		}
	}
</script>