css实现勋章公章效果-html代码-BFW代码库

css实现勋章公章效果

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
@import url("https://fonts.googleapis.com/css?family=Holtwood+One+SC|Source+Code+Pro:700&display=swap");
:root {
        --size: 90vmin;
    }

        * {
            box-sizing: border-box;
            margin: 0;
        }

        html {
            background: white;
            height: 100%;
        }

        body {
     
            min-height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        body:before {
            content: '';
            position: absolute;
            top: -2.5vmin;
            left: -2.5vmin;
            right: -2.5vmin;
            bottom: -2.5vmin;
            bottom: 0;
            box-shadow: inset 0 0 5vmin 0 black;
        }

        .fill {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .center {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .blend {
            mix-blend-mode: overlay;
        }

        .stroke {
            -webkit-text-stroke: .25vmin black;
        }

        .shade {
            box-shadow: 0 0 0 1vmin black;
        }

        .border {
            border: 3vmin double black;
        }

        .threesixty > span {
            width: 2ch;
            height: 50%;
            position: absolute;
            top: 0;
            left: calc(50% - 1ch);
            text-align: center;
        }

        .outer > .threesixty > span:nth-of-type(1) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(0deg);
        }
        .outer > .threesixty > span:nth-of-type(2) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(16.3636363636deg);
        }
        .outer > .threesixty > span:nth-of-type(3) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(32.7272727273deg);
        }
        .outer > .threesixty > span:nth-of-type(4) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(49.0909090909deg);
        }
        .outer > .threesixty > span:nth-of-type(5) {
            display: inline-block;
            trans.........完整代码请登录后点击上方下载按钮下载查看