今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单,但效果很好,非常漂亮。一起看下效果图:

在线预览   源码下载

实现的代码。

html代码:

 <div align="center">
<div class="contener">
<div class="txt_button">
WIFEO</div>
<div class="circle">
&nbsp;</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实现的鼠标经过按钮特效的更多相关文章

  1. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

  2. 一款纯css3实现的发光屏幕旋转特效

    今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="s ...

  3. css3实现的鼠标经过按钮特效

    今天要为各网友再带来一款css实现的鼠标经过按钮的特效.按钮初始时,边框为断开的按钮,当鼠标经过按钮时动画变为封闭的边框.效果图如下: 在线预览   源码下载 我们一起看下实现的代码: html代码: ...

  4. 推荐10款纯css3实现的实用按钮

    在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...

  5. 纯css3实现的鼠标悬停动画按钮

    今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  6. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

  7. 一款纯css3实现的动画按钮

    今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览    ...

  8. 一款纯css3实现的超炫3D表单

    今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览   源码下载 实现的代码. html代码 ...

  9. 一款纯css3实现的条纹加载条

    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...

随机推荐

  1. oracle-imp导入小错filesize设置

    ***********************************************声明*************************************************** ...

  2. kubernetes 无法删除 pod 问题的解决

    [摘要] kubernetes 可能会产生垃圾或者僵尸pod,在删除rc的时候,相应的pod没有被删除,手动删除pod后会自动重新创建,这时一般需要先删除掉相关联的resources,实际中还要具体情 ...

  3. C-边界对齐

    转自:http://blog.csdn.net/b_h_l/article/details/7738197 许 多实际的计算机系统对基本类型数据在内存中存放的位置有限制,它们会要求这些数据的首地址的值 ...

  4. logback+slf4j作为日志系统

    一.logback简介 log4j和logback作者是同一人:CekiGülcü.log4j和logback都是实打实的日志系统. commons-logging,slf4j这两者是日志大管家.sl ...

  5. Mustache模板引擎

    Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...

  6. jQuery+ajax中,让window.open不被拦截(转)

    方法1:<input type="button" class="preview" value="预览"/>$('.preview ...

  7. repcached配置与简单測试

    安装libevent-devel watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFueXVlcWk=/font/5a6L5L2T/fontsize/40 ...

  8. Spring Boot热部署(springloader)

    使用方式一 在pom.xml文件添加依赖包: <plugin> <groupId>org.springframework.boot</groupId> <ar ...

  9. sureface 屏幕残影问题官方解决方案 - 卸载显卡驱动

    您进入桌面,左下角微软图标(单击右键),选择设备管理器,点开“显示适配器”前面的小三角,找到“Intel(r) hd gRAPHICS 520”, 单击右键卸载,卸载的时候不要勾选“删除此设备的驱动软 ...

  10. docker lnmp php

    使用 Docker 构建 LNMP 环境 https://segmentfault.com/a/1190000008833012 Docker 快速上手指南 https://segmentfault. ...