css3效果

1、css3旋转和暂停效果

.xuanzhuanclass{ 
    -webkit-animation:circle 3s infinite linear;/*匀速 循环 - circle为自定义名称，可以写aaa都得*/
}

circle为自定义名称，可以写aaa都得

@-webkit-keyframes circle{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(-360deg); }
}

暂停时加多这个pause的class，继续是remove这个pause的class

.pause{
    animation-play-state:paused;
    -webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

2、呼吸效果

.defaultImg{
    cursor: pointer;  
    transition: all 1s;
}
.defaultImg:hover{
    transform: scale(1.2);
    opacity: 0.6;
}

3、循环呼吸效果（放大、缩小）

.defaultImg{
    -webkit-animation:circle 1s infinite linear;
}
@-webkit-keyframes circle{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.2); }
    100%{ transform: scale(1); }
}

4、背景图条纹效果

background: linear-gradient(to right, #1DAC99 50%, #148F7E 0);
background-size: 10% 100%;

5、背景渐变色效果

background: linear-gradient(to right, #EACF2C, #E9B528);

6、色差渐变过渡效果

transition: color 1.2s ease-in-out,background-color 1.2s ease-in-out,border-color 1.2s ease-in-out,box-shadow 1.2s ease-in-out;

7、图片缩放效果+滤镜效果

#a1{
    height: 200px;
    width: 200px;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
    margin-top: 100px;
    border-radius: 5px;
    overflow: hidden;
}
#a1 .defaultImg{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    cursor: pointer;  
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.defaultImg:hover{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-filter: contrast(130%);
    filter: contrast(130%);
}

<div id="a1">
    <img class="defaultImg" src="./image/test.png" />
</div>

8、彩虹电台底部上半圆阴影效果

box-shadow: 0 -2px 0 #E8E8E8;

9、点击background缓慢变化切换

.active-time{
    width: 90%;
    background: #9CAF88;
    border-radius: 10rpx;
    color: white;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

10、开关（没切换效果）

css

.onoff{
    width: 60px;
    display: block;
    height: 28px;
    background: #3b96cd;
    border-radius: 15px;
    position: relative;
}
.onoff_circle{
    background: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    right: 2px;
    top: 2px;
    position: absolute;
}
.turnoff{
    background: #bfbfbf;
}
.turnoff .onoff_circle{
    left: 2px;
}

html

<span class="onoff turnoff" onclick="fnToTurnon();">
    <span class="onoff_circle"></span>
</span>

js

var isOpen = 1;
function fnToTurnon () {
    if(isOpen == 1){
        $(".onoff").addClass('turnoff');
        isOpen = 0;
    }else{
        $(".onoff").removeClass('turnoff');
        isOpen = 1;
    }
};