Css(常用的特殊效果)

一、前言                                                                             

不得不说css真强大，总结了几个常用的css特殊效果

二、主要内容                                                                      

1、几个特殊效果

$green = #02a774;
$yellow = #F5A100;
$bc = #e4e4e4;

// 一像素下边框
bottom-border-1px($color)
    position relative
    border none
    &:after
        content ''
        position absolute
        left 0
        bottom 0
        width 100%
        height 1px
        background-color $color
        transform scaleY(0.5)

// 一像素上边框
top-border-1px($color)
    position relative
    &::before
        content ''
        position absolute
        z-index 200
        left 0
        top 0
        width 100%
        height 1px
        background-color $color

//根据像素比缩放1px 像素边框
@media only screen and (-webkit-device-pixel-ratio: 2 )
    .border-1px
        &::before
            transform scaleY(.5)
@media only screen and (-webkit-device-pixel-ratio: 3 )
    .border-1px
        &::before
            transform scaleY(.333333)

//根据像素比来使用2x 图3x 图
bg-image($url)
    background-image: url($url + "@2x.png")
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
        background-image: url($url + "@3x.png")

//清除浮动
clearFix()
    *zoom 1
    &::after
        content ''
        display block
        clear both

 

2、使用2x 3x图做五星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
 .star.star-24 .star-item {
  width: 10px;
  height: 10px;
  margin-right: 3px;
  background-size: 10px 10px;
}
.star.star-24 .star-item:last-child {
  margin-right: 0;
}
 .star.star-24 .star-item.on {
  background-image: url("../images/stars/star24_on@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .star.star-24 .star-item.on {
    background-image: url("../images/stars/star24_on@3x.png");
  }
}
 .star.star-24 .star-item.half {
  background-image: url("../images/stars/star24_half@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .star.star-24 .star-item.half {
    background-image: url("../images/stars/star24_half@3x.png");
  }
}
.star.star-24 .star-item.off {
  background-image: url("../images/stars/star24_off@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .star.star-24 .star-item.off {
    background-image: url("../images/stars/star24_off@3x.png");
  }
}
span{
    display: inline-block;
}
</style>
</head>
<body>
    <div class="star star-24">
        <span class="star-item on"></span>
        <span class="star-item on"></span>
        <span class="star-item on"></span>
        <span class="star-item half"></span>
        <span class="star-item off"></span>
    </div>
</body>
</html>

 

posted @ 2019-04-28 20:45  mysunshine_SZZ  阅读(658)  评论(0)  编辑  收藏  举报