div+css实现炫酷走光悬浮按钮动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现炫酷走光悬浮按钮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!--CodingMaker--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'); * { box-sizing: border-box; font-family: 'PT Sans', sans-serif; margin: 0; padding: 0; } body { align-items: center; background: #350048; display: flex; justify-content: center; position: relative; min-height: 100vh; } .container { display: flex; flex-wrap: wrap; justify-content: space-around; width: 200px; } .container .btn { height: 50px; margin: 20px; margin-bottom: 40px; position: relative; width: 155px; } .container .btn a { align-items: center; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2); color: #fff; display: flex; font-size: 18px; font-weight: 700; left: 0; top: 0; position: absolute; height: 100%; width: 100%; justify-content: center; letter-spacing: 1px; text-decoration: none; overflow: hidden; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(15px); z-index: 1; transition: 0.5s; } .container .btn:hover a { letter-spacing: 2px; } .container .btn a::before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(to left, rgba(255,255,255,0.15), transparent); transform: skewX(45deg) translateX(0); transition: 0.5s; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0