css布局实现红色气球下的老鼠效果代码-html代码-BFW代码库

css布局实现红色气球下的老鼠效果代码

代码语言：html

代码描述：css布局实现红色气球下的老鼠效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          min-height: 400px;
          height: 100vh;
          position: relative;
          background-color: white;
        }
        div {
          position: absolute;
          left: 50%;
          top: 50%;
        }
        div::before {
          display: block;
          content: '';
          position: absolute;
        }
        #rise {
          width: 200px;
          height: 310px;
          margin-left: -100px;
          margin-top: -155px;
          background: linear-gradient(black, black) 50% 6.5em/1.6em 0.1em, linear-gradient(125deg, rgba(178,34,34,0) 50%, #b22222 51%) calc(50% - 0.4em) 6em/0.8em 1em, linear-gradient(-125deg, rgba(178,34,34,0) 50%, #b22222 51%) calc(50% + 0.4em) 6em/0.8em 1em, linear-gradient(125deg, rgba(128,0,0,0) 50%, #800000 51%) calc(50% - 0.7em) 5.8em/1.5em 1.4em, linear-gradient(-125deg, rgba(128,0,0,0) 50%, #800000 51%) calc(50% + 0.7em) 5.8em/1.5em 1.4em, linear-gradient(black, black) left calc(50% + 0.2em) bottom 5.05em/5em 0.1em, linear-gradient(173deg, rgba(0,0,0,0) 50%, black 50.5%, black 51.5%, rgba(0,0,0,0) 52%) left calc(50% + 0.1em) bottom 2.6em/5.2em 5em, radial-gradient(circle, #ff9cae 50%, rgba(255,192,203,0) 51%) left calc(50% - 4.7em) bottom 7.1em/1.2em 1.2em, radial-gradient(circle, #222 50%, rgba(0,0,0,0) 51%) left calc(50% - 0.4em) bottom 8.4em/0.4em 0.4em, radial-gradient(circle, #222 50%, rgba(0,0,0,0) 51%) left calc(50% + 0.2em) bottom 8.2em/0.4em 0.4em, radial-gradient(circle at 50% 70%, #555 50%, rgba(0,0,0,0) 51%) left calc(50% + 1.2em) bottom 9.2em/1.2em 1.2em, radial-gradient(circle at 50% 70%, #222 50%, rgba(0,0,0,0) 51%) left calc(50% + 1.2em) bottom 9em/1.8em 1.8em, radial-gradient(circle at 0 50%, white 55%, rgba(255,255,255,0) 55.5%) left calc(50% + 0.6em) bottom 7.7em/1em 1.3em, linear-gradient(159deg, rgba(255,255,255,0) 50%, white 51%) left calc(50% - 2.3em) bottom 7.7em/5em 1.3em, linear-gradient(159deg, rgba(153,153,153,0) 50%, #999 51%) left calc(50% - 2.9em) bottom 7.5em/6.2em 1.7em, radial-gradient(circle at 50% 0, white 40%, #999 40.5%, #999 70%, rgba(153,153,153,0) 70.5%) left calc(50% - 3.1em) bottom 7.15em/0.8em 0.4em, radial-gradient(circle at 50% 0, white 40%, #999 40.5%, #999 70%, rgba(153,153,153,0) 70.5%) left calc(50% - 2.2em) bottom 7.15em/0.8em 0.4em, linear-gradient(#ff9cae, #ff9cae) left calc(50% - 4em) bottom 6.5em/0.2em 0.6em, linear-gradient(#ff9cae, #ff9cae) left calc(50% - 4.25em) bottom 6.4em/0.7em 0.2em, linear-gradient(45deg, rgba(255,192,203,0) 35%, #ff9cae 35.5%, #ff9cae 65%, rgba(255,192,203,0) 65.5%) left calc(50% - 4.3em) bottom 6.5em/0.5em 0.5em, linear-gradient(#ff9cae, #ff9cae) left calc(50% + 4.4em) bottom 6.6em/0.2em 0.6em, linear-gradient(#ff9cae, #ff9cae) left calc(50% + 4.65em) bottom 6.4em/0.7em 0.2em, linear-gradient(-45deg, rgba(255,192,203,0) 35%, #ff9cae 35.5%, #ff9cae 65%, rgba(255,192,203,0) 65.5%) left calc(50% + 4.7em) bottom 6.5em/0.5em 0.5em, linear-gradient(-160deg, #ccc 40%, rgba(204,204,204,0) 40.5%) left calc(50% - 2.5em) bottom 5.1em/2.5em 1.4em, linear-gradient(-160deg, #999 40%, rgba(204,204,204,0) 40.5%) left calc(50% - 2.8em) bottom 4.6em/2.5em 2.1em, linear-gradient(160deg, #ccc 40%, rgba(204,204,204,0) 40.5%) left calc(50% + 2.9em) bottom 5.1em/2.5em 1.4em, linear-gradient(160de.........完整代码请登录后点击上方下载按钮下载查看