锐客网

  1. 首页 > it技术 > >

有趣的全css|有趣的全css Loading样式解析

今天在强大的MDN web上，看到一个还不错的css样式，从中学习了一些css中以前会忽略的地方，今天分享下
地址：https://codepen.io/equinusocio/full/qjyXPP/
效果：
有趣的全css|有趣的全css Loading样式解析
文章图片
动态loading 这个loading特点： 1. 圆形无限滚动，但圆的边缘处有动态消隐+模糊效果
2. 滚动条颜色呈五彩色
3. “LOADING” 提示居中
下面来把关键code贴出来（部分css属性我认为不重要的就删去了）： html
----------------
...
css
----------------
.Loader {
/*重点1， 最外层div是个圆形，他的box-shadow 使它变为一个高度模糊的白色圆环；loading的外层和内层的白色模糊，就是这里的效果*/
width: 150px;
border-radius: 50%;
box-shadow: inset 0 0 8px rgba(255, 255, 255, .4), 0 0 25px rgba(255, 255, 255, .8)
}
.Loader::after {
content: attr(data-text); // 注意css attr的使用方法，获取当前.Loader 的data-text属性，用来填充after的content
color: #CECECE;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: calc(70% + 0.1vw);
text-transform: uppercase;
letter-spacing: 5px;
}
.Loader::before {
content: '';
float: left;
padding-top: 100%;
}
.Loader__Circle {
display: block;
position: absolute;
border-radius: 50%;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
【有趣的全css|有趣的全css Loading样式解析】opacity: 0.8;
/*重点2，多个元素叠加时最终的显示颜色*/
mix-blend-mode: screen;
/*重点3，类似于美图秀秀的滤镜调亮效果*/
filter: brightness(120%);
/*重点4，animation使用名字为SpinAround 的动画* /
animation-name: SpinAround;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-fill-mode: both;
animation-timing-function: linear
}
/*重点5，loading共有4个circle构成（当然也可以更多），通过box-shadow设置circle的不规则颜色; 每个circle不同transform-origin来达到圆形不稳定滚动效果，animation-direction设置不同的转动方向，SpinAround
这样就达到了绕着中心转动，颜色五彩的不稳定圆环*/

有趣的全css|有趣的全css Loading样式解析
文章图片
其中一个circle的box-shadow展示 .Loader__Circle:nth-of-type(1) {
box-shadow:inset 1px 0 0 1px #2979FF, 3px 0 0 3px #2979FF;
animation-direction: reverse;
transform-origin: 49.6% 49.8%;
}
.Loader__Circle:nth-of-type(2) {
box-shadow:
inset 1px 0 0 1px #FF1744,
3px 0px 0 3px #FF1744;
-webkit-transform-origin: 49.5% 49.8%;
transform-origin: 49.5% 49.8%;
}
.Loader__Circle:nth-of-type(3) {
box-shadow: inset 1px 0 0 1px #FFFF8D,0 4px 0 4px #FFFF8D;
transform-origin: 49.8% 49.8%;
}
.Loader__Circle:nth-of-type(4) {
box-shadow:
inset 1px 0 0 1px #B2FF59,
0 3px 0 3px #B2FF59;
transform-origin: 49.7% 49.7%;
}
/*重点4，animation SpinAround 效果为逆时针转圈 /
@keyframes SpinAround {
0% {transform: rotate(0); }
100% {transform: rotate(-360deg); }
}


好了现在可以总结了：
1. css的attr（我常会忘记它）
目前仅适用于css的content属性。方便根据元素的data属性显示伪元素里的内容
2.属性mix-blend-mode
设置元素内容不同的颜色叠加效果，类似于Photoshop里的图层叠加，screen的效果为颜色光投射到屏幕上的效果，如下图：


有趣的全css|有趣的全css Loading样式解析
文章图片
mix-blend-mode:screen; 3. box-shadow
这个photoshop里也有。可以设置元素阴影；它作用很多：当做阴影使元素立体，充当不同宽度的border（如本文的loading），充当第三元素
4. filter
这个属性，其实经常在某些厉害的css特效里面看到，但平常很少使用。我理解它相当于给元素添加滤镜效果。常用方法有：(具体效果参见https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter）
/* URL to SVG filter */
filter:url("filters.svg#filter-id");
/* values*/
filter:blur(5px); //模糊
filter:brightness(0.4); //增亮
filter:contrast(200%); //对比度
filter:drop-shadow(16px16px20pxblue); //阴影效果
filter:grayscale(50%); // 置灰
filter:hue-rotate(90deg);
filter:invert(75%);
filter:opacity(25%);
filter:saturate(30%);
filter:sepia(60%);
/* Multiple filters */
filter:contrast(175%)brightness(3%);
5. animation
这里就不多少（因为一旦说起来就太多了），本文里的用法也很简单

    推荐阅读


    上一篇：找找生活乱的原因

    下一篇：三好日记