鼠标移入时，一个div从另外一个div过渡飞出动效

最新推荐文章于 2024-04-03 04:22:37 发布

lucky_girl_girl

最新推荐文章于 2024-04-03 04:22:37 发布

阅读量333

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/lucky_girl_girl/article/details/120901870

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.div1{
			width:100px;
			height:100px;
			background-color: skyblue;
			position:absolute;
			left:120px;
			top:8px; 
			z-index:999;
			border-radius: 50px;
		}
		.div2,.div3{
			width:50px;
			height:50px;
			background-color: pink;
			opacity: 0;
			position:absolute;
			left:120px;
			top:8px; 
			transition:ease 5s;
			border-radius:25px;
		}
		.div1:hover+.div2{
			opacity: 1;
			transform: translateX(120px) translateY(80px);
		}
		.div1:hover~.div3{
			opacity: 1;
			transform: translateX(-73px) translateY(80px);
		}
	</style>
	<body>
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</body>
</html>

lucky_girl_girl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标移入时，一个div从另外一个div过渡飞出动效

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> .div1{ width:100px; height:100px; background-color: skyblue; position:absolute; left:120px; top:
复制链接

扫一扫