zoukankan      html  css  js  c++  java

  • [收集]Grid Animation-01

    Grid技术+动画技术 示范:

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Animate Demo</title>
<style type="text/css">
html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    margin: 0;
    padding: 0 10vmin;
}
@supports (display: grid) {
    h1 {
        color: red !important;
    }
}
.grid {
    display: grid;
    grid-template-columns: repeat(191, 2.72251px);
    grid-template-rows: repeat(250, 2.72251px);
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}
@media (max- 640px) {
    .grid {
        grid-template-columns: repeat(191, 0.41885vmin);
        grid-template-rows: repeat(250, 0.4vmin);
    }
}
.grid:before,
.grid:after {
    content: '';
    display: table;
}
.grid:before {
    float: left;
    padding-bottom: 100%;
}
.grid:after {
    clear: both;
}
.grid > div {
    -webkit-animation: animate .5s forwards;
    animation: animate .5s forwards;
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(-180deg);
    transform: scale(0.1) rotate(-180deg);
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    counter-increment: cellcount;
    position: relative;
}
.grid > div:not(:last-of-type) {
    background-color: #666;
}
.grid > div:hover {
    z-index: 1;
    background-color: #282828;
    background-color: #b90000;
}
.grid > div:hover:before {
    content: counter(cellcount);
    font-size: 9px;
    font-family: sans-serif;
    padding: 4px;
    position: absolute;
    display: block;
    background-color: #b90000;
    color: #fff;
    font-weight: 700;
}
.grid > div:last-of-type {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.4 53'%3E %3Cpath fill='%23666' d='M33.5 27.9c-.6-3.4 10.3-24.8 10.8-25.7.5-.9-.7-2-.7-2s-1.3-.6-2 .2-16.1 19.2-19.5 19.9C10.2 23 1.3 16.5.2 18.1c-1.4 2.1 3.7 9.1 6.8 12.1 2.4 3.8 1.7 8.1 1.2 10.1-3 9.9.7 12.1.7 12.1s3.5 2.5 11.5-4c1.7-1.2 5.4-3.4 9.8-2.7 4 1.7 12.4 3.7 13.8 1.6 1.1-1.7-8.4-7.4-10.5-19.4z'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
}
@-webkit-keyframes animate {
    to {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
}
@keyframes animate {
    to {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
}
.grid > div:nth-of-type(1) {
    grid-area: 10 / 15 / 28 / 18;
    -webkit-animation-delay: 1.05s;
    animation-delay: 1.05s;
}
.grid > div:nth-of-type(2) {
    grid-area: 10 / 23 / 28 / 26;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.grid > div:nth-of-type(3) {
    grid-area: 10 / 27 / 13 / 40;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}
.grid > div:nth-of-type(4) {
    grid-area: 14 / 37 / 28 / 40;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
.grid > div:nth-of-type(5) {
    grid-area: 10 / 45 / 24 / 48;
    -webkit-animation-delay: 1.25s;
    animation-delay: 1.25s;
}
.grid > div:nth-of-type(6) {
    grid-area: 10 / 49 / 13 / 62;
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}
.grid > div:nth-of-type(7) {
    grid-area: 25 / 45 / 28 / 62;
    -webkit-animation-delay: 1.35s;
    animation-delay: 1.35s;
}
.grid > div:nth-of-type(8) {
    grid-area: 10 / 67 / 13 / 84;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
.grid > div:nth-of-type(9) {
    grid-area: 14 / 67 / 28 / 70;
    -webkit-animation-delay: 1.45s;
    animation-delay: 1.45s;
}
.grid > div:nth-of-type(10) {
    grid-area: 18 / 71 / 21 / 79;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.grid > div:nth-of-type(11) {
    grid-area: 25 / 71 / 28 / 84;
    -webkit-animation-delay: 1.55s;
    animation-delay: 1.55s;
}
.grid > div:nth-of-type(12) {
    grid-area: 10 / 89 / 13 / 106;
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}
.grid > div:nth-of-type(13) {
    grid-area: 14 / 89 / 28 / 92;
    -webkit-animation-delay: 1.65s;
    animation-delay: 1.65s;
}
.grid > div:nth-of-type(14) {
    grid-area: 18 / 93 / 21 / 106;
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
}
.grid > div:nth-of-type(15) {
    grid-area: 14 / 103 / 17 / 106;
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
.grid > div:nth-of-type(16) {
    grid-area: 10 / 110 / 13 / 128;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
.grid > div:nth-of-type(17) {
    grid-area: 14 / 118 / 28 / 121;
    -webkit-animation-delay: 1.85s;
    animation-delay: 1.85s;
}
.grid > div:nth-of-type(18) {
    grid-area: 10 / 133 / 28 / 136;
    -webkit-animation-delay: 1.9s;
    animation-delay: 1.9s;
}
.grid > div:nth-of-type(19) {
    grid-area: 10 / 141 / 13 / 158;
    -webkit-animation-delay: 1.95s;
    animation-delay: 1.95s;
}
.grid > div:nth-of-type(20) {
    grid-area: 14 / 141 / 28 / 144;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.grid > div:nth-of-type(21) {
    grid-area: 25 / 145 / 28 / 158;
    -webkit-animation-delay: 2.05s;
    animation-delay: 2.05s;
}
.grid > div:nth-of-type(22) {
    grid-area: 14 / 155 / 24 / 158;
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s;
}
.grid > div:nth-of-type(23) {
    grid-area: 10 / 163 / 28 / 166;
    -webkit-animation-delay: 2.15s;
    animation-delay: 2.15s;
}
.grid > div:nth-of-type(24) {
    grid-area: 10 / 167 / 13 / 180;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}
.grid > div:nth-of-type(25) {
    grid-area: 14 / 177 / 28 / 180;
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.grid > div:nth-of-type(26) {
    grid-area: 41 / 1 / 78 / 84;
    -webkit-animation-delay: 2.3s;
    animation-delay: 2.3s;
}
.grid > div:nth-of-type(27) {
    grid-area: 41 / 86 / 118 / 98;
    -webkit-animation-delay: 2.35s;
    animation-delay: 2.35s;
}
.grid > div:nth-of-type(28) {
    grid-area: 119 / 86 / 122 / 98;
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}
.grid > div:nth-of-type(29) {
    grid-area: 122 / 86 / 145 / 126;
    -webkit-animation-delay: 2.45s;
    animation-delay: 2.45s;
}
.grid > div:nth-of-type(30) {
    grid-area: 41 / 102 / 120 / 126;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.grid > div:nth-of-type(31) {
    grid-area: 41 / 131 / 73 / 193;
    -webkit-animation-delay: 2.55s;
    animation-delay: 2.55s;
}
.grid > div:nth-of-type(32) {
    grid-area: 79 / 1 / 84 / 15;
    -webkit-animation-delay: 2.6s;
    animation-delay: 2.6s;
}
.grid > div:nth-of-type(33) {
    grid-area: 79 / 16 / 84 / 26;
    -webkit-animation-delay: 2.65s;
    animation-delay: 2.65s;
}
.grid > div:nth-of-type(34) {
    grid-area: 79 / 27 / 84 / 41;
    -webkit-animation-delay: 2.7s;
    animation-delay: 2.7s;
}
.grid > div:nth-of-type(35) {
    grid-area: 86 / 1 / 123 / 41;
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.grid > div:nth-of-type(36) {
    grid-area: 79 / 43 / 110 / 57;
    -webkit-animation-delay: 2.8s;
    animation-delay: 2.8s;
}
.grid > div:nth-of-type(37) {
    grid-area: 79 / 58 / 110 / 61;
    -webkit-animation-delay: 2.85s;
    animation-delay: 2.85s;
}
.grid > div:nth-of-type(38) {
    grid-area: 79 / 62 / 110 / 64;
    -webkit-animation-delay: 2.9s;
    animation-delay: 2.9s;
}
.grid > div:nth-of-type(39) {
    grid-area: 79 / 65 / 110 / 68;
    -webkit-animation-delay: 2.95s;
    animation-delay: 2.95s;
}
.grid > div:nth-of-type(40) {
    grid-area: 79 / 69 / 110 / 71;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.grid > div:nth-of-type(41) {
    grid-area: 86 / 72 / 110 / 84;
    -webkit-animation-delay: 3.05s;
    animation-delay: 3.05s;
}
.grid > div:nth-of-type(42) {
    grid-area: 125 / 1 / 204 / 28;
    -webkit-animation-delay: 3.1s;
    animation-delay: 3.1s;
}
.grid > div:nth-of-type(43) {
    grid-area: 207 / 1 / 251 / 28;
    -webkit-animation-delay: 3.15s;
    animation-delay: 3.15s;
}
.grid > div:nth-of-type(44) {
    grid-area: 226 / 28 / 251 / 62;
    -webkit-animation-delay: 3.2s;
    animation-delay: 3.2s;
}
.grid > div:nth-of-type(45) {
    grid-area: 124 / 31 / 139 / 57;
    -webkit-animation-delay: 3.25s;
    animation-delay: 3.25s;
}
.grid > div:nth-of-type(46) {
    grid-area: 141 / 31 / 145 / 69;
    -webkit-animation-delay: 3.3s;
    animation-delay: 3.3s;
}
.grid > div:nth-of-type(47) {
    grid-area: 147 / 31 / 195 / 69;
    -webkit-animation-delay: 3.35s;
    animation-delay: 3.35s;
}
.grid > div:nth-of-type(48) {
    grid-area: 76 / 131 / 108 / 193;
    -webkit-animation-delay: 3.4s;
    animation-delay: 3.4s;
}
.grid > div:nth-of-type(49) {
    grid-area: 110 / 131 / 128 / 133;
    -webkit-animation-delay: 3.45s;
    animation-delay: 3.45s;
}
.grid > div:nth-of-type(50) {
    grid-area: 110 / 134 / 128 / 136;
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
.grid > div:nth-of-type(51) {
    grid-area: 108 / 138 / 140 / 160;
    -webkit-animation-delay: 3.55s;
    animation-delay: 3.55s;
}
.grid > div:nth-of-type(52) {
    grid-area: 110 / 161 / 114 / 192;
    -webkit-animation-delay: 3.6s;
    animation-delay: 3.6s;
}
.grid > div:nth-of-type(53) {
    grid-area: 121 / 161 / 123 / 192;
    -webkit-animation-delay: 3.65s;
    animation-delay: 3.65s;
}
.grid > div:nth-of-type(54) {
    grid-area: 125 / 168 / 205 / 192;
    -webkit-animation-delay: 3.7s;
    animation-delay: 3.7s;
}
.grid > div:nth-of-type(55) {
    grid-area: 143 / 138 / 148 / 165;
    -webkit-animation-delay: 3.75s;
    animation-delay: 3.75s;
}
.grid > div:nth-of-type(56) {
    grid-area: 149 / 138 / 158 / 165;
    -webkit-animation-delay: 3.8s;
    animation-delay: 3.8s;
}
.grid > div:nth-of-type(57) {
    grid-area: 160 / 138 / 164 / 165;
    -webkit-animation-delay: 3.85s;
    animation-delay: 3.85s;
}
.grid > div:nth-of-type(58) {
    grid-area: 166 / 138 / 170 / 165;
    -webkit-animation-delay: 3.9s;
    animation-delay: 3.9s;
}
.grid > div:nth-of-type(59) {
    grid-area: 172 / 138 / 176 / 165;
    -webkit-animation-delay: 3.95s;
    animation-delay: 3.95s;
}
.grid > div:nth-of-type(60) {
    grid-area: 178 / 138 / 187 / 165;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
.grid > div:nth-of-type(61) {
    grid-area: 188 / 138 / 205 / 165;
    -webkit-animation-delay: 4.05s;
    animation-delay: 4.05s;
}
.grid > div:nth-of-type(62) {
    grid-area: 208 / 149 / 251 / 192;
    -webkit-animation-delay: 4.1s;
    animation-delay: 4.1s;
}
.grid > div:nth-of-type(63) {
    grid-area: 208 / 131 / 251 / 145;
    -webkit-animation-delay: 4.15s;
    animation-delay: 4.15s;
}
.grid > div:nth-of-type(64) {
    grid-area: 223 / 92 / 251 / 129;
    -webkit-animation-delay: 4.2s;
    animation-delay: 4.2s;
}
.grid > div:nth-of-type(65) {
    grid-area: 214 / 92 / 223 / 121;
    -webkit-animation-delay: 4.25s;
    animation-delay: 4.25s;
}
.grid > div:nth-of-type(66) {
    grid-area: 198 / 92 / 214 / 107;
    -webkit-animation-delay: 4.3s;
    animation-delay: 4.3s;
}
.grid > div:nth-of-type(67) {
    grid-area: 180 / 71 / 189 / 97;
    -webkit-animation-delay: 4.35s;
    animation-delay: 4.35s;
}
.grid > div:nth-of-type(68) {
    grid-area: 190 / 71 / 195 / 97;
    -webkit-animation-delay: 4.4s;
    animation-delay: 4.4s;
}
.grid > div:nth-of-type(69) {
    grid-area: 198 / 83 / 251 / 89;
    -webkit-animation-delay: 4.45s;
    animation-delay: 4.45s;
}
.grid > div:nth-of-type(70) {
    grid-area: 198 / 76 / 251 / 81;
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s;
}
.grid > div:nth-of-type(71) {
    grid-area: 198 / 73 / 251 / 75;
    -webkit-animation-delay: 4.55s;
    animation-delay: 4.55s;
}
.grid > div:nth-of-type(72) {
    grid-area: 198 / 66 / 251 / 70;
    -webkit-animation-delay: 4.6s;
    animation-delay: 4.6s;
}
.grid > div:nth-of-type(73) {
    grid-area: 198 / 60 / 223 / 64;
    -webkit-animation-delay: 4.65s;
    animation-delay: 4.65s;
}
.grid > div:nth-of-type(74) {
    grid-area: 198 / 54 / 223 / 58;
    -webkit-animation-delay: 4.7s;
    animation-delay: 4.7s;
}
.grid > div:nth-of-type(75) {
    grid-area: 198 / 49 / 223 / 53;
    -webkit-animation-delay: 4.75s;
    animation-delay: 4.75s;
}
.grid > div:nth-of-type(76) {
    grid-area: 198 / 32 / 223 / 36;
    -webkit-animation-delay: 4.8s;
    animation-delay: 4.8s;
}
.grid > div:nth-of-type(77) {
    grid-area: 193 / 115 / 206 / 127;
    -webkit-animation-delay: 4.85s;
    animation-delay: 4.85s;
}
header {
    border-bottom: 1px solid silver;
    text-align: center;
}
footer {
    border-top: 1px solid silver;
}
footer,
header {
    display: block;
    margin: 40px auto;
    max-width: 640px;
}
h1,
p,
a {
    font-family: sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
    text-decoration: none;
}
a {
    font-weight: 700;
    border-bottom: 1px dashed silver;
}
img {
    width: 10vmin;
    float: left;
}
footer p:last-of-type {
    text-align: right;
}
h1 {
    font-family: monospace;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 400;
    margin: 20px 0;
    text-align: center;
    border-bottom: 1px solid silver;
}
p {
    font-size: 11px;
    line-height: 1.7;
}
a[href*=chrome],
a[href*="//www.mozilla"] {
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
}
p strong {
    color: #b90000;
}
h1 strong {
    font-weight: 400;
}

</style>
</head>
<body>
<h1>cs</h1>
<div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>
  • 相关阅读:
    10.异常
    9.1 oop习题集合
    9.抽象类和接口
    8.oop-多态
    AngularJs学习笔记二
    浅谈如何坚持计划
    妙味课堂——JavaScript基础课程笔记
    前端学习-试卷
    jquery实战
    boost any
  • 原文地址：https://www.cnblogs.com/exesoft/p/13111537.html
Copyright © 2011-2022 走看看