一款纯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实现的条纹加载条.带有响应式的效果.效果图如下 : ...
随机推荐
- 自定义AppSession
TelnetSession.cs public class TelnetSession:AppSession<TelnetSession> { protected override voi ...
- Scala的运算符优先级:
运算符优先级决定术语的表达式分组.这会影响一个表达式是如何进行计算.某些运算符的优先级高于其他;例如,乘法运算符的优先级比所述加法运算符优先级更高: 例如X =7 + 3* 2;这里,x 被赋值13, ...
- Win10有效降低磁盘100%读写
具体方法: 1.按下WIN+R调出运行,然后输入 regedit 回车; 2.在注册表编辑器中定位到:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet001\Se ...
- vue-router实现SPA购物APP基本功能
概述 vue-router是vue中的一个核心插件,用它来实现SPA购物APP基本功能 详细 代码下载:http://www.demodashi.com/demo/10725.html vue-rou ...
- Linux命令行上执行操作,不退回命令行的解决方法
问题描述: 如果你现在登录Centos执行了某个操作,但是操作一直占用命令行,命令行显示的也都是这个命令相关的操作,我想做其它事情 ,该怎么办呢 ? 解决方法: 根据<Linux命令行与Shel ...
- C#中的Invoke和BeginInvoke
一.Control#Invoke() 和Control#BeginInvoke() 在非UI线程中调用MessageBox.Show()结果是非模态对话框: 在UI线程中调用MessageBox.Sh ...
- Linux安装JDK详细步骤(rpm方式)
1. 先从网上下载jdk(jdk-6u32-linux-i586-rpm) ,下载后放在/home目录中,当然其它地方也行. 进入安装目录 #cd /home#cp jdk-6u32-linux-i5 ...
- ASP.NET MVC之Layout布局与@RenderBody、@RenderPage、@RenderSection
@RenderBody @RenderBody是布局页(_Layout.cshtml)通过占位符@RenderBody占用独立部分,当创建基于此布局页的试图时,视图的内容会和布局页合并,而新创建的视图 ...
- RHCE7 管理II-6ACL的使用
ACL允许向文件分配细化的权限.除标准的文件所有者.组所有者.和其他文件权限之外,还可以指定用户或组,以及uid或guid确定的用户和组授予权限. 命令: ·setfacl 设置acl策略 ·getf ...
- python3 functools partial 用于函数的包装器详解
一.partial 的作用: partial 用于对一个已有函数进行包装,达到功能的定制的目的. 二.例子: 假设我们要完成两个功能,第一个功能是完成两个数相加,第二个功能是给一个自增一下 1.传统方 ...