css3效果大集合（1）

teren 發(fā)布于2019-08-30 15:44 / 485人閱讀

摘要：背景漸變色效果標(biāo)準(zhǔn)的語(yǔ)法三角形效果圓環(huán)效果上下跳動(dòng)加載效果代碼文章鏈接

1、背景漸變色效果

.main{
        background: -webkit-linear-gradient(#a18cd1, #fbc2eb); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#a18cd1, #fbc2eb); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#a18cd1, #fbc2eb); /* Firefox 3.6 - 15 */
        background: linear-gradient(#a18cd1, #fbc2eb); /* 標(biāo)準(zhǔn)的語(yǔ)法 */  
      }

2、三角形效果

.main{
        width:0px;height:0px;
        border-right:50px solid  rgba(0,0,0,0);
        border-bottom:50px solid #fbc2eb;
        border-left:50px solid  rgba(0,0,0,0);
      }

3、圓環(huán)效果

.main{
        width: 100px;
        height: 100px;
        background-color: #fbc2eb;
        border-radius: 50%;
      }
.main:after{
        content: " ";
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff;
        position: relative;
        top: 25px;
        left: 25px;
      }

4、div上下跳動(dòng)

@keyframes tips{
          25% {transform: translateY(-3px);}
          50%{transform: translateY(0);}
          75% {transform: translateY(3px);}
          100% {transform: translateY(0);}
      }
.main{
        width: 50px;
        height: 50px;
        background: #fbc2eb;
        -webkit-animation: tips 1s linear infinite;
        animation: tips 1s linear infinite;
      }

5、加載loading效果

.load{width: 100px;height: 100px;position: relative;margin: 0 auto;margin-top:100px;}
.load span{display: inline-block;width: 17px;height: 17px;border-radius: 50%;background: #fbc2eb;position: absolute;-webkit-animation: load 1.04s ease infinite;}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0.2;
    }
}
.load span:nth-child(1){left: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.13s;}
.load span:nth-child(2){left: 15px;top: 15px;-webkit-animation-delay:0.26s;}
.load span:nth-child(3){left: 50%;top: 0;margin-left: -8px;-webkit-animation-delay:0.39s;}
.load span:nth-child(4){top: 15px;right:15px;-webkit-animation-delay:0.52s;}
.load span:nth-child(5){right: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.65s;}
.load span:nth-child(6){right: 15px;bottom:15px;-webkit-animation-delay:0.78s;}
.load span:nth-child(7){bottom: 0;left: 50%;margin-left: -8px;-webkit-animation-delay:0.91s;}
.load span:nth-child(8){bottom: 15px;left: 15px;-webkit-animation-delay:1.04s;}

文章鏈接