欢迎光临
<!DOCTYPE html> <html> <head> <meta content="width =device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no" /> <title></title> <style> html, body { margin: 0px; padding: 0px; height: 100%; width: 100%; } p { margin: 0px; padding: 0px; } .page { width: 100%; height: 100%; } .page .pagehome { height: 100%; width: 100%; background: #24a5cf; position: relative; z-index: 99; } .page .an-box { position: absolute; top: 45%; left: 25%; -webkit-animation: hinge 10s cubic-bezier(.44,.44,.54,1.42) infinite; } .page .an-box .y { width: 200px; height: 200px; border-radius: 50%; position: absolute; top: 0px; left: 0px; transform-origin: 50% 100%; border-top: 0.1em solid rgba(255,255,255,0.4); box-shadow: 0 1em 2em rgba(0,0,0,0.5); top: 50%; left: 50%; margin-left: -100px; margin-top: -200px; } .page .an-box .y0 { background: rgba(16, 63, 236, 0.75); z-index: 100; } .page .an-box .y1 { background: rgba(37, 172, 162, 0.75); -webkit-transform: rotateZ(90deg); z-index: 99; } .page .an-box .y2 { background: rgba(233, 124, 32, 0.75); -webkit-transform: rotateZ(180deg); z-index: 98; } .page .an-box .y3 { background: rgba(235, 67, 35, 0.75); -webkit-transform: rotateZ(270deg); z-index: 97; } @-webkit-keyframes myfirst { 0% { -webkit-transform: rotateZ(0deg); } 25% { -webkit-transform: rotateZ(360deg); } 50% { -webkit-transform: rotateZ(180deg); } 99% { -webkit-transform: rotateZ(360deg); } 100% { -webkit-transform: rotateZ(0deg); } } @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 16% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } 32% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } 48% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } 64% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } 99% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .page .biaopai { position: absolute; top: 100px; left: 50%; z-index: 999; -webkit-transform-style: preserve-3d; -webkit-perspective: 700; -webkit-perspective-origin: 50% 50%; } .page .biaopai .content { padding: 0px 30px; background: #cb8e8e; border-radius: 10px; -webkit-transform-origin-y: -15px; -webkit-transform: rotateZ(90deg); -webkit-animation: hinge1 cubic-bezier(.44,.44,.54,1.42) 1.3s both; } .page .biaopai .content:before { content: ‘‘; width: 15px; height: 15px; background: #eb5757; border: 2px solid #c62a2a; box-shadow: 0px 2px 5px #2b2929; position: absolute; left: 50%; border-radius: 15px; top: -30px; margin-left: -12px; z-index: 99; } .page .biaopai .content:after { content: ‘‘; display: block; width: 0px; height: 0px; overflow: hidden; border: 40px dashed transparent; border-bottom: 50px solid #cb8e8e; position: absolute; left: 50%; top: -90px; margin-left: -45px; } .page .biaopai .content p { line-height: 145px; text-align: center; font-size: 75px; font-family: ‘Microsoft YaHei‘; text-shadow: 0px 5px 5px #888; color: #ee492b; font-weight: bold; } @-webkit-keyframes hinge1 { 0% { } 20% { -webkit-transform: rotate3d(0, 0, 1, -55deg); } 40% { -webkit-transform: rotate3d(0, 0, 1,55deg); } 60% { -webkit-transform: rotate3d(0, 0, 1,-20deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, 20deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-animation-timing-function: ease-in; } } </style> </head> <body> <div class="page"> <div class="pagehome"> <div class="an-box"> <div class="y y0"></div> <div class="y y1"></div> <div class="y y2"></div> <div class="y y3"></div> </div> </div> <div class="biaopai"> <div class="content"> <p>欢迎光临</p> </div> </div> </div> </body> </html>
时间: 2024-11-05 19:45:14