CSS3记录 - ——海

1. loading

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .jhail-smooth-transition-loader {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2000;
            text-align: center;
            background-color: #f6f6f6;
        }

        .jhail-diamond-spinner-container {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1000;
        }

        .jhail-diamond-spinner {
            display: inline-block;
            position: absolute;
            height: 40px;
            width: 40px;
            top: -20px;
            left: -20px;
            z-index: 10;
            transition: all .3s ease-in-out;
            transform: rotate(45deg);
        }

        .jhail-diamond-spinner .jhail-preload-square {
            float: left;
            width: 50%;
            height: 50%;
            position: relative;
            transform: scale(1.1);
            backface-visibility: hidden;
        }

        .jhail-diamond-spinner .jhail-preload-square.jhail-preload-square-2 {
            transform: scale(1.1) rotateZ(90deg);
        }

        .jhail-diamond-spinner .jhail-preload-square.jhail-preload-square-3 {
            transform: scale(1.1) rotateZ(180deg);
        }

        .jhail-diamond-spinner .jhail-preload-square.jhail-preload-square-4 {
            transform: scale(1.1) rotateZ(270deg);
        }

        .jhail-diamond-spinner .jhail-preload-square:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #58bcb3;
            animation: jhailFoldAngle 1.6s infinite linear both;
            transform-origin: 100% 100%;
            backface-visibility: hidden;
        }
        .jhail-diamond-spinner .jhail-preload-square.jhail-preload-square-2:before {
            animation-delay: .2s;
        }
        .jhail-diamond-spinner .jhail-preload-square.jhail-preload-square-3:before {
            animation-delay: .4s;
        }
        .jhail-diamond-spinner .jhail-preload-square.jhail-preload-square-4:before {
            animation-delay: .6s;
        }

        @keyframes jhailFoldAngle {
            0%, 10% {
                transform: perspective(140px) rotateX(-180deg);
                opacity: 0
            }
            25%, 75% {
                transform: perspective(140px) rotateX(0);
                opacity: 1
            }
            100%, 90% {
                transform: perspective(140px) rotateY(180deg);
                opacity: 0
            }
        }
    </style>
</head>
<body>
<div class="jhail-smooth-transition-loader">
    <div class="jhail-diamond-spinner-container">
        <div class="jhail-diamond-spinner">
            <div class="jhail-preload-square jhail-preload-square-1"></div>
            <div class="jhail-preload-square jhail-preload-square-2"></div>
            <div class="jhail-preload-square jhail-preload-square-4"></div>
            <div class="jhail-preload-square jhail-preload-square-3"></div>
        </div>
    </div>
</div>
</body>
</html>

　　效果：

2. 斜斑马线

.zebra-crossing  {
  width: 200px;
  height: 100px;
  background: linear-gradient(135deg,
    #072b4a calc(50% - 5px), #041423 0,
    #041423 calc(50% - 3px), #072b4a 0,
    #072b4a calc(50% + 3px), #041423 0,
    #041423 calc(50% + 5px), #072b4a 0);
  background-size: 11.312px 11.312px;
}

　　效果：

3. 小装饰器（也可以用伪类的border实现，此处是用gradient实现）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .widget {
            position: relative;
        }
        .widget:before {
            content: ' ';
            position: absolute;
            left: 0;
            top: 0;
            width: 9px;
            height: 100%;
            background: linear-gradient(0deg, #fff 4px, transparent 0, transparent calc(100% - 4px), #fff 4px);
        }
        .widget:after {
            content: ' ';
            position: absolute;
            right: 0;
            top: 0;
            width: 9px;
            height: 100%;
            background: linear-gradient(0deg, #fff 4px, transparent 0, transparent calc(100% - 4px), #fff 4px);
        }
    </style>
</head>
<body>
<div style="width: 168px; height: 80px;" class="widget"></div>
</body>
</html>

　　效果：

posted on 2019-05-13 10:28 ——海阅读(165) 评论(0) 编辑收藏举报