css实现单个div在a4纸张上用印章盖章动画效果代码-html代码-BFW代码库

css实现单个div在a4纸张上用印章盖章动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现单个div在a4纸张上用印章盖章动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @charset "UTF-8";
        @import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Special+Elite&display=swap");
        body {
          display: grid;
          place-items: center;
          height: 100vh;
          overflow: hidden;
          background: radial-gradient(circle at bottom, #444, #000);
        }
        body:after {
          content: "How to Animate with CSS \a by Cobra Winfrey";
          white-space: pre;
          width: 800px;
          text-align: center;
          font-family: "Cedarville Cursive";
          position: absolute;
          font-size: 30px;
          top: calc(50% + 40px);
          left: calc(50% + 20px);
          z-index: 0;
          color: #666;
          line-height: 1.25;
          transform: translate(-50%, 0px) rotate(-5deg);
        }
        body:before {
          content: "";
          position: absolute;
          width: 700px;
          height: 800px;
          transform: rotate(-5deg);
          top: calc(50% - 50px);
          left: calc(50% - 350px);
          box-shadow: 0 0 0 1px #ccc;
          background: radial-gradient(circle at center, #222 10px, rgba(0, 0, 0, 0.001) 5px) calc(50% - 300px) 50px/100% 200px, linear-gradient(to right, #e3bebd, #e3bebd) 100px 0px/2px 100% no-repeat, linear-gradient(to bottom, #fff 100px, rgba(0, 0, 0, 0.001) 50px), repeating-linear-gradient(to bottom, #769fda 1px, rgba(0, 0, 0, 0.001) 1px, rgba(0, 0, 0, 0.001) 20px, #769fda 20px, #769fda 21px), #fff;
          -webkit-mask: linear-gradient(to bottom, #000 25%, rgba(0, 0, 0, 0.001) 75%);
                  mask: linear-gradient(to bottom, #000 25%, rgba(0, 0, 0, 0.001) 75%);
        }
        body div {
          z-index: 9;
          width: 200px;
          height: 200px;
          position: relative;
          transform-style: preserve-3d;
          perspective: 500px;
          perspective-origin: 50% 0px;
          transform: translate(-30px, -35px);
          -webkit-animation: brighten 2s ease-in-out infinite -1s;
                  animation: brighten 2s ease-in-out infinite -1s;
        }
        @-webkit-keyframes brighten {
          0% {
            filter: brightness(0.9);
          }
          20% {
            filter: brightness(1);
          }
          80% {
            filter: brightness(1);
          }
          100% {
            filter.........完整代码请登录后点击上方下载按钮下载查看