css实现弹出层旋转阴影背景动画效果代码

代码语言:html

所属分类:弹出层

代码描述:css实现弹出层旋转阴影背景动画效果代码

代码标签: css 弹出层 旋转 阴影 背景 动画

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        *:not(head, script, svg, svg *),
    *:not(head, script, svg, svg *)::before,
    *:not(head, script, svg, svg *)::after {
      all: unset;
      box-sizing: border-box;
      font-family: sans-serif;
    }
    
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      margin: 0;
    
      backface-visibility: hidden; /* Force GPU Usage */
    }
    
    #box {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 80vmin;
      height: 80vmin;
      background: white;
      padding: 5vmin;
      border-radius: 2vmin;
    }
    
    #box h2 {
      font-size: 6vmin;
      line-height: 110%;
      font-weight: 600;
      color: black;
    }
    
    #box p {
      font-size: 4vmin;
      text-align: center;
      line-height: 150%;
      font-weight: 400;
      color: black;.........完整代码请登录后点击上方下载按钮下载查看

网友评论0