css-doodle实现方块洞穴立体爱心穿梭动画效果代码-html代码-BFW代码库

css-doodle实现方块洞穴立体爱心穿梭动画效果代码

代码语言：html

所属分类：动画

代码描述：css-doodle实现方块洞穴立体爱心穿梭动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    html, body { 
  width: 100%;
  height: 100%; 
  margin: 0;
  background: #270F34; 
  overflow: hidden; 
  display: flex; 
  align-items: center; 
  justify-content: center
}
</style>


</head>

<body>

    <style>
        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: @m(2, (0 0 50px var(--.........完整代码请登录后点击上方下载按钮下载查看