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

代码语言：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;
            transform-origin: bottom center;
            transform: rotate(65.4545454545deg);
        }
        .outer > .threesixty > span:nth-of-type(6) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(81.8181818182deg);
        }
        .outer > .threesixty > span:nth-of-type(7) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(98.1818181818deg);
        }
        .outer > .threesixty > span:nth-of-type(8) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(114.5454545455deg);
        }
        .outer > .threesixty > span:nth-of-type(9) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(130.9090909091deg);
        }
        .outer > .threesixty > span:nth-of-type(10) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(147.2727272727deg);
        }
        .outer > .threesixty > span:nth-of-type(11) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(163.6363636364deg);
        }
        .outer > .threesixty > span:nth-of-type(12) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(180deg);
        }
        .outer > .threesixty > span:nth-of-type(13) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(196.3636363636deg);
        }
        .outer > .threesixty > span:nth-of-type(14) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(212.7272727273deg);
        }
        .outer > .threesixty > span:nth-of-type(15) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(229.0909090909deg);
        }
        .outer > .threesixty > span:nth-of-type(16) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(245.4545454545deg);
        }
        .outer > .threesixty > span:nth-of-type(17) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(261.8181818182deg);
        }
        .outer > .threesixty > span:nth-of-type(18) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(278.1818181818deg);
        }
        .outer > .threesixty > span:nth-of-type(19) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(294.5454545455deg);
        }
        .outer > .threesixty > span:nth-of-type(20) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(310.9090909091deg);
        }
        .outer > .threesixty > span:nth-of-type(21) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(327.2727272727deg);
        }
        .outer > .threesixty > span:nth-of-type(22) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(343.6363636364deg);
        }
        .outer > .threesixty > span:nth-of-type(23) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(360deg);
        }

        .mid > .threesixty > span:nth-of-type(1) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(0deg);
        }
        .mid > .threesixty > span:nth-of-type(2) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(15deg);
        }
        .mid > .threesixty > span:nth-of-type(3) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(30deg);
        }
        .mid > .threesixty > span:nth-of-type(4) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(45deg);
        }
        .mid > .threesixty > span:nth-of-type(5) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(60deg);
        }
        .mid > .threesixty > span:nth-of-type(6) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(75deg);
        }
        .mid > .threesixty > span:nth-of-type(7) {
            display: inline-block;
            transform-origin: bottom center;
            transform: rotate(90deg);
        }
        .mid > .threesixty > span:nth-of-type(8) {
            display: inline-block;
            transform-origin: bottom center;
            tra.........完整代码请登录后点击上方下载按钮下载查看
css实现勋章公章效果

网友评论0

div+css布局实现文字密集排布渐变文字墙效果代码

css使用details标签实现水平折叠面板效果代码

svg+css文字排版布局艺术效果代码

div+css布局实现波浪背景动画卡片效果代码

css布局实现砖头墙文字效果代码

div+Css布局实现拟态立体质感checkbox开关切换效果代码

div+Css布局实现checkbox播放与停止播放滑动切换按钮代码

div+css布局实现拍照按钮点击效果代码

div+Css布局耳机盒子效果代码

div+css布局实现立体质感radio播放按键按下切换单选效果代码
