一款纯css3实现的鼠标经过按钮特效
今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单,但效果很好,非常漂亮。一起看下效果图:
实现的代码。
html代码:
<div align="center">
<div class="contener">
<div class="txt_button">
WIFEO</div>
<div class="circle">
</div>
</div>
</div>
css3代码:
.contener
{
width: 300px;
height: 60px;
background-color: #00bcd4;
line-height: 60px;
color: #ffffff;
font-weight:;
font-family: 'Roboto';
font-size: 25px;
position: relative;
overflow: hidden;
cursor: pointer;
box-shadow:1px 1px 1px #333333;
}
.txt_button
{
position: absolute;
width: 100%;
}
.contener:hover .circle
{
-webkit-animation:oblik 0.4s ease-in;
-webkit-transform-origin: 50% 50%;
-moz-animation:oblik 0.4s ease-in;
-moz-transform-origin: 50% 50%;
-ms-animation:oblik 0.4s ease-in;
-ms-transform-origin: 50% 50%;
animation:oblik 0.4s ease-in;
transform-origin: 50% 50%;
width: 100px;
height: 100px;
border-radius: 50%;
}
@-webkit-keyframes oblik {
0% {opacity:;-webkit-transform:scale(0);}
100% {opacity:;-webkit-transform:scale(5);background-color: #006064;}
}
@-moz-keyframes oblik {
0% {opacity:;-moz-transform:scale(0);}
100% {opacity:;-moz-transform:scale(5);background-color: #006064;}
}
@-ms-keyframes oblik {
0% {opacity:;-ms-transform:scale(0);}
100% {opacity:;-ms-transform:scale(5);background-color: #006064;}
}
@keyframes oblik {
0% {opacity:;transform:scale(0);}
100% {opacity:;transform:scale(5);background-color: #006064;}
}
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/9086
一款纯css3实现的鼠标经过按钮特效的更多相关文章
- 一款纯css3实现的颜色渐变按钮
之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览 ...
- 一款纯css3实现的发光屏幕旋转特效
今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="s ...
- css3实现的鼠标经过按钮特效
今天要为各网友再带来一款css实现的鼠标经过按钮的特效.按钮初始时,边框为断开的按钮,当鼠标经过按钮时动画变为封闭的边框.效果图如下: 在线预览 源码下载 我们一起看下实现的代码: html代码: ...
- 推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
- 纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- 纯css3实现的动画加载特效
之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="wrap& ...
- 一款纯css3实现的动画按钮
今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览 ...
- 一款纯css3实现的超炫3D表单
今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览 源码下载 实现的代码. html代码 ...
- 一款纯css3实现的条纹加载条
之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
随机推荐
- oracle-imp导入小错filesize设置
***********************************************声明*************************************************** ...
- kubernetes 无法删除 pod 问题的解决
[摘要] kubernetes 可能会产生垃圾或者僵尸pod,在删除rc的时候,相应的pod没有被删除,手动删除pod后会自动重新创建,这时一般需要先删除掉相关联的resources,实际中还要具体情 ...
- C-边界对齐
转自:http://blog.csdn.net/b_h_l/article/details/7738197 许 多实际的计算机系统对基本类型数据在内存中存放的位置有限制,它们会要求这些数据的首地址的值 ...
- logback+slf4j作为日志系统
一.logback简介 log4j和logback作者是同一人:CekiGülcü.log4j和logback都是实打实的日志系统. commons-logging,slf4j这两者是日志大管家.sl ...
- Mustache模板引擎
Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...
- jQuery+ajax中,让window.open不被拦截(转)
方法1:<input type="button" class="preview" value="预览"/>$('.preview ...
- repcached配置与简单測试
安装libevent-devel watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFueXVlcWk=/font/5a6L5L2T/fontsize/40 ...
- Spring Boot热部署(springloader)
使用方式一 在pom.xml文件添加依赖包: <plugin> <groupId>org.springframework.boot</groupId> <ar ...
- sureface 屏幕残影问题官方解决方案 - 卸载显卡驱动
您进入桌面,左下角微软图标(单击右键),选择设备管理器,点开“显示适配器”前面的小三角,找到“Intel(r) hd gRAPHICS 520”, 单击右键卸载,卸载的时候不要勾选“删除此设备的驱动软 ...
- docker lnmp php
使用 Docker 构建 LNMP 环境 https://segmentfault.com/a/1190000008833012 Docker 快速上手指南 https://segmentfault. ...