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实现进度条和订单进度条>,但是呢, ...
随机推荐
- 开源Unity小插件CheatConsole
我们在开发游戏的过程中,通常都需要一些快捷的方式来进行一些非常规的测试,这些功能一般被称作控制台或者GM指令,比如虚幻竞技场中,可以使用~键呼出控制台,输入一些指令即可进行快捷设置,比如设置分辨率,全 ...
- Youth -Samuel Ullman
Samuel Ullman(塞缪尔.厄尔曼) Youth is not a time of life,it is a state of mind;青春不是年华,而是心境: it is not a ma ...
- EXT.NET 使用总结（3）--动态图表
动态生成雷达图--Radar 效果图: aspx页面代码: <ext:Panel ID="ResultPanel" Border="true" runat ...
- 安装Hive(独立模式 使用mysql连接)
安装Hive(独立模式 使用mysql连接) 1.默认安装了java+hadoop 2.下载对应hadoop版本的安装包 3.解压安装包 tar zxvf apache-hive-1.2.1-bin. ...
- jQuery判断checked的三种方法
今天在查看他人源码时看到在判断复选框是否选中时,与自己的写法不同: .is(":checked") vs .prop("checked") == true 因此 ...
- 详细讲述MySQL中的子查询操作 （来自脚本之家）
继续做以下的前期准备工作: 新建一个测试数据库TestDB: ? 1 create database TestDB; 创建测试表table1和table2: ? 1 2 3 4 5 6 7 8 9 1 ...
- TMemo.Text 回车键会变成#$D#$A，而非#13#10
mmoComplain: TMemo;//cxmComplain.Text 会造成回车键 转换成十六进制的字符串 #$D#$A,而非#13#10 //cxmComplain.Text范例:'风发的是' ...
- 使用极光推送(www.jpush.cn)向安卓手机推送消息【服务端向客户端主送推送】C#语言
在VisualStudio2010中新建网站JPushAndroid.添加引用json帮助类库Newtonsoft.Json.dll. 在web.config增加appkey和mastersecret ...
- Codeforces Round #377 (Div. 2)
#include <iostream> #include <stdio.h> #include <string.h> using namespace std; in ...
- SOAPUI使用教程-入门REST测试
首先,通过选择文件菜单中的“新建REST项目”选项创建从文件菜单中一个新的REST项目: 指定服务端点场下谷歌地图API网址: http://maps.googleapis.com/maps/api/ ...