css3实现的鼠标经过按钮特效
css3 实现 按钮 鼠标 特效 经过
2023-09-27 14:28:19 时间
今天要为各网友再带来一款css实现的鼠标经过按钮的特效。按钮初始时,边框为断开的按钮,当鼠标经过按钮时动画变为封闭的边框。效果图如下:
我们一起看下实现的代码:
html代码:
<body> <a target="_blank" class="btn-edge" href="http://www.w2bc.com/shili">Hover Me</a> </body>
css代码:
*, *:before, *:after { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { padding-top: 10%; text-align: center; overflow-x: hidden; } .btn-edge { position: relative; display: inline-block; padding: 1rem 2rem; font-family: 'Titillium Web' , sans-serif; font-weight: 700; text-decoration: none; font-size: 3rem; color: #333; background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)); background-image: -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333); background-image: linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333); background-repeat: no-repeat; -webkit-background-size: 2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem; background-size: 2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem; background-position: 0 0, 100% 0, 0 100%, 100% 100%; -webkit-box-shadow: inset 0 0 0 5px rgba(255, 99, 71, 0); box-shadow: inset 0 0 0 5px rgba(255, 99, 71, 0); -webkit-transition: background-size 1s .4s, -webkit-box-shadow .4s, color .4s; transition: background-size 1s .4s, box-shadow .4s, color .4s; -webkit-transform: translateZ(0); transform: translateZ(0); } .btn-edge:hover { color: tomato; -webkit-background-size: 100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%; background-size: 100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%; -webkit-box-shadow: inset 0 0 0 5px tomato; box-shadow: inset 0 0 0 5px tomato; -webkit-transition: background-size 1s, -webkit-box-shadow .4s .6s, color .4s .6s; transition: background-size 1s, box-shadow .4s .6s, color .4s .6s; }
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/6366
相关文章
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- CSS3实现翻转菜单效果
- css3动画从入门到精通
- CSS3实现文本垂直排列
- BonBon - 使用 CSS3 制作甜美的糖果按钮
- 使用 CSS3 动画实现的 3D 图片过渡特效
- 使用 jQuery & CSS3 实现翻转的作品集滑块
- Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
- CSS3实现单行、多行文本溢出(省略号的形式出现)
- 前端css3实现角标【二维式与立体式角标实现】
- 巧用CSS3滤镜实现图片不同渲染效果
- CSS3实现京东图片鼠标滑过流光效果
- 16款纯CSS3实现的loading加载动画
- 基于jQuery CSS3鼠标点击动画效果
- 基于jQuery/CSS3实现拼图效果的相册插件
- 基于CSS3自定义美化复选框Checkbox组合
- 纯css3实现的鼠标悬停动画按钮
- 一款jquery和css3实现的卡通人物动画特效
- 一款纯css3实现的动画按钮
- 一款纯css3实现的响应式导航
- 纯css3实现图片三角形排列
- 一款纯css3实现的动画加载导航
- 一款纯css3实现的翻转按钮
- 纯css3实现的幽灵按钮导航
- 几行css3代码实现超炫加载动画
- css3实现可以计算的自适应布局——calc()
- 编写自己的代码库(css3常用动画的实现)