gsap实现80后小时候经典的拉线开关效果代码
代码语言:html
所属分类:表单美化
代码描述:gsap实现80后小时候经典的拉线开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; height: 100vh; width: 100vw; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #1a2031; } * { box-sizing: border-box; } .btnContainer { width: 320px; height: 160px; position: relative; } .btn { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #3c3459; border-radius: 999px; padding: 10px; cursor: pointer; } .knob { width: 140px; height: 140px; position: relative; } .top { background-color: #827d96; border-radius: 999px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .light { border-radius: 999px; position: absolute; width: 100px; height: 100px; background: radial-gradient( 50% 50% at 50% 50%, #4cc3e2 10.42%, rgba(94, 199, 227, 0.791579) 27.08%, rgba(113, 204, 229, 0.35) 45.31%, rgba(144, 213, 231, 0.11) 65.1%, rgba(158, 216, 231, 0.02) 78.12%, rgba(177, 221, 233, 0) 95.83% ); left: 50%; top: 50%; transform: translate(-50%, -50%); } .hidden { visibility: hidden; } svg { position: absolute; bottom: 200px; left: 0; top: 90%; } .no-highlight { /* bad for accessibility - please don't use this in real world applications */ -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> </head> <body > <div class="btnContainer"> <svg width="100" height="220" viewBox="0 0 100 220" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="rope" d="M50 0V130" stroke="#333842" stroke-width="6" /> <path id="rope-original" d="M50 0V130" stroke="black" stroke-width="1" class="hidden" /> <path id="rope-extended" d="M50 0V170" stroke="black" stroke-width="1" class="hidden" /> <path id="rope-compressed" d="M50.6794 99.5395C50.6794 99.5395 51.0304 93.3539 50.6794 89.416C49.698 78.405 40.6105 73.7631 41.2462 62.7267C42.1339 47.3139 63.6882 46.1634 64.4843 30.7456C65.1561 17.7347 50.6794 0.375.........完整代码请登录后点击上方下载按钮下载查看
网友评论0