div+css实现逼真立体按钮点击效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现逼真立体按钮点击效果代码,拖动底部滑竿可改变按钮的形状。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; height: 100vh; justify-content: center; background: rgb(122,122,122); background: linear-gradient(205deg, rgba(122,122,122,1) 0%, rgb(30, 30, 31) 100%); margin: 0; } .out-container { --object-size: 330px; /* adjustable values below */ --radius: 50%; scale: 0.6; } .out-container, .out-container *{ background-color: #fff; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: var(--radius); overflow: hidden; } .out-container { width: var(--object-size); height: var(--object-size); border-radius: var(--radius); box-shadow: 10px -10px 20px 7px rgba(153, 153, 153, 0.2), -7px 20px 3px rgba(0, 0, 0, 1), -10px 30px 13px rgba(0, 0, 0, 1), -30px 80px 54px rgba(0, 0, 0, 0.8); background: linear-gradient(205deg, rgba(255,255,255,1) 0%, rgba(65,68,72,1) 100%); } .in-container { overflow: hidden; width: calc(var(--object-size) * 0.79); height: calc(var(--object-size) * 0.79); box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3), -20px 20px 25px rgba(0, 0,0, 0.5), -30px 200px 75px 100px rgba(0, 0, 0, 0.5), 0px 0px 15px 33px rgba(255, 255, 255, 0.7), -20px 20px 15px 35px rgba(0, 0, 0, 1); background: linear-gradient(205deg, rgba(255,255,255,1) 0%, rgba(65,68,72,1) 100%); } .in-out-container { width: calc(var(--object-size) * 0.58); height: calc(var(--object-size) * 0.58); transition: box-shadow 0.2s ease-in-out; box-shadow: inset 0px 0px 12px 100px rgba(0,0,0, 0), inset 0px 0px 12px 12px rgba(0, 0, 0, 0.1), 0px 0px 4px 5px rgba(0, 0, 0, 1), 10px -10px 12px 2px rgba(0, 0, 0, 0.4), 0px 0px 12px 27px rgba(255, 255, 255, 0.8), -20px 20px 15px 35px rgba(0, 0, 0, 0.7); background: linear-gradient(205deg, rgba(255,255,255,1) 0%, rgba(65,68,72,1) 100%); cursor: pointer; } .in-out-container.animate { animation: boxshadow 0.3s; } .in-out-container:hover{ box-shadow: inset 0px 0px 12px 100px rgba(0,0,0, 0.01), inset 0px 0px 12px 18px rgba(0, 0, 0, 0.1), 0px 0px 4px 5px rgba(0, 0, 0, 1), 10px -10px 12px 2px rgba(0, 0, 0, 0.4), 0px 0px 12px 27px rgba(255, 255, 255, 0.8), -20px 20px 15px 35px rgba(0, 0, 0, 0.7); } @keyframes boxshadow { 0% { box-shadow: inset 0px 0px 12px 100px rgba(0,0,0, 0), inset 0px 0px 12px 12px rgba(0, 0, 0, 0.1), 0px 0px 4px 5px rgba(0, 0, 0, 1), 10px -10px 12px 2px rgba(0, 0, 0, 0.4), 0px 0px 12px 27px rgba(255, 255, 255, 0.8), -20px 20px 15px 35px rgba(0, 0, 0, 0.7); background: linear-gradient(205deg, rgba(255,255,255,1) 0%, rgba(65,68,72,1) 100%); } 50% { box-shadow: inset 0px 0px 12px 100px rgba(0,0,0, 0.2), inset 0px 0px 12px 18px rgba(255, 255, 255, 0.2), 0px 0px 4px 5px rgba(0, 0, 0, 1), 10px -10px 12px 2px rgba(0, 0, 0, 0.4), 0px 0px 12px 27px rgba(255, 255, 255, 0.8), -20px 20px 15px 35px rgba(0, 0, 0, 0.7); } 100% { box-shadow: inset 0px 0px 12px 100px rgba(0,0,0, 0), inset 0px 0px 12px 12px rgba(0, 0, 0, 0.1), 0px 0px 4px 5px rgba(0, 0, 0, 1), 10px -10px 12px 2px rgba(0, 0, 0, 0.4), 0px 0px 12px 27px rgba(255, 255, 255, 0.8), -20px 20px 15px 35px rgba(0, 0, 0, 0.7); background: linear-gradient(205deg, rgba(255,255,255,1) 0%, rgba(65,68,72,1) 100%); } } .in-out-container svg{ position: absolute; width: 120px; height: 120px; background-color: tra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0