CSS3 按钮特效(一)
1. 实例
2.HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3-Fade</title>
<link rel="stylesheet" type="text/css" href="./fade.css">
</head>
<body>
<div class="container">
<div class="fade fade-in">
fade-in
</div>
<div class="fade fade-top">
fade-top
</div>
<div class="fade fade-bottom">
fade-bottom
</div>
<div class="fade fade-left">
fade-left
</div>
<div class="fade fade-right">
fade-right
</div>
<div class="fade bounce-top">
bounce-top
</div>
<div class="fade bounce-bottom">
bounce-bottom
</div>
<div class="fade bounce-left">
bounce-left
</div>
<div class="fade bounce-right">
bounce-right
</div>
<div class="fade fade-center-out">
fade-center-out
</div>
<div class="fade fade-center-in">
fade-center-in
</div>
<div class="fade fade-middle-out">
fade-middle-out
</div>
<div class="fade fade-middle-in">
fade-middle-in
</div>
</div>
</body>
</html>
3.CSS 代码
*{
padding:;
margin:;
}
html{
background: -webkit-radial-gradient(#222222, #000000);
background: radial-gradient(#222222, #000000);
height: 100%;
text-align: center;
width:100%;
}
.container{
width: 800px;
margin: 200px auto;
text-align: left;
}
.fade{
cursor: pointer;
box-sizing: border-box;
display: inline-block;
color: #09f;
background: white;
padding: 10px 20px;
text-align: center;
margin: 10px 0;
/* 设置相对定位 */
position: relative;
transition: all 0.3s;
/* 设置层次 会被before after在上面 */
z-index:;
}
.fade:hover{
color: white;
}
/* 其实使用背景颜色变化就可以的 但是这里为了做统一*/
.fade:before,.fade:after
{
display: block;
transition: all 0.3s;
background: #09f;
position: absolute;
content: '';
z-index: -1;
}
.fade-left:before,.fade-right:before,
.fade-center-out:before,.fade-center-out:after,
.fade-center-in:before,.fade-center-in:after,
.bounce-left:before,.bounce-right:before
{
height: 100%;
top:;
width:;
}
.fade-middle-out:before,.fade-middle-out:after,
.fade-middle-in:before,.fade-middle-in:after,
.bounce-bottom:before
{
height:;
width: 100%;
left:;
}
/* 弹跳元素设置时间线 使用三次贝塞尔曲线 */
.bounce-top:before,.bounce-bottom:before,
.bounce-left:before,.bounce-right:before{
transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
}
.fade-in:before{
height: 100%;
width: 100%;
opacity:;
top:;
left:;
}
.fade-bottom:before, .fade-top:before,.bounce-top:before{
height:;
width: 100%;
left:;
}
.fade-top:before,.bounce-top:before,.fade-middle-out:before{
top:;
}
.fade-bottom:before,.fade-middle-out:after,.bounce-bottom:before{
bottom:;
}
.fade-left:before,.fade-center-in:before,.bounce-left:before{
left:;
}
.fade-right:before,.fade-center-in:after,.bounce-right:before{
right:;
}
.fade-center-out:before{
right: 50%
}
.fade-center-out:after{
left: 50%
}
.fade-middle-in:before{
bottom:50%;
}
.fade-middle-in:after{
top:50%;
}
.fade-in:hover:before{
opacity:;
}
.fade-left:hover:before,.fade-right:hover:before,
.bounce-left:hover:before,.bounce-right:hover:before
{
width: 100%;
}
.fade-top:hover:before,.fade-bottom:hover:before,
.bounce-top:hover:before,.bounce-bottom:hover:before{
height: 100%;
}
.fade-center-out:hover:before,.fade-center-out:hover:after,
.fade-center-in:hover:before,.fade-center-in:hover:after{
width:50%;
}
.fade-middle-out:hover:before,.fade-middle-out:hover:after,
.fade-middle-in:hover:before,.fade-middle-in:hover:after
{
height:50%;
}
4. 练习
区别只是 heigth属性所设置的高度大小
CSS3 按钮特效(一)的更多相关文章
- 神奇的CSS3按钮特效
点击这里查看效果 以下是源代码: <!doctype html> <html> <!-- author: @simurai --> <head> < ...
- 10款CSS3按钮 - 程序员再也不用为按钮设计而发愁了...
这次主要给大家分享10款风格各异的CSS3按钮,如果你希望你的页面也能有很炫的样式,那么我相信这10款CSS3按钮就非常适合你,而且每一款都整理了源代码供参考,一起来看看吧. 1.绚丽的CSS3发光按 ...
- 10款CSS3按钮 - 再也不用为按钮设计而发愁了
这次主要给大家分享10款风格各异的CSS3按钮,如果你希望你的页面也能有很炫的样式,那么我相信这10款CSS3按钮就非常适合你,而且每一款都整理了源代码供参考,一起来看看吧. 1.绚丽的CSS3发光按 ...
- 7款外观迷人的HTML5/CSS3 3D按钮特效
1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- 一款纯css3实现的鼠标经过按钮特效
今天再给大家带来一款纯css3实现的鼠标经过按钮特效.这款按钮非常简单,但效果很好,非常漂亮.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: <div align=&qu ...
- 7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
- css3 javascript 实现菜单按钮特效
一个菜单按钮特效案例,简单的实现了动态效果. 代码效果预览地址: http://code.w3ctech.com/detail/2504 <div class="bar" i ...
- 5种漂亮的纯CSS3动画按钮特效
这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码 ...
随机推荐
- IDEA--java版本修改（jdk1.8改成jdk1.7）
转载:https://blog.csdn.net/huyishero/article/details/61916516
- Servlet访问Javabean并传结果给jsp
1.先建立包名: 2.建立实体类 参考二维表,考虑各个字段名字.类型 在entity包里面建立一个类,代码如下: public class House { private String id; pri ...
- 用bis和bic实现位级操作
20世纪70年代末至80年代末,DigitalEquipment的VAX计算机是一种非常流行的机型.它没有布尔运算AND和OR指令,仅仅有bis(位设置)和bic(位清除)这两种指令.两种指令的输入都 ...
- asp.net mvc + javascript生成下载文件
近期做的是对现有项目进行重构.WEB FROM改成MVC,其实也算是推倒重来了. 里面有一个导出功能,将数据输出成txt文件,供下载.原先的做法是有一个隐藏的iframe,在这个iframe的页面中设 ...
- 初识 flask
1,Python现阶段三大主流web框架Django, Tornado, Flask对比 Django主要特点是大而全,集成了很多组件,列如:Models Admin Form等等,不管用得用不着反正 ...
- Mac配置环境变量（Java，Android，Gradle，Nodejs，MongoDB，Maven，Hosts）
JAVA_HOME 配置环境变量 # 使用vim打开.bash_profile文件.加入java环境变量 $ vim .bash_profile export JAVA_HOME=$(/usr/lib ...
- PR 修改保存的增强 ME_UPDATE_REQUISITION
FUNCTION me_update_requisition."""""""""""&qu ...
- YTU 2438: 三人三鬼
2438: 三人三鬼 时间限制: 1 Sec 内存限制: 128 MB 提交: 35 解决: 9 题目描述 目标是将东岸的3人3鬼通过一只小船转移到西岸,希望以尽可能少的摆渡次数. 船的容量有限, ...
- 配置磁盘映射（在服务器和eclipse 中）
在eclipse中配置磁盘映射和项目名称访问省略:
- bzoj 3991 寻宝游戏
题目大意: 一颗树 有一个点的集合 对于每个集合的答案为 从集合内一个点遍历集合内所有点再返回的距离最小值 每次可以选择一个点 若在集合外便加入集合 若在集合内就删除 求每次操作后这个集合的答案 思路 ...