CSS 水滴效果

特创数字科技

于 2024-01-07 18:15:53 发布

阅读量907

点赞数 13

分类专栏： CSS动画文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_54226053/article/details/135442681

版权

CSS动画专栏收录该内容

74 篇文章

订阅专栏

本文详细介绍了如何使用CSS技术实现逼真的水滴效果，包括透明度、折射、反射等关键属性的应用，通过实例代码展示从简单到复杂的水滴动画效果，适合前端开发者提升CSS技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <template>
    	<view class="c" :style="{top:elementStyle.top , left:elementStyle.left} ">
    		<view class="drop drop1"></view>
    	</view>

    </template>

    <script setup>
    	import {
    		onMounted,
    		ref
    	} from 'vue';
    	const elementStyle = ref({
    		top: '300px',
    		left: '500px'
    	})

    	onMounted(() => {
    		// 获取需要跟随鼠标移动的元素
    		const followMouseElement = ''
    		// 监听鼠标移动事件
    		document.addEventListener('mousemove', (event) => {
    			// 获取鼠标相对于页面的位置
    			const left = event.pageX + 'px';
    			const top = event.pageY + 'px';

    			elementStyle.value = {
    				top,
    				left
    			}

    			// console.log("鼠标", elementStyle.value)
    		});
    	})
    </script>

    <style>
    	body {
    		display: grid;
    		/* 使用网格布局 */
    		/* place-items: center; */
    		/* 水平和垂直居中对齐 */
    		background: #318CFE;
    		/* 背景颜色为深蓝色 */
    	}

    	.c {
    		position: relative;
    		/* 相对定位 */
    		/* margin-top: 300px; */
    		/* 顶部外边距为300像素 */
    	}

    	.drop {
    		cursor: grab;
    		/* 鼠标指针 */
    		position: absolute;
    		/* 绝对定位 */
    		height: 200px;
    		/* 高度为200像素 */
    		width: 200px;
    		/* 宽度为200像素 */
    		background: #54ABFB;
    		/* 背景颜色为浅蓝色 */
    		border-radius: 60% 49% 48% 52% / 62% 44% 56% 50%;
    		/* 使用不同的圆角半径创建椭圆形 */
    		opacity: 0.8;
    		/* 不透明度为0.8 */
    		border: 2px solid #3d93ff;
    		/* 边框为2像素宽的深蓝色 */
    	}

    	.drop::before {
    		content: "";
    		/* 伪元素内容为空 */
    		position: absolute;
    		/* 绝对定位 */
    		height: 100%;
    		/* 高度为父元素高度 */
    		width: 100%;
    		/* 宽度为父元素宽度 */
    		background: #318CFE;
    		/* 背景颜色为深蓝色 */
    		border-radius: 60% 49% 48% 52% / 62% 45% 56% 50%;
    		/* 使用不同的圆角半径创建椭圆形 */
    		box-shadow: -20px 30px 16px #1B6CFB, -40px 60px 32px #1b6cfb, inset -6px 6px 10px #1B6CFB, inset 2px 6px 10px #1a74e5, inset 20px -20px 22px white, inset 40px -40px 44px #a8ceff;
    		/* 添加投影效果 */
    	}

    	.drop::after {
    		content: "";
    		/* 伪元素内容为空 */
    		position: absolute;
    		/* 绝对定位 */
    		height: 40px;
    		/* 高度为40像素 */
    		width: 40px;
    		/* 宽度为40像素 */
    		background: #E6FDFB;
    		/* 背景颜色为浅蓝色 */
    		border-radius: 50% 56% 46% 54% / 36% 50% 50% 64%;
    		/* 使用不同的圆角半径创建椭圆形 */
    		left: 130px;
    		/* 相对于父元素左侧的偏移量为130像素 */
    		top: 40px;
    		/* 相对于父元素顶部的偏移量为40像素 */
    		box-shadow: 16px 40px 0 -10px white;
    		/* 添加投影效果 */
    		opacity: 0.8;
    		/* 不透明度为0.8 */
    	}

    	.drop1 {
    		left: -100px;
    		/* 相对于父元素左侧的偏移量为-100像素 */
    		top: -50px;
    		/* 相对于父元素顶部的偏移量为-50像素 */
    	}
    </style>