animate实现文字魔术变换动态时钟效果
代码语言:html
所属分类:动画
代码描述:animate实现文字魔术变换动态时钟效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body, html { height: 100%; display: grid; background-color: #181a27; } .wrapper { margin: auto; padding: 20px; } .clock { width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; grid-column-gap: 5%; grid-row-gap: 0; } .number { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 5%; grid-row-gap: 0; } .digit { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column-gap: 0; grid-row-gap: 0; } .digit__svg { width: 100%; height: auto; stroke: #e88565; stroke-width: 1px; fill: none; display: block; } </style> </head> <body translate="no"> <div class='wrapper'> <div class='clock'> <div class='number number_1'> <div class='digit' data-number='0'> <svg class='digit__svg' viewbox='0 0 50 100' xmlns='http://www.w3.org/svg/2000'> <path d='M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0'></path> </svg> </div> <div class='digit' data-number='0'> <svg class='digit__svg' viewbox='0 0 50 100' xmlns='http://www.w3.org/svg/2000'> <path d='M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0'></path> </svg> </div> </div> <div class='number number_2'> <div class='digit' data-number='0'> <svg class='digit__svg' viewbox='0 0 50 100' xmlns='http://www.w3.org/svg/2000'> <path d='M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0'></path> </svg> </div> <div class='digit' data-number='0'> <svg class='digit__svg' viewbox='0 0 50 100' xmlns='http://www.w3.org/svg/2000'> <path d='M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0