css+div实现月亮闹鬼动画效果代码

代码语言:html

所属分类:动画

代码描述:css+div实现月亮闹鬼动画效果代码

代码标签: css div 月亮 闹鬼 动画

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          min-height: 400px;
          height: 100vh;
          position: relative;
          background-color: #222;
        }
        div {
          position: absolute;
          left: 50%;
          top: 50%;
        }
        div::before,
        div::after {
          display: block;
          content: '';
          position: absolute;
        }
        @media (max-width: 400px) {
          div:not(.no-scale) {
            transform: scale(0.8);
          }
        }
        #haunted {
          width: 200px;
          height: 200px;
          margin-left: -100px;
          margin-top: -100px;
          background: radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 64% 7%/1em 1em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 63.5% 6.5%/1.1em 1.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 22% 24%/3em 3em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 21% 23%/3.1em 3.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 74% 34%/2em 2em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 73.5% 33.5%/2.1em 2.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 14% 57%/1em 1em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 13.5% 56.5%/1.1em 1.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 26% 65%/1em 1em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 25.5% 64.5%/1.1em 1.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 54% 54%/1em 1em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 53.5% 53.5%/1.1em 1.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 85% 54%/1em 1em, radial-gradient(circle, #ccc 50%, rgba(204,204,204,0) 51%) 86% 54.5%/1.2em 1.2em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 44% 94%/2.8em 2.8em, radial-gradient(circle, #ccc 50%, rgba(204,204,204,0) 51%) 44% 96%/3.1em 3.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 86% 75%/1em 1em, radial-gradient(circl.........完整代码请登录后点击上方下载按钮下载查看

网友评论0