css-doodle实现螺旋上升动画效果代码-html代码-BFW代码库

css-doodle实现螺旋上升动画效果代码

代码语言：html

所属分类：动画

代码描述：css-doodle实现螺旋上升动画效果代码

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

<html>
<head>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            background: #261c33;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center
        }
    </style>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/css-doodle.0.18.js"></script>
</head>
<body>
    <css-doodle>
        :doodle {
        @grid: 45x1 / 40vmin;
        position: relative;
        z-index: 1;
        }
        :container {
        transform: translate(50%, 33vmin)
        }
        :after, :before {
        content: '';
        @place-cell: center;
        @size: 100%;
        background: radial-gradient(
        @p(#FFFDE1, #FB3569) @r(70%),
        transparent 0
        )
        @pn(30% 50%, 70% 50%, 50% 60%) /
        @r(.1vmin, 5vmin) @lr()
        no-repeat;
        }

        @place-cell: centerr;
        @size: 100%;

        will-change: transform;
       .........完整代码请登录后点击上方下载按钮下载查看