w3h5

利用css中的伪类 给元素设置特殊样式效果

最近在看一篇文章,网站中有一个图标,鼠标划上去会出现一个彩色的小边,非常有趣。效果如下:

www.w3h5.com


查看代码发现标签上有一个:hover,鼠标划入时添加一个:after伪类,给这个伪类设置背景渐变、绝对定位和高度,实现了这种“炫酷”的效果。

html部分代码:

<code>
    www.w3h5.com
</code>

样式部分代码:

<style>
    code{
        display: inline-block;
        position: relative;
        width:100px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background-color: #e0e0e0;
        color: #333;
    }
    code:hover:after{
        background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #b10dc9), color-stop(16.66667%, #ff4136), color-stop(33.33333%, #ff851b), color-stop(50%, #ffdc00), color-stop(66.66667%, #2ecc40), color-stop(83.33333%, #0074d9), color-stop(100%, #b10dc9));
        background-image: -webkit-linear-gradient(left, #b10dc9, #ff4136, #ff851b, #ffdc00, #2ecc40, #0074d9, #b10dc9);
        background-image: -moz-linear-gradient(left, #b10dc9, #ff4136, #ff851b, #ffdc00, #2ecc40, #0074d9, #b10dc9);
        background-image: -o-linear-gradient(left, #b10dc9, #ff4136, #ff851b, #ffdc00, #2ecc40, #0074d9, #b10dc9);
        background-image: linear-gradient(left, #b10dc9, #ff4136, #ff851b, #ffdc00, #2ecc40, #0074d9, #b10dc9);
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
    }
</style>

怎么样?是不是很好玩呢?

声明:本文由w3h5原创,转载请注明出处:《利用css中的伪类 给元素设置特殊样式效果》 https://www.w3h5.com/post/51.html

赞 (0)
分享到: +More |

评论 沙发

换个身份