各种集合

作者: 木利 | 来源:发表于2018-08-15 14:34 被阅读0次

各种集合
各种细胞集合
各种集合比较
各种集合的遍历
iOS各种报错集合
各种黑科技集合
各种集合（NSDictionary, NSMapTable, .
Spring“集合”注入、Spring AOP实现（2）
java各种集合的转换
RobotFramework-各种资料集合

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.qdfuns.com/article/40816/35da9b3519e18e90a000...
各种细胞集合
上皮细胞上皮细胞是位于皮肤或腔道表层的细胞。上皮细胞根据器官的不同而有所不同：尿常规[https://baike...
各种集合比较
HashMap为什么允许为null?首先put的时候，就会对key==null做一个判断，对于key==null的...
各种集合的遍历
Map遍历 List遍历
iOS各种报错集合
1：Undefined symbols for architecture arm64: "OBJC_CLASS$_...
各种黑科技集合
时间久了，才发现好记性不如烂笔头。为了方便自己查找资料，有时候会把一些零碎的知识给记录下来。挑了一些整理出来，分享...
各种集合（NSDictionary, NSMapTable, .
1.NSDictionary NSDictionary是key->value的映射。NSDictionary中存储...
Spring“集合”注入、Spring AOP实现（2）
一、Java集合框架 1、集合框架 Java Collections Framework2.png 各种集合框架的...
java各种集合的转换
内容： 1、List转Array 2、Array转List 3、String...
RobotFramework-各种资料集合
官网 http://robotframework.org/#documentation github https:...