纯css实现超酷hover悬停效果
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Amazing Button Hover [Responsive]</title> <style> :root { --height: 100px; --width: 200px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); overflow: hidden; display: flex; justify-content: center; align-items: center; font-family: sans-serif; } .wrapper { width: calc(4 * var(--width)); height: calc(4 * var(--height)); display: flex; justify-content: center; align-items: center; } .button { position: relative; width: calc(0.8 * var(--width)); height: calc(0.7 * var(--height)); display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; margin: 0 0.8rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0, 0.22, 0.3, 1); } .button:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1); } .button span { color: #fff; font-size: 1rem; z-index: 10; text-transform: uppercase; letter-spacing: 2px; } .button._1 { background: #2980b9; } .button._2 { background: #8e44ad; } .button._3 { background: #16a085; } .button._4 { background: #e74c3c; } .button .back { position: absolute; width: 0; height: 0; filter: url(#filter); border-radius: 50%; z-index: 5; transition: all 2.5s cubic-bezier(0.1, 0.22, 0.3, 1); } .button._1 .back { left: -50%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0