CSS3 制作一个边框向周围散开的按钮效果
我们将要达到的是如下的效果(若效果未出现请刷新)：
分析
主要还是运用CSS3的transition, animation, transform还有渐变背景等特性。
- 由于按钮在鼠标进入时有不同的样式，所以要对其:hover状态运用另外的背景样式
- 通过对按钮的:after状态添加一个内容为空的元素，并给其一个边框，这样在鼠标进入后我们让这个隐藏的空元素变大直到淡出，就得到我们看到的效果了
构建基本按钮样式
做为例子，我们的页面会很简单，就放一个a标签作为按钮，然后对其写样式让它看起来更像一个按钮。并定义好:after元素。
<style type="text/css">
.button{
cursor: pointer;
text-decoration: none;
padding: 10px;
color: #fff;
border-radius: 10px;
position: absolute;
top: 100px;
left: %;
background: linear-gradient(#93c, #50c);
border:1px solid purple;
}
.button:after{
content: "";
position: absolute;
top: ;
left: ;
width: %;
height: %;
border-radius: 10px;
opacity: ;
border:1px solid purple;
}
.button:hover{
background: linear-gradient(#b5e, #93c);
}
</style>
<body>
<a class="button" href="javascript:void(0);" >Fake Button</a>
</body>
添加动画
首先用keyframes定义动画
@-webkit-keyframes boom {
0% {
opacity:
}
5% {
opacity:
}
100% {
-webkit-transform: scale(.);
transform: scale(.);
opacity:
}
}
@keyframes boom {
0% {
opacity:
}
5% {
opacity:
}
100% {
transform: scale(.);
transform: scale(.);
opacity:
}
}
再将其运用到按钮后面隐藏的元素上
.button:hover:after {
-webkit-animation: boom 0.5s ease;
animation: boom 0.5s ease;
}
扩展
另外，我还发现一个jQuery插件jQuery.twinkle专门做这样的效果，因为是通过js做的，所以原理跟上面的完全不一样，但这个插件提供的效果丰富，且很炫很有创意，大家可以去欣赏下。下面是一个效果的截图。
代码下载
度娘盘：http://pan.baidu.com/s/1kT7c8gJ
REFERENCE
- A working button on CodePen: https://codepen.io/signup/plans/
- A collection of the shining effect by using a jQuery plugin : http://larsjung.de/twinkle/
- jQuery twinkle plugin: http://larsjung.de/twinkle/
CSS3 制作一个边框向周围散开的按钮效果的更多相关文章
- 一个类似抖音 APP 拍摄按钮效果的控件
TouchButton 一个类似抖音 APP 拍摄按钮效果的控件 效果图预览 用法 <net.angrycode.library.TouchButton android:id="@+i ...
- 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader
最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...
- 使用CSS3 制作一个material-design 风格登录界面
心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css ...
- css3制作一个漂亮的按钮
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAAA4CAIAAAAO41POAAAGWklEQVRogeWabWwTdRzH/8EwMb6Q69
- css3 制作一个遮罩
思路:1.显示两块图片,2.图片区域(初始隐藏),3.鼠标移入,遮罩显示,此时遮住图片,4.鼠标移出,遮罩恢复初始状态 用到两个css3 属性:transtion ,transform 用法: 1. ...
- 使用CSS3制作72个webapp图标
前言 移动网络带宽的快慢直接影响webapp应用体验效果的优差,其中加载图片是很耗流量的,所以对这一方面的性能优化是很需要的.一般对于那些小而多的图片(图标)都会采用sprite合并成一张图片来减少h ...
- 制作图片边框：《CSS3 Border-image》
一个边框图片border-image
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
随机推荐
- 使用ZwMapViewOfSection创建内存映射文件总结
标 题: [原创]使用ZwMapViewOfSection创建内存映射文件总结 作 者: 小覃 时 间: 2012-06-15,02:28:36 链 接: http://bbs.pediy.com/s ...
- select2 清空数据
最近用select2插件,发现用jquery重置不好使,最后搜罗了一把发现下面这个方法可以间接的实现,有空还得看看插件的API $('#integratorId').select2('data', n ...
- 【转】《从入门到精通云服务器》第四讲—DDOS攻击
上周咱们深入分析了云服务器的配置问题,好了,现在手上有了云服务器之后,我们又不得不提它:DDOS攻击.这是所有运维者的心头痛,也是任何公司听闻后都将心惊胆战的强大对手.下面我们将用浅显易懂的方式讲述什 ...
- 利用Simple-RTMP-Server（SRS）来进行直播
1.下载SRS 官方地址:http://www.ossrs.net/srs.release/releases/ 百度地址:http://pan.baidu.com/s/1kV8WQpx 2.编译安装S ...
- 半吊子学习Swift--天气预报程序-准备工作
MacBookPro买完快半年了,当初想着买个本本学点ios,买完就看了几天的教程[捂脸],最近发现人都要废了,想重新开始学习Swift并将每天的进程通过博客发布来督促自己. 由于文笔不好,接触Swi ...
- 介绍两个挺好用的基于Jquery的上传工具
一.ajaxFileUpload 二.fineUploader
- 文本选择问题： css & js
CSS: /*Disable browser selection*/ .disableselect { -webkit-user-select: none; -moz-user-select: non ...
- QGis、Gdal本地中文路径问题
编译qgis完整项目后,由于Gdal库的原因,中文路径下通过添加矢量数据中数据库中是没有OGR的Oracle数据库功能的: 最开始打算通过重新编译gadl库从内部支持中文的(有成功的麻烦也请告诉我), ...
- 关于MySQL 的LEFT JOIN ON的问题
今天在查询视图时,遇到了一个问题. 因为mysq不能嵌套select的子查询.所以我把子查询建成了视图b,主查询通过left join on关联视图b ,形成视图a. 由于视图b中也有left joi ...
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...