单个div+css实现魔术棒释放彩虹效果代码-html代码-BFW代码库

单个div+css实现魔术棒释放彩虹效果代码

代码语言：html

代码描述：仅仅使用一个div结合css代码布局实现魔术棒释放彩虹效果

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          min-height: 400px;
          height: 100vh;
          position: relative;
          background-color: #bbb;
          overflow: hidden;
          font-size: 10px;
        }
        div {
          position: absolute;
          left: 50%;
          top: 50%;
        }
        div:before,
        div:after {
          display: block;
          content: '';
          position: absolute;
        }
        #magic {
          width: 50%;
          height: 240px;
          left: -1em;
          bottom: 0;
          top: auto;
          background-repeat: no-repeat;
          background-image: radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%);
          background-size: 0.5em 0.5em, 0.6em 0.6em, 1em 1em, 0.6em 0.6em, 0.7em 0.7em;
          background-position: right 6em top 6em, right 12em top 8em, right 2em top 8em, right 4em top 10em, right 2.4em top 13em;
          border-top-right-radius: 25em 10em;
          box-shadow: 1em -2em 0 #dc143c, 1em -4em 0 #ffa500, 1em -6em 0 #ffd700, 1em -8em 0 #2e8b57, 1em -10em 0 #6495ed, 1em -12em 0 #639;
        }
        #magic:before {
          width: 100%;
          height: 100%;
          left: auto;
          right: calc((100% + 2em) * -1);
          bottom: 0;
          background-repeat: no-repeat;
          background-image: radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(2.........完整代码请登录后点击上方下载按钮下载查看