纵有疾风起
人生不言弃

各种集合

https://www.qdfuns.com/article/40816/35da9b3519e18e90a0004d03bb7a29a5.html
开关

<!DOCTYPE html><html class=''>    <head>        <style class="cp-pen-styles">            * {                margin: 0px;                padding: 0px;            }            body {                background-color: #415062;            }            input[type="checkbox"] {                position: absolute;                top: 50%;                left: 50%;                margin: 0;                margin-top: -40px;                margin-left: -80px;                -webkit-appearance: none;                -moz-appearance: none;                appearance: none;                cursor: pointer;                -webkit-backface-visibility: hidden;                backface-visibility: hidden;                -webkit-transition: all 0.5s cubic-bezier(0.85, 0.1, 0.05, 0.75);                transition: all 0.5s cubic-bezier(0.85, 0.1, 0.05, 0.75);                width: 80px;                height: 80px;                outline: 40px solid #fff;                outline-offset: -40px;                box-shadow: 0 0 0 4px #dfdfdf, 80px 0 0 4px #dfdfdf, 0 0 0 4px #dfdfdf, 80px 0 0 4px #dfdfdf;            }            input[type="checkbox"]:checked {                -webkit-transform: translateX(100%);                transform: translateX(100%);                outline-color: #5d6aba;                box-shadow: 0 0 0 4px #dfdfdf, -80px 0 0 4px #dfdfdf, -80px 0 0 4px #dfdfdf, 0 0 0 4px #dfdfdf;            }            input[type="checkbox"]:checked+.backgroundAnimation {                background-color: #baad5d;            }            .backgroundAnimation {                width: 100vw;                height: 100vh;                -webkit-transition: background-color 0.5s ease;                transition: background-color 0.5s ease;            }        </style>    </head>    <body>        <input type="checkbox" />        <!-- option-->        <div class="backgroundAnimation"></div>    </body></html>

菜单悬停效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>CSS菜单悬停效果</title>        <style>            html {                box-sizing: border-box;            }            *,            *:before,            *:after {                box-sizing: inherit;                padding: 0;                margin: 0;            }            body,            html {                width: 100%;                height: 100%;                background: #222;                font-family: 'Varela Round', sans-serif;            }            nav {                display: -webkit-box;                display: -ms-flexbox;                display: flex;                -webkit-box-orient: vertical;                -webkit-box-direction: normal;                -ms-flex-direction: column;                flex-direction: column;                -webkit-box-pack: center;                -ms-flex-pack: center;                justify-content: center;                -webkit-box-align: center;                -ms-flex-align: center;                align-items: center;                max-width: 600px;                height: 100%;                margin: 0 auto;            }            nav a {                text-decoration: none;                font-size: 25px;                color: #ddd;                position: relative;                margin-bottom: 50px;                -webkit-transition: all .2s;                transition: all .2s;                overflow: hidden;            }            nav a:hover {                color: #fff;            }            nav a:last-child {                margin-bottom: 0px;            }            nav a::before {                content: "";                position: absolute;                top: 0px;                left: -100%;                width: 100%;                height: 100%;                background: #eb2141;                z-index: 99;                -webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);                transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);            }            nav a:hover::before {                left: 100%;            }            nav a::after {                content: "";                position: absolute;                top: 50%;                margin-top: -2px;                left: 100%;                width: 100%;                height: 4px;                background: #eb2141;                -webkit-transition: all .3s;                transition: all .3s;                -webkit-transition-delay: .4s;                transition-delay: .4s;            }            nav a:hover::after {                left: 0%;            }        </style>    </head>    <body translate="no">        <!--是否要翻译-->        <nav>            <a href="#!">                <span>HOME</span>            </a>            <a href="#!">                <span>ABOUT</span>            </a>            <a href="#!">                <span>CONTACT</span>            </a>            <a href="#!">                <span>FAQ</span>            </a>        </nav>    </body></html>

load

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="google" value="notranslate">        <title>CSS3loading加载进度页面</title>        <style>            .page {                padding: 40px;            }            html,            body {                height: 100%;                margin: 0;                padding: 0;                font-family: Helvetica, Arial, sans-serif;            }            body {                background: #fff            }            #splash {                background: #cc1f2f;                background-repeat: repeat-y;                position: fixed;                left: 0;                top: 0;                width: 100%;                height: 100%;                animation: splash 3s ease-in;                animation-fill-mode: forwards;                -webkit-animation-fill-mode: forwards;            }            #loader {                position: absolute;                left: 50%;                top: 0;                transform: translate(-50%, 0);            }            #loader:after {                content: '';                position: absolute;                left: 50%;                margin-left: -8px;                bottom: -170px;                width: 3px;                background: #fff;                background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);                height: 200px;            }            #loader:before {                content: '';                position: absolute;                left: 50%;                margin-left: 8px;                bottom: -190px;                width: 3px;                background: #000;                background: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, 0) 100%);                height: 200px;            }            #splash .anim {                height: 100%;                position: absolute;                left: 50%;                width: 100px;                transform: translate(-50%, 100%);                animation: loader 4s linear;                animation-fill-mode: forwards;                -webkit-animation-fill-mode: forwards;            }            @keyframes loader {                0% {                    transform: translate(-50%, 110%);                }                30% {                    transform: translate(-50%, 50%);                }                100% {                    transform: translate(-50%, 0%);                }            }            @keyframes splash {                0% {                    transform: translate(0%, 0%);                }                50% {                    transform: translate(0%, 0%);                }                100% {                    transform: translate(0%, -100%);                }            }        </style>    </head>    <body>        <div class="page">            <header>                <h1>Welcome</h1>                <p>Just a test for a loading information. Press reload to repeat.</p>            </header>        </div>        <div id="splash">            <div class="anim">                <div id="loader">                    <svg version="1.1" width="60px" height="70px" viewBox="0 0 60 70">                        <defs>                            <filter id="f1" x="0" y="0">                                <feGaussianBlur in="SourceGraphic" stdDeviation="2" />                            </filter>                        </defs>                        <g id="airplane">                            <path fill="#000" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541          h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004          c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017          c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004          c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03          C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(44,0) rotate(90 0 0)" />                        </g>                        <g id="shadow" transform="scale(.9)">                            <path fill="#000" fill-opacity="0.3" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541            h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004            c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017            c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004            c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03            C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(64,30) rotate(90 0 0)" filter="url(#f1)" />                        </g>                    </svg>                </div>            </div>        </div>    </body></html>

开关

文章转载于:https://www.jianshu.com/p/c2a840512c07

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 各种集合
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录