全屏按钮交互切换动画效果
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Fullscreen Button Interaction</title> <style> :root { --bg: #2c3e50; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100vh; width: 100%; } body { background: var(--bg); width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } button { width: 150px; height: 150px; background: var(--bg); border: none; outline: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; } button.active .row .box._1:before { transform: translate(-35%, -35%); } button.active .row .box._2:before { transform: translate(35%, -35%); } button.active .row .box._3:before { transform: translate(-35%, 35%); } button.active .row .box._4:before { transform: translate(35%, 35%); } button .row { display: flex; } button .row .box { position: relative; width: 50px; height: 50px; overflow: hidden; } button .row .box:before, button .row .box:after { content: ''; position: absolute; width: 100%; height: 100%; transition: all 200ms ease; } button .row .box:before { border: 10px solid #fff; } button .row .box:after { border: 5px solid var(--bg); } button .row .box._1:before { left: 0; top: 0; } button .row .box._1:after { right: 0; bottom: 0; } button .row .box._2:before {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0