一个div实现一个跳舞的女孩效果-html代码-BFW代码库

代码语言：html

代码描述：一个div实现一个跳舞的女孩效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        .joy {

            background:

            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 17.25em 16.75em/3em 1em,
            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 17.25em 17.25em/3.5em 1em,

            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 16em 17.75em/1em 3em,
            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 16.75em 17.5em/1em 3.5em,

            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 16em 15.25em/1em 3em,
            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 16.75em 15em/1em 3.5em,



            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 18.75em 26.75em/3em 1em,
            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 18.75em 27.25em/3.5em 1em,

            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 16em 26.75em/3em 1em,
            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 16em 27.25em/3.5em 1em,

            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 17.5em 27.75em/1em 3em,
            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 18.25em 27.5em/1em 3.5em,

            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 17.5em 25.25em/1em 3em,
            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 18.25em 25em/1em 3.5em,



            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 19em 19.75em/3em 1em,
            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 19em 20.25em/3.5em 1em,

            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 20.5em 20.75em/1em 3em,
            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 21.25em 20.5em/1em 3.5em,

            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 20.5em 18.25em/1em 3em,
            radial-gradient(40% 40% at 20% 20%, rgb(211,211,211) 48% , rgba(0,0,0,0) 52%) 21.25em 18em/1em 3.5em,


            radial-gradient(40% 40% at 20% 20%, rgb(245,218,160) 48% , rgba(0,0,0,0) 52%) 23.25em 9.5em/2em 4.5em,
            linear-gradient(90deg ,rgb(245,218,160) 49%, rgba(0,0,0,0) 51%) 23.5em 8.85em /1.5em 2.5em,

            linear-gradient(90deg ,#ffb6c1 49%, rgba(0,0,0,0) 51%) 19.5em 8.9em /8em 0.3em,
            linear-gradient(90deg ,rgb(245,218,160) 49%, rgba(0,0,0,0) 51%) 19.75em 8.15em /7.25em 0.9em,

            linear-gradient(90deg ,rgb(255,255,255) 49%, rgba(0,0,0,0) 51%) 19.75em 9.15em /7.25em 0.5em,
            radial-gradient(40% 40% at 20% 20%, #000 49% , rgba(0,0,0,0) 51%) 19.5em 8.6em/11.5em 5.75em,
            radial-gradient(40% 40% at 20% 20%, #ffb6c1 49% , rgba(0,0,0,0) 51%) 19.25em 8.35em/11.75em 7em,

            radial-gradient(40% 40% at 20% 20%, rgb(245,218,160) 49% , rgba(0,0,0,0) 51%) 21.15em 8.3em/8em 5em,
            radial-gradient(40% 40% at 20% 20%, #000 49% , rgba(0,0,0,0) 51%) 21.35em 8.4em/8em 5em,



            radial-gradient(40% 40% at 20% 20%, rgb(0,0,0) 48% , rgba(0,0,0,0) 52%) 23.75em 6.75em/3.5em 3.75em,



            radial-gradient(40% 40% at 20% 20%, rgb(0,0,255) 48% , rgba(0,0,0,0) 52%) 23.5em 6.25em/5em 5em,

            radial-gradient(40% 40% at 20% 20%, rgb(255,255,255) 48% , rgba(0,0,0,0) 52%) 23.15em 5.75em/7.25em 6.25em,


            radial-gradient(40% 40% at 20% 20%, rgb(0,0,205) 48% , rgba(0,0,0,0) 52%) 23em 5.5em/8em 7em,



            radial-gradient(40% 40% at 20% 20%, rgb(245,218,160) 46% , rgba(0,0,0,0) 54%) 5.25em 5.75em/9.5em 6em,
            radial-gradient(40% 40% at 20% 20%, rgb(245,218,160) 46% , rgba(0,0,0,0) 54%) 2.25em 6em/9.5em 1.5em,
            radial-gradient(40% 40% at 20% 20%, rgb(245,218,160) 46% , rgba(0,0,0,0) 54%) 2.5em 6.75em/9.5em 1.5em,



            linear-gradient(90deg ,rgb(255,255,255) 49%, rgba(0,0,0,0) 51%) 23.5em 13.25em /23em 1.35em,
            radial-gradient(40% 40% at 20% 20%, rgb(255,255,255) 49% , rgba(0,0,0,0) 51%) 22.25em 16.15em/37em 10em,
            radial-gradient(40% 40% at 20% 20%, rgb(245,218,160) 49% , rgba(0,0,0,0) 51%) 21.75em 13.5em/38em 15em,



            radial-gradient(40% 40% at 20% 20%, rgb(245,218,160) 49% , rgba(0,0,0,0) 51%) 18em 3.5em/23em 22em,
            radial-gradient(40% 40% at 20% 20%, rgb(0,0,255) 49% , rgba(0,0,0,0) 51%) 18.25em 2.5em/26em 24em,





            radial-gradient(40% 40% at 20% 20%, rgb(255,255,255) 49% , rgba(0,0,0,0) 51%) 11.75em 20.5em/10em 24em,
            radial-gradient(40% 40% at 20% 20%, rgb(255,255,255) 49% , rgba(0,0,0,0) 51%) 22em 12em/25em 42em,
            radial-gradient(40% 40% at 20% 20%, rgb(240,245,0) 49% , rgba(0,0,0,0) 51%) 13em 22em/35em 26em,
            radial-gradient(40% 40% at 20% 20%, rgb(240,245,0) 49% , rgba(0,0,0,0) 51%) 15em 12em/25em 40em,





            radial-gradient(40% 40% at 20% 20%, rgb(245,218,160) 49% , rgba(0,0,0,0) 51%) 14.75em 41em/6em 3em,
            linear-gradient(90deg ,rgb(255,255,255) 49%, rgba(0,0,0,0) 51%) 19.5em 31em /5em 9em,
            linear-gradient(90deg ,rgb(255,255,255) 49%, rgba(0,0,0,0) 51%) 16.5em 42.25em /3em 2em,
            radial-gradient(40% 40% at 20% 20%, rgb(255,255,255) 49% , rgba(0,0,0,0) 51%) 13.15em 28em/10em 34em,
            radial-gradient(40% 40% at 20% 20%, rgb(245,218,160) 49% , rgba(0,0,0,0) 51%) 15em 28em/12em 37em,



            radial-gradient(40% 40% at 20% 20%, rgb(255,255,255) 49% , rgba(0,0,0,0) 51%) 10em 32em/56em 34em,
            radial-gradient(40% 40% at 20% 20%, rgb(255,255,255) 49% , rgba(0,0,0,0) 51%) 20em 35em/27em 24em,
            radial-gradient(40% 40% at 20% 20%, rgb(245,218,160) 49% , rgba(0,0,0,0) 51%) 20em 29em/38em 38em;


            background-repeat: no-repeat;
            font-size: 10px;
            width: 40em;
            height: 50em;
            margin-top: 100px;
            margin-left: 500px;
        }

        .joy:after {
            content: "";
            position: absolute;
            background:




            radial-gradient(40% 40% at 20% 20%, #00bfff 46% , rgba(0,0,0,0) 54%) 16.25em 2em/1em 9em,
            radial-gradient(40% 40% at 20% 20%, rgb(0,0,255) 46% , rgba(0,0,0,0) 54%) 16.75em 1em/1.25em 9em,


            radial-gradient(40% 40% at 20% 20%, #00bfff 46% , rgba(0,0,0,0) 54%) 19em -1.5em/1em 9em,
            radial-gradient(40% 40% at 20% 20%, rgb(0,0,255) 46% , rgba(0,0,0,0) 54%) 19.5em -1.5em/1.25em 9em,
            radial-gradient(40% 40% at 20% 20%, #00bfff 46% , rgba(0,0,0,0) 54%) 20em -1.5em/1em 9em,
            radial-gradient(40% 40% at 20% 20%, rgb(0,0,255) 46% , rgba(0,0,0,0) 54%) 20.5em -1.5em/1.25em 9em,


            radial-gradient(40% 40% at 20% 20%, #00bfff 46% , rgba(0,0,0,0) 54%) 21.5em -1.5em/1em 9em,
            radial-gradient(40% 40% at 20% 20%, rgb(0,0,255) 46% , rgba(0,0,0,0) 54%) 22em -1.5em/1.25em 9em,
            radial-gradient(40% 40% at 20% 20%, #00bfff 46% , rgba(0,0,0,0) 54%) 23em -1.5em/1em 9em,
            radial-gradient(40% 40% at 20% 20%, rgb(0,0,255) 46% , rgba(0,0,0,0) 54%) 23.5em -1.5em/1.25em 9em,


            radial-gradient(40% 40% at 20% 20%, #00bfff 46% , rgba(0,0,0,0) 54%) 24.25em 0.5em/1em 9em,
            radial-gradient(40% 40% .........完整代码请登录后点击上方下载按钮下载查看