css天气预报下雨天晴loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css天气预报下雨天晴loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #efefef; } .preloader { position: absolute; margin-left: -55px; margin-top: -100px; height: 110px; width: 110px; left: 50%; top: 50%; } svg { width: 110px; height: 110px; } path { stroke: #9ea1a4; stroke-width: 0.25; fill: #241E20; } #cloud { position: relative; z-index: 2; } #cloud path { fill: #efefef; } #sun { margin-left: -10px; margin-top: 6px; opacity: 0; width: 60px; height: 60px; position: absolute; left: 45px; top: 15px; z-index: 1; animation-name: rotate; animation-duration: 16000ms; animation-iteration-count: infinite; animation-timing-function: linear; } #sun path { stroke-width: 0.18; fill: #9ea1a4; } @keyframes rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } /* Rain */ .rain { position: absolute; width: 70px; height: 70px; margin-top: -32px; margin-left: 19px; } .drop { opacity: 1; background: #9ea1a4; display: block; float: left; width: 3px; height: 10px; margin-left: 4px; border-radius: 0px 0px 6px 6px; animation-name: drop; animation-duration: 350ms; animation-iteration-count: infinite; } .drop:nth-child(1) { animation-delay: -130ms; } .drop:nth-child(2) { animation-delay: -240ms; } .drop:nth-child(3) { animation-delay: -390ms; } .drop:nth-child(4) { animation-delay: -525ms; } .drop:nth-child(5) { animation-delay: -640ms; } .drop:nth-child(6) { animation-delay: -790ms; } .drop:nth-child(7) { animation-delay: -900ms; } .drop:nth-child(8) { animation-delay: -1050ms; } .drop:nth-child(9) { animation-delay: -1130ms; } .drop:nth-child(10) { animation-delay: -1300ms; } @keyframes drop { 50% { height: 45px; opacity: 0; } 51% { opacity: 0; } 100% { height: 1px; opacity: 0; } } .text { font-family: Helvetica, 'Helvetica Neue', sans-serif; letter-spacing: 1px; text-align: center; margin-left: -43px; font-weight: bold; margin-top: 20px; font-size: 11px; color: #a0a0a0; width: 200px; } </style> </head> <body> <div class="preloader" style="opacity: 1; "> <svg version="1.1" id="sun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10" xml:space="preserve" style="opacity: 1; margin-left: 0px; margin-top: 0px;"> <g> <path fill="none" d="M6.942,3.876c-0.4-0.692-1.146-1.123-1.946-1.123c-0.392,0-0.779,0.104-1.121,0.301c-1.072,0.619-1.44,1.994-0.821,3.067C3.454,6.815,4.2,7.245,5,7.245c0.392,0,0.779-0.104,1.121-0.301C6.64,6.644,7.013,6.159,7.167,5.581C7.321,5,7.243,4.396,6.942,3.876z M6.88,5.505C6.745,6.007,6.423,6.427,5.973,6.688C5.676,6.858,5.34,6.948,5,6.948c-0.695,0-1.343-0.373-1.69-0.975C2.774,5.043,3.093,3.849,4.024,3.312C4.32,3.14,4.656,3.05,4.996,3.05c0.695,0,1.342,0.374,1.69,0.975C6.946,4.476,7.015,5,6.88,5.505z"></path> <path fill="none" d="M8.759,2.828C8.71.........完整代码请登录后点击上方下载按钮下载查看
网友评论0