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实现进度条和订单进度条>,但是呢, ...
随机推荐
- Mac下的类似apt-get的包管理工具Homebrew（笔记）
对于一个习惯了在 Ubuntu 的终端上通过 apt-get 来安装工具软件的我来说,也希望在Mac上找到类似的工具,能很方便的一条命令就能安装所需的软件,而不用手工的去查找下载编译,或者是折腾安装所 ...
- Mac下没有权限启动tomcat的解决办法
问题描述 在Mac中通过./startup.sh执行启动脚本文件,启动tomcat时报如下错误: -bash: ./startup.sh: Permission denied 解决方法 错误信息说明了 ...
- Vmware无法获取快照信息 锁定文件失败
今天早上起来发现虚拟机崩了: 造成原因: 如果使用VMWare虚拟机的时候突然系统崩溃蓝屏,有一定几率会导致无法启动, 会提示:锁定文件失败,打不开磁盘或快照所依赖的磁盘: 这是因为虚拟机在运行的时候 ...
- fullPage.js学习笔记
中秋节,一个人呆着,挺无聊的,还是学习最有趣,不论是什么,开阔视野都是好的. 参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看 ...
- PE文件格式(加密与解密3)(一)
本次的了解主要讲解 PE的基本概念.MS-DOS文件头.PE文件头.区块.输入表.输出表等. 这里我将会结合一个简单的小程序来加深我对PE文件结构的了解. 使用学习工具:有StudyPE.LordPE ...
- 浩瀚PDA开单器-结束手工开单模式【百货、商超】PDA安卓智能手持POS 进销存管理系统移动收银管理软件
移动销售终端:先进的跨平台技术,支持智能PDA等移动终端提供移动销售开单.移动POS.移动查询货品.移动盘点等功能. 移动开单器的操作说明 第一步:选客户 Ø 用户在空白开单主页左划屏幕 ...
- Shell运算符：Shell算数运算符、关系运算符、布尔运算符、字符串运算符等
摘自:http://c.biancheng.net/cpp/view/2736.html
- 0_MVC+EF+Autofac(dbfirst)轻型项目框架_基本框架
前言 原来一直使用他人的开源项目框架,异常的定位会很麻烦,甚至不知道这个异常来自我的代码还是这个框架本身.他人的框架有一定的制约性,也有可能是我对那些框架并没深入了解,因为这些开源框架在网上也很难找到 ...
- bzoj2342还是马拉车
就好比第一次写主席树的时候写了30行,第二次写了5行 这次马拉车只剩下 ,id=,mx=;i<=n;i++) { -i],mx-i):;a[i-p[i]]==a[i+p[i]+];p[i]++) ...
- 基于synchronized 或 ReadWriteLock实现 简单缓存机制
package cn.xxx.xxx; import java.util.HashMap; import java.util.Map; import java.util.concurrent.lock ...