div+css实现科技玻璃质感checkbox开关效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现科技玻璃质感checkbox开关效果代码
代码标签: div css 科技 玻璃 质感 checkbox 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> body{ padding:140px; background: black; } .toggle-container { position: relative; width: 150px; display: flex; flex-direction: column; align-items: center; perspective: 800px; z-index: 5; } .toggle-wrap { position: relative; width: 100%; height: 60px; transform-style: preserve-3d; } .toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-track { position: absolute; width: 100%; height: 100%; background: rgba(0, 30, 60, 0.4); border-radius: 30px; cursor: pointer; box-shadow: 0 0 15px rgba(0, 80, 255, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.8); overflow: hidden; backdrop-filter: blur(5px); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border: 1px solid rgba(0, 150, 255, 0.3); } .toggle-track::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( ellipse at center, rgba(0, 80, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70% ), linear-gradient(90deg, rgba(0, 60, 120, 0.1) 0%, rgba(0, 30, 60, 0.2) 100%); opacity: 0.6; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; right: 2px; height: 10px; background: linear-gradient( 90deg, rgba(0, 170, 255, 0.3) 0%, rgba(0, 80, 255, 0.1) 100% ); border-radius: 30px 30px 0 0; opacity: 0.7; filter: blur(1px); } .track-lines { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); overflow: hidden; } .track-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient( 90deg, rgba(0, 150, 255, 0.3) 0px, rgba(0, 150, 255, 0.3) 5px, transparent 5px, transparent 15px ); animation: track-line-move 3s linear infinite; } @keyframes track-line-move { 0% { transform: translateX(0); } 100% { transform: translateX(20px); } } .toggle-thumb { position: absolute; width: 54px; height: 54px; left: 3px; top: 3px; background: radial-gradient( circle, rgba(10, 40, 90, 0.9) 0%, rgba(0, 20, 50, 0.8) 100% ); border-radius: 50%; box-shadow: 0 2px 15px rgba(0, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0