web动画效果

最新推荐文章于 2021-06-04 23:20:36 发布

隔壁店小二

最新推荐文章于 2021-06-04 23:20:36 发布

阅读量3.2k

点赞数 7

本文链接：https://blog.csdn.net/qq_41867429/article/details/80071894

版权

简单记录一下网页动态效果

效果图

直接上代码

1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flower</title>

	<style type="text/css">

	.flower{margin:0px;
		   padding: 0px;
		   width: 600px;
		   height:500px;
		   margin:0 auto;/*将盒子设置在中心位置*/
		   position: relative;
		}
			

	/*设置每一朵花瓣的形状*/
	    .f0,.f1,.f2,.f3,.f4,.f5,.f6,.f7,.f8,.f9,.f10
		,.f11,.f12,.f13,.f14,.f15,.f16,.f17{
				width:200px;
				height:200px;
				background:pink;
				opacity: 0.6; /*设置透明度*/
				left:250px;
				top:100px;
				position:absolute;
				border-radius: 100% 0; /*设置花瓣形式*/
				transform-origin: 0px 200px;/*设置旋转中心点*/
				transition:5s; /*设置变化时间*/
		}
			.flower:hover .f0{
				transform: rotate(20deg);/*给每片花瓣设置旋转角度*/
			}
			.flower:hover .f1{
				transform: rotate(40deg);
			}
			.flower:hover .f2{
				transform: rotate(60deg);
			}
			.flower:hover .f3{
				transform: rotate(80deg);
			}
			.flower:hover .f4{
				transform: rotate(100deg);
			}
			.flower:hover .f5{
				transform: rotate(120deg);
			}
			.flower:hover .f6{
				transform: rotate(140deg);
			}
			.flower:hover .f7{
				transform: rotate(160deg);
			}
			.flower:hover .f8{
				transform: rotate(180deg);
			}
			.flower:hover .f9{
				transform: rotate(200deg);
			}
			.flower:hover .f10{
				transform: rotate(220deg);
			}
			.flower:hover .f11{
				transform: rotate(240deg);
			}
			.flower:hover .f12{
				transform: rotate(260deg);
			}
			.flower:hover .f13{
				transform: rotate(280deg);
			}

			.flower:hover .f14{
				transform: rotate(300deg);
			}

			.flower:hover .f15{
				transform: rotate(320deg);
			}

			.flower:hover .f16{
				transform: rotate(340deg);
			}
			.flower:hover .f17{
				transform: rotate(360deg);
			}


	</style>
</head>



<body>

	<div class="flower">

		<div class="f0">
	
		</div>
		<div class="f1"></div>
		<div class="f2"></div>
		<div class="f3"></div>
		<div class="f4"></div>
		<div class="f5"></div>
		<div class="f6"></div>
		<div class="f7"></div>
		<div class="f8"></div>
		<div class="f9"></div>
		<div class="f10"></div>
		<div class="f11"></div>
		<div class="f12"></div>
		<div class="f13"></div>
		<div class="f14"></div>
		<div class="f15"></div>
		<div class="f16"></div>
		<div class="f17"></div>



	</div>
	
</body>

</html>

2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>eleme</title>
	<style type="text/css">
	/*设置动画*/
	@keyframes run{
				0%{
					margin-left: 0px;
				}
				49.9%{
					transform: rotateY(0deg);/*3D旋转*/
				}
				50%{
					transform: rotateY(180deg);
					margin-left: 500px;
				}
				99.9%{
					transform: rotateY(180deg);
				}
				100%{
					transform: rotateY(0deg);
					margin-left: 0px;
				}	
			}

	div{height: 300px;width: 600px;background:url(img/bg.png);

	    
	}
	img{margin-top:260px; animation: run 3s linear  infinite;}
	</style>
	
</head>
<body>
	<div>
		<img src="img/car.png">
	</div>
</body>
</html>

隔壁店小二

关注

7
点赞
踩
58

收藏

觉得还不错? 一键收藏
1
评论
web动画效果

简单记录一下网页动态效果效果图直接上代码 1.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Flower&lt;/title&gt; &lt;style type="text/css&
复制链接

扫一扫