div+css实现软硬菜刀云朵效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现软硬菜刀云朵效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { overflow: hidden; } .btn-container { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; padding: 20px; position: absolute; width: 100%; height: 100vh; top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; } .btn { background-color: #fff; color: #fff; height: 4.4rem; width: 10rem; text-align: center; line-height: 4.5rem; margin: 0 auto; font-size: 1.5rem; user-select: none; } .btn-txt{ height: 100%; width: 60%; position: relative; margin: 0 auto; font-size: 1.8rem; } .btn:hover { cursor: pointer; } .soft-container { min-width: 20rem; height: 100vh; background: #f9f9f9; } .sharp-container{ background: #222; min-width: 20rem; height: 100vh; } .soft { color: #222; background: #fff; border-radius: 2rem; transition: .2s; animation: puff infinite 5s; filter: drop-shadow(10px 7px 0.75rem #ddd); top: 50%; left: 0; position: relative; } .soft-txt{ font-family: 'Rubik Bubbles'; background: -webkit-linear-gradient(#89CFF0,#87CEEB); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } .soft div:nth-child(2) { background-color: #fff; height: 60px; width: 60px; border-radius: 100%; position: relative; z-index: -2; top: -135%; left: 13%; } .soft div:nth-child(3) { background-color: #fff; height: 80px; width: 80px; border-radius: 100%; position: relative; z-index: -1; top: -235%; left: 35%; } .soft:hover { filter: drop-shadow(15px 12px 1rem #ddd); } .soft:active{ filter: drop-shadow(8px 5px 0.5rem #ddd); transform: translate(2%,2%); } .sharp{ border-top-left-radius: 2rem; background-image: linear-gradient(to bottom,#eee 0%,#aaa 85%,#ccc 85%); transition: .2s; top: 50%; right: 0; position: relative; } .sharp-txt:before { content: ''; position: absolute; top: 0; left: -300px; width: 100%; height: 100%; background: rgba(255,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0