动画悬浮练习

最新推荐文章于 2022-09-19 15:14:19 发布

DaZhangWei1

最新推荐文章于 2022-09-19 15:14:19 发布

阅读量173

点赞数

分类专栏：悬浮

本文链接：https://blog.csdn.net/weixin_44017261/article/details/85342421

版权

悬浮专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.box,.box3{
				width: 900px;
				height: 600px;
				background: black;
				position: relative;
				float: left;
				margin: 0px 20px;
				overflow: hidden;
				animation: box 2s linear alternate infinite;
			}
			.box1,.box2{
				width: 300px;
				height: 100px;
				background: red;
				position: absolute;
				margin-top: -50px;
				top: 50%;
				opacity: 0;	
				animation: box1 2s linear alternate infinite;
			}
			.box2{
				right: 0;		
			}
			.box:hover div{
				transform: scale(0.1);
				opacity: 2;
				border-radius: 100px;
			}
			@-webkit-keyframes box1{
				from{
					transform: scale(0.1);
				}
				30%{
					transform: translateY(50px 50px);
					border-radius: 100%;
					/*transform: scale(0.8);*/
				}
				to{
					transform: scale(1);
				}
			}
			@-webkit-keyframes box{
				from{
					transform: translatey(20px);
				}
				to{
					transform: translatey(200px);
				}
			}
            .box4{
            	height: 200px; 
            	background: blueviolet;
            	opacity: 0;
            	
            	animation: box5 2s linear alternate infinite;
            	}
            .box3:hover div{
            	opacity: 2;
            }
            @-webkit-keyframes box5{
            	from{
            		transform: translateY(-222px);
            	}
            	to{
            		transform: translateY(0px);
            	}
            }
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="box3">
			<div class="box4"></div>
		</div>
	</body>
</html>

DaZhangWei1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画悬浮练习

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ padding: 0px; margin:
复制链接

扫一扫