美文网首页
An_css渐变

An_css渐变

作者: android_en | 来源:发表于2017-09-02 11:04 被阅读32次

body 里的div

<div class="test">
    <a href="#" class="aLink">
        <span class="txt">¥29</span>
        ![](img/01.png)
        <span class="txt2">
            <span>this is a demo</span>
            Apple
        </span>
        <span class="btn">
            <span></span>
        </span>
    </a>
</div>

css样式

@charset "utf-8";
/* CSS*/
*{margin:0; padding:0; font-size:12px; font-family:Verdana;}
img{border:none;}
body{
    background:url(img/stucco.png);
}
.test{
    width:320px;
    height:90px;
    margin:30px auto;
    background:-webkit-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-moz-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-ms-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-o-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:#A9DB80;
    box-shadow:0 0 3px #999;
    border-radius:3px;
    transition:1s all ease;
    -webkit-transition:0.5s all ease;
    -moz-transition:0.5s all ease;
    -ms-transition:0.5s all ease;
    -o-transition:0.5s all ease;
    overflow:hidden;
}
.test .aLink{
    display:block;
    width:318px;
    height:88px;
    background:-webkit-linear-gradient(center top , #FFF 2%);
    background:-moz-linear-gradient(center top , #FFF 2%);
    background:-ms-linear-gradient(center top , #FFF 2%);
    background:-o-linear-gradient(center top , #FFF 2%);
    box-shadow:0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
    border-radius:3px;
    -webkit-border-radius:3px;
    -ms-border-radius:3px;
    position:relative;
    text-decoration:none;
    border:#484848 solid 1px;
    overflow:hidden;

}
.test .aLink .txt{
    position:absolute;
    font-size:28px;
    color:#6D954E;
    left:18px;
    top:26px;
    opacity:0;
    -webkit-transition:0.2s all ease;
    -moz-transition:0.2s all ease;
    -ms-transition:0.2s all ease;
    -o-transition:0.2s all ease;
    transition:0.2s all ease;
}
.test .aLink .img{
    position:absolute;
    width:70px;
    height:70px;
    display:block;
    z-index:2;
    top:12px;
    left:10px;
    -webkit-transition:0.2s all ease;
    -moz-transition:0.2s all ease;
    -ms-transition:0.2s all ease;
    -o-transition:0.2s all ease;
    transition:0.2s all ease;
}
.test .aLink .txt2{
    font-size:32px;
    color:#FFF;
    width:140px;
    overflow:hidden;
    display:block;
    text-shadow:0 0 2px #999999;
    position:absolute;
    left:80px;
    text-align:center;
    top:10px;
    font-family:"Comic Sans MS", cursive;
}
.test .aLink .txt2 span{
    font-size:14px;
    color:#FFF;
    display:block;
}
.test .aLink .btn{
    width:80px;
    display:block;
    height:88px;
    position:absolute;
    right:0;
    top:0;
    border-left:#484848 solid 1px;
    box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -webkit-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -ms-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -moz-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -o-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
}
.test .aLink .btn span{
    display:block;
    width:40px;
    height:40px;
    background:url(img/arrow_down.png) center center no-repeat #333;
    margin:24px auto;
    border-radius:50%;
    -webkit-transition:0.3s all ease;
    -moz-transition:0.3s all ease;
    -ms-transition:0.3s all ease;
    -o-transition:0.3s all ease;
}

/*动画*/
.test:hover{
    box-shadow:0 0 10px #666;
    box-shadow:0 0 10px #666;
}
.test:hover .img{
    width:150px;
    height:150px;
    left:-26px;
    top:-30px;
    opacity:0;
}
.test:hover .txt{
    opacity:1;
}

.test:active{
    box-shadow:0 0 0px #999;
    background:-webkit-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-moz-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-ms-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-o-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
}
.test:active .aLink{
    box-shadow:inset 2px 2px 3px #666666;
}
.test:active .btn{
    box-shadow:inset 1px 1px 1px #666666;
    box-shadow:inset 1px 1px 1px #666666);
}
.test:active .txt{
    color:#A9DB80;
}
.test:active .btn span{
    width:60px;
    height:60px;
    margin-top:15px;
    background-size:60%;
}

相关文章

  • An_css渐变

    body 里的div css样式

  • 渐变渐变

    再熟悉的东西,一段时间不去做,就会渐渐地对他变得陌生。 对陌生的东西,大多数数的时候,人们选择的是拒绝而不是接纳,...

  • CSS3新特性初识

    渐变 转换(又称变形) 过渡 多列 动画 复杂选择器 渐变 线性渐变 径向渐变 重复渐变(线性-径向渐变) 转换 ...

  • 线性渐变

    线性渐变 linear-gradient 渐变分4种 线性渐变 径向渐变 重复线性渐变 重复径向渐变重点学习线性渐...

  • 渐变色简单实现

    关于实现渐变色的解答,渐变分为线性渐变和径向渐变。 一、 线性渐变(Linear Gradients)- 向下/向...

  • IOS 绘制 之渐变

    分为线性渐变和径向渐变一 创建颜色空间二 创建渐变三 设置裁剪区域四 绘制渐变五 释放对象 线性渐变 径向渐变

  • 颜色渐变/渐变高亮/背景颜色渐变

    background: linear-gradient(to right, #ff6034, #ee0a24); ...

  • photo shop零基础5

    六,渐变工具 工具栏中选择渐变工具,然后单击选项栏中的渐变色条右侧的下拉条,可以应用线性渐变、径向渐变、角度渐变、...

  • 径向渐变 重复渐变

    径向渐变:ie9一下不支持 渐变都是背景下的一个属性 background: radial-gradient(at...

  • 渐变按钮、渐变边框

网友评论

      本文标题:An_css渐变

      本文链接:https://www.haomeiwen.com/subject/pbgljxtx.html