编程知识 购物 网址 新闻 笑话 | 软件 日历 阅读 图书馆 China 头条阅读 学淘股 China Travel
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
   -> Html-Css -> CSS3 按钮特效(一) -> 正文阅读

[Html-Css]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:0;
    margin:0;
}
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:1;
}

.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:0;
    width:0;
}

.fade-middle-out:before,.fade-middle-out:after,
.fade-middle-in:before,.fade-middle-in:after,
.bounce-bottom:before
{
    height: 0;
    width: 100%;
    left:0;
}

/* 弹跳元素设置时间线 使用三次贝塞尔曲线 */
.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: 0;
    top:0;
    left: 0;
}

.fade-bottom:before, .fade-top:before,.bounce-top:before{
    height: 0;
    width: 100%;
    left: 0;
}
.fade-top:before,.bounce-top:before,.fade-middle-out:before{
    top:0;
}

.fade-bottom:before,.fade-middle-out:after,.bounce-bottom:before{
    bottom: 0;
}

.fade-left:before,.fade-center-in:before,.bounce-left:before{
    left:0;
}

.fade-right:before,.fade-center-in:after,.bounce-right:before{
    right:0;
}

.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: 1;
}

.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属性所设置的高度大小
  Html-Css 最新文章
近期前端中的 一些常见的面试题
近期前端中的 一些常见的面试题
localStorage使用总结
前端
图文详解前端CSS中的Grid布局,你真的可以5
CSS3 按钮特效(一)
HTML
ionic APP二维码插件 地址
为什么在CSS中不要再使用@import
CSS 笔记
上一篇文章      下一篇文章      查看所有文章
加:2017-12-09 23:29:53  更:2017-12-09 23:29:57 
 
360图书馆 软件开发资料 购物精选 新闻资讯 Chinese Culture 三丰软件 开发 中国文化 阅读网 头条阅读 学淘股 China Travel 日历 万年历 2020年7日历
2020-7-13 22:04:02
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程知识