純css動畫
阿新 • • 發佈:2018-11-15
效果圖:
實現方法
1.共三步(總共三個檔案)
一.建立index.html新增如下程式碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>loading...</title> <link href="css/bick.css" rel="stylesheet" /> <link rel="stylesheet" href="css/loading.css"> </head> <body> <div class="page"> <div class="loading"> <div class="slider"> <div class="bike bikeAni"></div> </div> </div> </div> </body> </html>
二.建立 loading.css 新增如下程式碼
body,div,span{ border:0px; padding:0px; margin:0px; } body{ background: url(../images/espaco.jpg) no-repeat 0 0; background-size: 100%; /* 背景圖片被拉伸為全屏 */ } .page{ width:100vw; height:100vh; /* background:#333; */ } .loading{ position:absolute; top:0px; left:0px; right:0px; bottom:0px; margin:auto; transition-property:all; transition-duration:1s; } .loading{ width:400px; height:400px; border-radius:50%; background: url(../images/terra.jpg) repeat-x 0 0; border: 1px solid rgba(26,18,101,0.3); box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset; transition-property: all; transition-duration: 1s; transform: rotate(0deg); transform-origin: 35px 270px; animation: loop 20s linear infinite; } @keyframes loop { 0%{ background-position: 0 0; } 100%{ background-position: -900px 0;} } .loading:before{ content: ""; border-radius: 50%; box-shadow: -83px -4px 53px rgba(0,0,0,0.7) inset;/*弧形陰影,形成白天黑夜效果*/ position:absolute; top:0px; left:0px; right:0px; bottom:0px; margin:auto; } @keyframes cyclingCC{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} } .slider{ width: 70px; height: 70px; transition-property: all; transition-duration: 1s; transform: rotate(0deg); transform-origin: 35px 270px; position: absolute; top: -70px; left: 165px; animation:cyclingCC 3s infinite ; animation-timing-function:linear; } .bike{ width: 70px; height: 70px; transition-property: all; transition-duration: 1s; transform: rotate(0deg); transform-origin: 35px 270px; background:url(../images/bike70.png); background-position:0px 0px; }
三.建立bick.css檔案新增如下程式碼
.saicheng_fixed{position:fixed;top:50px;z-index:999} .saicheng_fixed tbody{padding-top:10px;padding-right:2px;width:950px;display:block;background:#fff;z-index:999} .saishi_wrapper .nph_scrl_wrap{background:#fc0;padding-bottom:10px} .yilibottombanner{position:absolute;bottom:230px;left:50%;display:block;width:1200px;height:auto;margin-left:-600px} .yilibottombanner img{width:100%;height:auto} .rio{width:126px;height:35px;background:url(../images/rio.png);position:absolute;top:48px;left:50%;margin-left:-413px;transform-origin:left bottom} .star{width:19px;height:13px;background:url(../images/star.png);position:absolute;top:32px;left:50%;margin-left:-300px;transform-origin:left bottom} @keyframes scaleUp{ 0%{transform:scale(1,1);-webkit-transform:scale(1,1)} 50%{transform:scale(1,1);-webkit-transform:scale(1,1)} 51%{transform:scale(0,0);-webkit-transform:scale(0,0)} 77%{transform:scale(1,1);-webkit-transform:scale(1,1)} 88%{transform:scale(.97,.97);-webkit-transform:scale(.97,.97)} 100%{transform:scale(1,1);-webkit-transform:scale(1,1)} } @-webkit-keyframes scaleUp{ 0%{-webkit-transform:scale(1,1);transform:scale(1,1)} 50%{-webkit-transform:scale(1,1);transform:scale(1,1)} 51%{-webkit-transform:scale(0,0);transform:scale(0,0)} 77%{-webkit-transform:scale(1,1);transform:scale(1,1)} 88%{-webkit-transform:scale(.97,.97);transform:scale(.97,.97)} 100%{-webkit-transform:scale(1,1);transform:scale(1,1)} } .scaleUp{ -webkit-animation:scaleUp 1.04s; animation:scaleUp 1.04s } @keyframes rotate{ 0%{transform:rotate(0);-webkit-transform:rotate(0)} 59%{transform:rotate(0);-webkit-transform:rotate(0)} 71%{transform:rotate(24deg);-webkit-transform:rotate(24deg)} 88%{transform:rotate(-24deg);-webkit-transform:rotate(-24deg)} 100%{transform:rotate(0);-webkit-transform:rotate(0)} } @-webkit-keyframes rotate{ 0%{-webkit-transform:rotate(0);transform:rotate(0)} 59%{-webkit-transform:rotate(0);transform:rotate(0)} 71%{-webkit-transform:rotate(24deg);transform:rotate(24deg)} 88%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)} 100%{-webkit-transform:rotate(0);transform:rotate(0)} } .rotate{-webkit-animation:rotate 1.32s;animation:rotate 1.32s} .bikeAni{-webkit-animation:bikeAni 7s steps(99) infinite;animation:bikeAni 7s steps(99) infinite} @keyframes bikeAni{ 0%{background-position:0 9999989px} 99%{background-position:0 0} }
以上 已經完成 這個效果了
提供整壓縮包下載 github 上:css run bick