网页预览
预览地址： http://junior-l.gitee.io/love-tunnel
源码下载
下载地址：https://t.doruo.cn/EFVXqJ1e
下载之后解压将 index.html 文件使用浏览器打开
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body id="m_body">
<css-doodle use="var(--rule)"></css-doodle>
<script src="css-doodle.min.js"></script>
<script>
function remove_attr() {
let c = document.getElementsByTagName('css-doodle')[0].doodle.lastChild.firstChild;
c.style.boxShadow = 'none';
}
remove_attr()
</script>
</body>
</html>
css部分
html, body {
width: 100%;
height: 100%;
margin: 0;
background: #270F34;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
contain: content;
overflow: clip;
}
css-doodle {
--color: @p(#51eaea, #fffde1, #ff9d76, #FB3569);
--rule: (
:doodle {
@grid: 30x1 / 18vmin;
--deg: @p(-180deg, 180deg);
}
:container {
perspective: 30vmin;
}
:after, :before {
content: '';
background: var(--color);
@place-cell: @r(100%) @r(100%);
@size: @r(6px);
@shape: heart;
}
@place-cell: center;
@size: 100%;
box-shadow: @m2(0 0 50px var(--color));
background: @m100(
radial-gradient(var(--color) 50%, transparent 0)
@r(-20%, 120%) @r(-20%, 100%) / 1px 1px
no-repeat
);
will-change: transform, opacity;
animation: scale-up 12s linear infinite;
animation-delay: calc(-12s / @I * @i);
@keyframes scale-up {
0%, 95.01%, 100% {
transform: translateZ(0) rotate(0);
opacity: 0;
}
10% {
opacity: 1;
}
95% {
transform:
translateZ(35vmin) rotateZ(@var(--deg));
}
}
)
}
评论区