原生js+css实现揭开衣服纽扣交互效果代码
代码语言:html
所属分类:动画
代码描述:原生js+css实现揭开衣服纽扣交互效果代码,点击纽扣即可揭开纽扣。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --clr: tomato; --bg-clr: #333; --bg-lines: rgba(255,255,255,.05); --skew: skewX(1deg); --skew2: skew(-1deg); --gradient: 9.2deg; --grad-clr: Burlywood; } html { overflow: hidden; background: conic-gradient(at 50% 100%, var(--grad-clr) var(--gradient), transparent var(--gradient) calc(360deg - var(--gradient)), var(--grad-clr) calc(360deg - var(--gradient))), linear-gradient(to top left, transparent 48.5%, var(--bg-lines) 48.5%, var(--bg-lines) 50.5%, transparent 50.5%), linear-gradient(to top right, transparent 48.5%, var(--bg-lines) 48.5%, var(--bg-lines) 50.5%, transparent 50.5%), var(--bg-clr); background-size:100vw 100vh, 50px 50px, 50px 50px, 100% 100%; } body { margin: 0; } html:after { content:''; width: 50vh; aspect-ratio: 1 / 1; position: absolute; left: 50%; bottom: 7vh; transform: translateX(75%); border-radius: 1vh 1vh 5vh 5vh; background: linear-gradient(to top left, transparent 48.5%, var(--bg-lines) 48.5%, var(--bg-lines) 50.5%, transparent 50.5%), linear-gradient(to top right, transparent 48.5%, var(--bg-lines) 48.5%, var(--bg-lines) 50.5%, transparent 50.5%), var(--bg-clr); background-size:50px 50px, 50px 50px, 100% 100%; box-sizing: border-box; box-shadow: 0 -10px 20px rgba(0,0,0,.5), inset 0 0 100px rgba(0,0,0,.75); border-top: 1px solid #222; outline-offset: -15px; outline: 2px dashed #333; } body:before, body:after { content:''; width: 30vh; height: 110vh; background: radial-gradient(1vh 4vh at 47% 25%, rgba(0,0,0,.25) 1.75vh, transparent 2vh), radial-gradient(1vh 4vh at 50% 25%, rgba(0,0,0,.35) 1.75vh, transparent 2vh), radial-gradient(1vh 4vh at 47% 50%, rgba(0,0,0,.25) 1.75vh, transparent 2vh), radial-gradient(1vh 4vh at 50% 50%, rgba(0,0,0,.35) 1.75vh, transparent 2vh), radial-gradient(1vh 4vh at 47% 75%, rgba(0,0,0,.25) 1.75vh, transparent 2vh), radial-gradient(1vh 4vh at 50% 75%, rgba(0,0,0,.35) 1.75vh, transparent 2vh), linear-gradient(to top left, transparent 48.5%, var(--bg-lines) 48.5%, var(--bg-lines) 50.5%, transparent 50.5%), linear-gradient(to top right, transparent 48.5%, var(--bg-lines) 48.5%, var(--bg-lines) 50.5%, transparent 50.5%), var(--bg-clr); background-size: 100% 100%, 100% 100%,100% 100%, 100% 100%,100% 100%, 100% 100%, 50px 50px, 50px 50px, 100% 100%; background-repeat: no-repeat, no-repeat,no-repeat, no-repeat,no-repeat, no-repeat, repeat, repeat, repeat; position: absolute; left: calc(50% - 15vh); top: -5vh; box-sizing: border-box; border-left: 5px solid #333; border-right: 5px solid #333; box-shadow: inset 0 0 25px black, 0 0 25px rgba(0,0,0,1); transform-origin: 50% 100%; transform: var(--skew2); outline-offset: -15px; outline: 2px dashed #333; z-index: 9; transition: .75s; } body:after { transform: var(--skew) scaleX(-1) ; z-index: -1; } .btn { width: 24vh; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(100% 10% at 50% 50%, #555 10%, transparent 10.5%), radial-gradient(10% 100% at 50% 50%, #444 10%, transparent 10.5%), radial-gradient(circle at 50% 37.5%, var(--bg-clr) 10%, transparent 10.5%), radial-gradient(circle at 50% 62.5%, var(--bg-clr) 10%, transparent 10.5%), radial-gradient(circle at 37.5% 50%, var(--bg-clr) 10%, transparent 10.5%), radial-gradient(circle at 62.5% 50%, var(--bg-clr) 10%, transparent 10.5%), .........完整代码请登录后点击上方下载按钮下载查看
网友评论0