1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
| .iib-mark { position: relative; top: 0; left: 0; width: 100rpx; height: 100rpx; } .iib-mark>div { width: 50%; height: 100%; background: #fff; } .iib-mark>.l1 { position: absolute; top: 0; left: 0; z-index: 3; transform-origin: right center; } .iib-mark>.l1.vam { background: #c8c8c8; animation: v1 1.5s linear; animation-fill-mode: forwards; } .iib-mark>.r1 { position: absolute; top: 0; right: 0; z-index: 1; transform-origin: left center; } .iib-mark>.r1.vam { background: #c8c8c8; animation: v2 1.5s linear 1.5s; animation-fill-mode: forwards; } .iib-mark>.l2 { position: absolute; top: 0; left: 0; z-index: 2; background: white; } @keyframes v1 { 0% { transform: rotate(0); } 99.9% { z-index: 3; } 100% { transform: rotate(-180deg); z-index: -1; } } @keyframes v2 { 0% { transform: rotate(0); } 99.9% { opacity: 1; } 100% { transform: rotate(-180deg); opacity: 0; } }
|