20210408web前端

鼠标悬停下拉动画

		.fa {
			width: 1000px;
			height: 800px;
			margin: 0 auto;
			border: 2px solid #AAA;
			position: relative;
			left: 0;
			top: 0;
			background: #0F6;
		}

		.box {
			width: 100px;
			height: 300px;
			background: #C00;
			position: absolute;
			right: 100px;
			top: -250px;
			transition: all .5s;
		}

		.box:hover {
			top: 0;
		}

	<div class="fa">
		<div class="box">
		</div>
	</div>

图片旋转动画

        .box {
            width: 400px;
            margin: 100px auto;
            animation: rotate 4s ease infinite;
        }

        img {
            width: 100%;
            display: block;
        }

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

            100% {
                transform: rotateZ(360deg);
            }
        }

    <div class="box">
        <img src="images/demo3-9/fengche.png" />
    </div>

20210408web前端

原文：https://www.cnblogs.com/luckyzyx/p/14635009.html