gsap+svg实现xbox关机按钮点击动画效果代码
代码语言:html
所属分类:布局界面
代码描述:gsap+svg实现xbox关机按钮点击动画效果代码
代码标签: gsap svg xbox 关机 按钮 点击 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.1.2.css"> <style> body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2f364f; overflow: hidden; } .outer-container { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, #ffffff, #a9a9a9); display: flex; justify-content: center; align-items: center; } .outer-container .inner-container { width: 100px; height: 100px; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; } .outer-container .inner-container .inner-inner-container { width: 90px; height: 90px; border-radius: 50%; background-color: #dcdcdc; display: flex; justify-content: center; align-items: center; } .outer-container .inner-container svg { overflow: visible; transform-origin: center; transform: scale(2.4); stroke-linecap: round; cursor: pointer; position: relative; z-index: 5; } .outer-container .inner-container i { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 0; width: 1em; height: 1em; font-size: 2em; color: #3e4250; cursor: pointer; } </style> </head> <body > <div class="outer-container"> <div class="inner-container"> <svg id="restart" class="button" width="400" height="400"> <path class="one" d=" M 220 203 A 20 20 0 0 1 200 220" style="stroke: #3e4250; fill:none; stroke-width:2"></path> <path class="two" d=" M 197 220 A 20 20 90 0 1 180 200" style="stroke: #3e4250; fill:non.........完整代码请登录后点击上方下载按钮下载查看
网友评论0