一个div+css布局实现敏捷狐狸效果代码

代码语言:html

所属分类:布局界面

代码描述:一个div+css布局实现敏捷狐狸效果代码

代码标签: 实现 敏捷 狐狸 效果

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          min-height: 300px;
          height: 100vh;
          position: relative;
          background-color: #ff6347;
          text-align: center;
        }
        div {
          position: absolute;
          left: 50%;
          top: 50%;
        }
        div:before,
        div:after {
          display: block;
          content: '';
          position: absolute;
        }
        #quick {
          width: 18em;
          height: 9em;
          margin-left: -9em;
          margin-top: -1.5em;
          background-repeat: no-repeat;
          background-image: radial-gradient(circle at 50% 13em, rgba(160,82,45,0) 60%, #a0522d 60.1%), radial-gradient(ellipse at 100% 120%, transparent 65%, #703a20 65.5%), radial-gradient(ellipse at 0 120%, transparent 65%, #703a20 65.5%), radial-gradient(circle, black 50%, rgba(0,0,0,0) 51%), radial-gradient(circle, black 50%, rgba(0,0,0,0) 51%), radial-gradient(ellipse, black 50%, rgba(0,0,0,0) 52%), radial-gradient(ellipse, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 51%), radial-gradient(ellipse at 50% 20%, #f5deb3 60%, rgba(255,255,255,0) 61%), radial-gradient(circle, #daa520 50%, rgba(218,165,32,0) 51%), radial-gradient(ellipse at 50% 20%, #dc143c 60%, rgba(220,20,60,0) 61%), radial-gradient(ellipse at 50% 80%, #f5deb3 60%, rgba(255,255,255,0) 61%), radial-gradient(ellipse at 0 100%, #f5deb3 60%, rgba(255,255,255,0) 61%), radial-gradient(ellipse at 100% 100%, #f5deb3 60%, rgba(255,255,255,0) 61%), radial-gradient(ellipse at 60% 80%, #f5deb3 60%, rgba(255,255,255,0) 61%), radial-gradient(ellipse at 20% 80%, #f5deb3 60%, rgba(255,255,255,0) 61%);
          background-size: 100% 100%, 40% 80%, 40% 80%, 0.4em 0.4em, 0.4em 0.4em, 1.2em 0.8em, 2.8em 2em, 4.9em 2.5em, 1em 1e.........完整代码请登录后点击上方下载按钮下载查看

网友评论0