css 加载效果
filter 改变图片颜色

闹铃效果
.belling {
animation-name: upAnimation;
transform-origin: center top;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-delay: .5s;
}
@keyframes upAnimation {
0% {
transform: rotate(0deg);
transition-timing-function: cubic-bezier(0.215,.61,.355,1);
}
10% {
transform: rotate(-12deg);
transition-timing-function: cubic-bezier(0.215,.61,.355,1);
}
20% {
transform: rotate(12deg);
transition-timing-function: cubic-bezier(0.215,.61,.355,1);
}
28% {
transform: rotate(-10deg);
transition-timing-function: cubic-bezier(0.215,.61,.355,1);
}
36% {
transform: rotate(10deg);
transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
}
42% {
transform: rotate(-8deg);
transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
}
48% {
transform: rotate(8deg);
transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
}
52% {
transform: rotate(-4deg);
transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
}
56% {
transform: rotate(4deg);
transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
}
60% {
transform: rotate(0deg);
transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
}
100% {
transform: rotate(0deg);
transition-timing-function: cubic-bezier(0.215,.61,.355,1);
}
}
预加载文章段落
使用 三行背景色,首行(透明+灰)、尾行(灰+透明)、中间行(重复灰)
<div class="loading_p border"></div>
// scss
.load_Ping{
$line: 3;
$baseWidth: 32px;
$padding: 40px;
$baseColor: #eee;
min-height: ($baseWidth * ($line + 2) + ($padding * 2));
box-sizing: border-box;
padding: $padding;
background-image: linear-gradient(90deg,transparent 0px, transparent 40px,$baseColor $padding),repeating-linear-gradient(180deg,$baseColor 0px, $baseColor ($baseWidth/2),transparent ($baseWidth/2),transparent $baseWidth), linear-gradient(90deg,$baseColor 70%, transparent 70%);
background-size:calc(100% - #{$padding * 2}) ($baseWidth/2), calc(100% - #{$padding * 2}) ($baseWidth * $line),calc(100% - #{$padding * 2}) ($baseWidth/2);
background-repeat:no-repeat;
background-position:$padding $padding, $padding ($padding + $baseWidth), $padding ($padding + (($baseWidth * ($line + 1))));
}
预加loading
通过动画实现 animation: ani_loading 1s linear infinite
<div class="loading_p border"></div>
@keyframes ani_loading {
0% {transform: translate(-50%,-50%) rotate(0deg)}
100% {transform: translate(-50%,-50%) rotate(360deg)}
}
.loading{ position: relative; height: 200px; }
.loading::before{
content: ''; position: absolute; height: 6px; width: 30px; border-left: 4px solid #91ae83;
border-right: 4px solid #91ae83; box-sizing: border-box; top: 50%; left: 50%; transform: rotate(0) translate(-50%, -50%);
transform-origin: 50% 50%; animation: ani_loading 1s linear infinite ; z-index: 101;
}
.loading::after{ content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.8); z-index: 100;}
通过逐帧动画的方式 animation: ani_loading2 1s infinite step-start step-start 连接
<div class="boxgray">
<div class="loading2"></div>
</div>
@keyframes ani_loading2 {
0% {transform: translate(-50%,-50%) rotate(360deg)}
16% {transform: translate(-50%,-50%) rotate(300deg)}
33% {transform: translate(-50%,-50%) rotate(240deg)}
49% {transform: translate(-50%,-50%) rotate(180deg)}
66% {transform: translate(-50%,-50%) rotate(120deg)}
82% {transform: translate(-50%,-50%) rotate(60deg)}
100% {transform: translate(-50%,-50%) rotate(0deg)}
}
.loading2 {
position: absolute; height: 6px; width: 40px; top: 50%; left: 50%; transform: rotate(0) translate(-50%, -50%);
border-left: 4px solid rgba(115,141,101,1);
border-right: 4px solid rgba(115,141,101,0.4);
box-sizing: border-box; animation: ani_loading2 1s infinite step-start;
}
.loading2::before{
content: ''; position: absolute; box-sizing: border-box; height: 100%; width: 40px; top: 0px; left: -4px; transform: rotate(60deg);
border-left: 4px solid rgba(115,141,101,0.8);
border-right: 4px solid rgba(115,141,101,0.2);
}
.loading2::after{
content: ''; position: absolute; box-sizing: border-box; height: 100%; width: 40px; top: 0px; left: -4px; transform: rotate(120deg);
border-left: 4px solid rgba(115,141,101,0.6);
border-right: 4px solid rgba(115,141,101,0);
}