前端——水滴实现

最新推荐文章于 2024-04-26 16:25:45 发布

我是一个小稻米

最新推荐文章于 2024-04-26 16:25:45 发布

阅读量219

点赞数

分类专栏：前端文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_44669966/article/details/124842704

版权

前端专栏收录该内容

49 篇文章 2 订阅

订阅专栏

用到的主要css属性：
box-shadow
border-radius
伪元素
animation

请添加图片描述

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: luying
 * @Date: 2021-11-20 15:17:35
 * @LastEditors: luying
 * @LastEditTime: 2022-05-18 14:56:47
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	body {

	}
	.drops {
		height: 100vh;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: linear-gradient(to bottom right , #A9F99E, #46ADD5);

	}
	.drop {
		height: 200px;
		width: 200px;
		position: absolute;
		background: transparent;
		border-radius: 56% 44% 53% 47% / 38% 46% 54% 62% ; 
		box-shadow: inset 5px 5px 20px rgba(0, 0, 0, 0.05),
					15px 25px 10px rgba(0, 0, 0, 0.01),
					15px 20px 20px rgba(0, 0, 0, 0.05),
					inset -10px -10px 15px rgba(255, 255, 255, 0.9);
		animation: myfirst 2s linear infinite;
	}
	@keyframes myfirst {
		0%{
			border-radius: 56% 44% 53% 47% / 38% 46% 54% 62% ;
		}
		20% {
			border-radius: 46% 54% 65% 35% / 30% 39% 61% 70% ;
		}
		40% {
			border-radius: 60% 40% 77% 23% / 60% 23% 77% 40% ;
		}
		50% {
			border-radius: 62% 38% 66% 34% / 60% 23% 77% 40% ;
		}
		60% {
			border-radius: 62% 38% 36% 64% / 60% 46% 54% 40%  ;	
		}
		80% {
			border-radius: 46% 54% 65% 35% / 30% 39% 61% 70% ;
		}
		100% {
			border-radius: 56% 44% 53% 47% / 38% 46% 54% 62% ;
		}
	}
	/* .drop:hover {
		border-radius: 27% 73% 26% 74% / 35% 73% 27% 65%; 
	} */
	.drop::before {
		content: '';
		width: 20px;
		height: 20px;
		position: absolute;
		top: 40px;
		left: 40px;
		background: #fff;
		border-radius: 48% 52% 59% 41% / 48% 22% 78% 52% ;
	}
	.drop::after {
		content: '';
		width: 10px;
		height: 10px;
		position: absolute;
		top: 35px;
		left: 70px;
		background: #fff;
		border-radius: 27% 73% 22% 78% / 48% 52% 48% 52% ;
	}
	.drop:nth-child(2) {
		transform: scale(0.3) translate(400px, 400px);
	}
</style>
<body>
	<div class="drops">
		<div class="drop"></div>
		<div class="drop"></div>
	</div>
</body>
</html>

我是一个小稻米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端——水滴实现

用到的主要css属性：box-shadowborder-radius伪元素animation<!DOCTYPE html><html lang="en"&.
复制链接

扫一扫