zoukankan      html  css  js  c++  java
  • 基础理解2:CSS3按钮动画

    一个Css3按钮效果很好,仔细看了一下发现就是::after,::before然后加上transition,transform等效果实现,主要关注一下几点就能轻松实现:

    1、伪类需要position定位,相对的button也需要定位一下

    2、设置一下z-index属性,一般button设置为1, button::after或者button:before设置为-1即可

    3、transition实现动画效果,如果需要transform旋转一下

     效果如下:

    代码如下:

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title></title>
    
    <meta charset="utf-8" />
    
    <style type="text/css">
    
    button:hover:after {
    
    width: 100%;
    
    }
    
       
    
    button:hover {
    
    color: #000;
    
    }
    
       
    
    button:after {
    
    content: '';
    
    background-color: #fff;
    
    transition: all .5s;
    
    width: 0%;
    
    position: absolute;
    
    top: 3px;
    
    left: 0px;
    
    height: 34px;
    
    z-index: -1;
    
    }
    
       
    
    button {
    
    width: 100px;
    
    height: 40px;
    
    border: 0px;
    
    color: white;
    
    background-color: red;
    
    font-size: 16px;
    
    position: relative;
    
    z-index: 1;
    
    cursor: pointer;
    
    font-family: 'Microsoft YaHei';
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <button>
    
    保存
    
    </button>
    
    </body>
    
    </html>

       

       

  • 相关阅读:
    十日冲刺第一次会议任务领取详解
    Android studio新建class文件报错
    代码整洁之道阅读笔记03
    本周学习进度条6
    echarts基本用法
    梦断代码阅读笔记01
    软件工程小组任务
    本周学习进度条5
    eclipse界面设置和常用技巧
    团队项目——TD课程通
  • 原文地址:https://www.cnblogs.com/Believeme/p/5587384.html
Copyright © 2011-2022 走看看