svg+css实现倒计时开始动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现倒计时开始动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } body { background: #32386D; font-family: Helvetica, Arial, sans-serif; } .demo { position: absolute; left: 50%; top: 50%; width: 500px; height: 140px; margin-top: -70px; padding: 10px; border-radius: 20px; transform: translateX(-50%); } .demo__colored-blocks { overflow: hidden; position: absolute; left: 50%; top: 0; width: 500px; height: 100%; margin-left: -250px; padding: 10px; border-radius: 20px; perspective: 1000px; -webkit-animation: demoAnim 4s ease-in-out infinite, contAnim 4s infinite; animation: demoAnim 4s ease-in-out infinite, contAnim 4s infinite; } .demo__colored-blocks-rotater { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; -webkit-animation: rotation 1.3s linear infinite; animation: rotation 1.3s linear infinite; } .demo__colored-blocks-inner { overflow: hidden; position: relative; height: 100%; background: #32386D; border-radius: inherit; } .demo__colored-block { position: absolute; left: 50%; top: 50%; width: 300%; height: 300%; transform-origin: 0 0; } .demo__colored-block:nth-child(1) { transform: rotate(0deg) skewX(-30deg); background-color: #FD3359; } .demo__colored-block:nth-child(2) { transform: rotate(120deg) skewX(-30deg); background-color: #F4D302; } .demo__colored-block:nth-child(3) { transform: rotate(240deg) skewX(-30deg); background-color: #21BDFF; } .demo__inner { overflow: hidden; position: relative; width: 100%; height: 100%; } .demo__numbers { overflow: visible; position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; } .demo__numbers-path { fill: none; stroke-width: 10px; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0, 518.055065155; stroke-dashoffset: 0; -webkit-animation: numAnim 4s ease-in-out infinite; animation: numAnim 4s ease-in-out infinite; opacity: 0; } .demo__text { position: absolute; left: 50%; top: 0; width: 500px; height: 100%; margin-left: -250px; text-align: center; line-height: 140px; font-size: 100px; color: #fff; text-transform: uppercase; letter-spacing: 15px; transform: translateX(10px); -webkit-animation: hideText 4s infinite; animation: hideText 4s infinite; } @-webkit-keyframes contAnim { 15%, 100% { margin-left: -250px; width: 500px; } 25%, 90% { margin-left: -70px; width: 140px; } } @keyframes contAnim { 15%, 100% { margin-left: -250px; width: 500px; } 25%, 90% { margin-left: -70px; width: 140px; } } @-webkit-keyframes numAnim { 15% { stroke-dasharray: 0, 518.055065155; stroke-dashoffset: 0; opacity: 0; } 25%, 41% { opacity: 1; stroke-dasharray: 144.4256591797, 518.055065155; stroke-dashoffset: -40; } 53%, 66% { stroke-dasharray: 136.0216217041, 518.055065155; stroke-dashoffset: -227.238697052; } 76% { stroke-dasharray: 113.4751205444, 518.055065155; stroke-dashoffset: -445.8995704651; } 88%, 100% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0