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=" 168px; height: 80px;" class="widget"></div> </body> </html>
效果: