zoukankan      html  css  js  c++  java
  • 代码:CSS仿制 苹果按钮图标

    首先,先复习一下:CSS的线性渐变、径向渐变

    .linear{
        background-image:-webkit-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
        background-image:-moz-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
        background-image:-o-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
        background-image:linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
    }/*线性渐变*/
    
    .radial{
        background-image:-webkit-radial-gradient( yellow, orange,red);
        background-image:-moz-radial-gradient( yellow, orange,red);
        background-image:-o-radial-gradient( yellow, orange,red);
        background-image:radial-gradient( yellow, orange,red);
    }/*径向渐变*/

    CSS 仿制 苹果按钮图标:       2016-2-16

    <style type="text/css">
    html,body,ul,li,p{margin:0;padding:0;}
    /*线性渐变:多色*/
    .linear-white{background-image:linear-gradient(180deg, rgba(255,255,255,1),  rgba(255,255,255,0) 90%);}
    .linear1{background-image:linear-gradient(180deg, red, orange,yellow,yellow,red);}
    .linear2{background-image:linear-gradient(180deg, red, orange,yellow,green,blue,indigo,violet);}
    
    /*径向渐变*/
    .radial1{background-image:radial-gradient(at 50% 78%, yellow 8%, orange,red);}
    .radial2{background-image:radial-gradient(at 50% 78%, #fea6fc 8%,#c95ceb ,#5b0491 );}
    .radial3{background-image:radial-gradient(at 50% 78%, #5ebaf9 8%,#3871e3,#2244aa  );}
    .radial4{background-image:radial-gradient(at 50% 78%, #e0f2fc 8%,#5baadc,#0f4e79  );}
    .radial5{background-image:radial-gradient(at 50% 78%, #e9fcfc 8%,#a9beca,#465363  );}
    .radial6{background-image:radial-gradient(at 50% 78%, #fafafa 8%,#b5b5b5,#888888  );}
    .radial7{background-image:radial-gradient(at 50% 78%, #4dfd47 8%,#23e621,#028500  );}
    .radial8{background-image:radial-gradient(at 50% 78%, #fefa68 8%,#feba22,#aa5600  );}
    
    .img-circle{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
    .apple-btn{position:relative;width:100px;height:100px;margin:20px;float:left;}
    .mask{position:absolute;top:5px;left:13px;right:13px;height:50px;}
    .apple-btn p{position:absolute;color:#fff;top:50%;margin-top:-20px;font-size:32px;font-family:'Microsoft YaHei';width:100%;text-align:center;text-shadow:0 2px 5px #999;z-index:2;}
    .clear{clear:both;}
    </style>
    <h1>线性渐变</h1>
    <div class="apple-btn linear1 img-circle"><div class="mask linear-white img-circle"></div></div>
    <div class="apple-btn linear2 img-circle"><div class="mask linear-white img-circle"></div></div>
    <div class="clear"></div>
    <h1>径向渐变</h1>
    <div class="apple-btn radial1 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
    <div class="apple-btn radial2 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
    <div class="apple-btn radial3 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
    <div class="apple-btn radial4 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
    <div class="apple-btn radial5 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
    <div class="apple-btn radial6 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
    <div class="apple-btn radial7 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
    <div class="apple-btn radial8 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>

    ..

  • 相关阅读:
    UVA 408 (13.07.28)
    linux概念之用户,组及权限
    Java实现 蓝桥杯 历届试题 网络寻路
    Java实现 蓝桥杯 历届试题 约数倍数选卡片
    Java实现 蓝桥杯 历届试题 约数倍数选卡片
    Java实现 蓝桥杯 历届试题 约数倍数选卡片
    Java实现 蓝桥杯 历届试题 约数倍数选卡片
    Java实现 蓝桥杯 历届试题 约数倍数选卡片
    Java实现 蓝桥杯 历届试题 九宫重排
    Java实现 蓝桥杯 历届试题 九宫重排
  • 原文地址:https://www.cnblogs.com/qq21270/p/5192025.html
Copyright © 2011-2022 走看看