css-doodle动态拟态玻璃效果

最新推荐文章于 2024-07-08 17:09:50 发布

摸鱼的张三

最新推荐文章于 2024-07-08 17:09:50 发布

阅读量279

点赞数 4

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_42924837/article/details/139930543

版权

上效果

上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			html,
			body {
				position: relative;
				margin: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				background-color: #fff;

			}

			body::after {
				content: "";
				position: absolute;
				top: -100%;
				left: -100%;
				right: -100%;
				bottom: -100%;
				background-color: hsl(205deg 20% 94% / 36%);

				backdrop-filter: blur(100px);
				z-index: 1;
			}
		</style>


		<css-doodle>
			:doodle {
			@grid: 1x20 / 100vmin;
			}
			@place-cell: center;
			width: @rand(60vmin, 100vmin);
			height: @rand(60vmin, 100vmin);
			transform: translate(@rand(-120%, 120%), @rand(-80%, 80%)) scale(@rand(.8, 2.8)) skew(@rand(45deg));
			clip-path: polygon(
			@r(0, 30%) @r(0, 50%),
			@r(30%, 60%) @r(0%, 30%),
			@r(60%, 100%) @r(0%, 50%),
			@r(60%, 100%) @r(50%, 100%),
			@r(30%, 60%) @r(60%, 100%),
			@r(0, 30%) @r(60%, 100%)
			);
			background: @pick(#f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4, #03a9f4,
			#2196f3, #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf, #e136eb, #f57c23, #32ed39);
			opacity: @rand(.5, .9);
			position: relative;
			top: @rand(-80%, 80%);
			left: @rand(-80%, 80%);
			animation: colorChange @rand(6.1s, 26.1s) infinite @rand(-.5s, -2.5s) linear alternate;
			@keyframes colorChange {
			100% {
			left: 0;
			top: 0;
			filter: hue-rotate(360deg);
			}
			}

		</css-doodle>

	</body>
	<script src="http://117.83.152.189:8081/sw_Scoring/js/interact.min.js"></script>
	<script>
		const positionChat = {
			"x": 0,
			"y": 0
		}

		document.getElementsByClassName("main")[0]
			.style.transform =
			`translate(${positionChat.x}px, ${positionChat.y}px)`
		interact('.main').draggable({

			listeners: {
				move(event) {
					console.log(event);
					positionChat.x += event.dx
					positionChat.y += event.dy

					document.getElementsByClassName("main")[0]
						.style.transform =
						`translate(${positionChat.x}px, ${positionChat.y}px)`
					localStorage.targetElementPosition = JSON.stringify(positionChat)
				},
			}

		})
	</script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.3.0/css-doodle.min.js"></script>
	<script>
		const doodle = document.querySelector('css-doodle');

		document.addEventListener('click', function(e) {
			doodle.update();
		});
	</script>

</html>

backdrop-filter 就是修改模糊的数值

const doodle = document.querySelector('css-doodle');

       document.addEventListener('click', function(e) {
           doodle.update(); //点击就修改
       });