这是纯CSS3制作的炫丽键盘滑动按钮动画效果。 这组按钮特效共有5个效果,分别是按钮边框动画、上下边框动画、浮雕效果、流光效果和光波效果。 这5种按钮鼠标悬停特效不仅效果炫酷,而且代码简单,非常实用。
制作方法 HTML结构
第一个按钮鼠标悬停效果中css3 光波效果,使用SVG腰线动画制作按钮的边框动画。 其HTML结构如下:
Hover
其他治疗效果的HTML结构基本相同。
Hover Hover Hover Hover
CSS样式
首先为按钮及其父容器设置一些常用的CSS样式。
.buttons { display: table; height: 100%; width: 100%; } .container { display: table-cell; padding: 1em; text-align: center; vertical-align: middle; } .btn { color: #fff; cursor: pointer; display: block; font-size: 16px; font-weight: 400; line-height: 45px; margin: 0 auto 2em; max-width: 160px; position: relative; text-decoration: none; text-transform: uppercase; vertical-align: middle; width: 100%; } .btn:hover { text-decoration: none; }
按钮鼠标悬停的第一个效果是使用CSS驱动SVG进行动画。 IE10及以下浏览器不支持第一种效果。 有关 SVG 动画的信息css3 光波效果,您可以参考此处。
.btn-1 { background: #e02c26; font-weight: 100; } .btn-1 svg { height: 45px; left: 0; position: absolute; top: 0; width: 100%; } .btn-1 rect { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 422, 0; } .btn-1:hover { background: rgba(225, 51, 45, 0); font-weight: 900; letter-spacing: 1px; } .btn-1:hover rect { stroke-width: 5; stroke-dasharray: 15, 310; stroke-dashoffset: 48; -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); }
其他键盘滑动按键效果的CSS样式也很简单,具体请参考下载文件中的styles.css文件。