css 常用滚动条

// 竖向滚动条

.is-scroll-right::-webkit-scrollbar,

.is-scroll-left::-webkit-scrollbar,

.el-scrollbar::-webkit-scrollbar {

    width: 4px;

    height: 8px !important;

}

/*滚动条的背景区域的内阴影*/

.el-scrollbar::-webkit-scrollbar-track {

    //  box-shadow:0px 1px 3px rgba(0,0,0,0.3) inset;

     /*滚动条的背景区域的圆角*/

     border-radius: 10px;  

     /*滚动条的背景颜色*/

     background-color: #ddd;

}

/*滑块 滚动条的内阴影*/

.is-scroll-right::-webkit-scrollbar-thumb,

.is-scroll-left::-webkit-scrollbar-thumb,

.el-scrollbar::-webkit-scrollbar-thumb {

    box-shadow:0px 1px 3px rgba(0,0,0,0.3) inset;

    background-color:#FF6C60;

    border-radius: 4px;

}



// 横向滚动条

::-webkit-scrollbar:horizontal {

    width:0;

    height:10px !important;

}

::-webkit-scrollbar-track:horizontal {

    background-color:#fff;

}


css无线转圈


.task-item-box {
									position: relative;
									width: 45px;
									height: 45px;
									overflow: hidden;
									border-radius: 100%;
									z-index: 0;
									display: flex;
									align-items: center;
									flex-direction: column;
									justify-content: center;
									box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
									&::before {
										content: '';
										position: absolute;
										z-index: -2;
										left: -50%;
										top: -50%;
										width: 200%;
										height: 200%;
										background-repeat: no-repeat;
										background-size: 50% 50%, 50% 50%;
										background-position: 0 0, 100% 0, 100% 100%, 0 100%;
										background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
											linear-gradient(#ffb980, #ffb980);
										animation: rotate 2s linear infinite;
									}
									&::after {
										content: '';
										position: absolute;
										z-index: -1;
										left: 1px;
										top: 1px;
										width: calc(100% - 2px);
										height: calc(100% - 2px);
										border-radius: 100%;
									}
									.task-item-value {
										text-align: center;
										font-size: 14px;
										font-weight: bold;
									}
									.task-item-label {
										text-align: center;
									}
								}

百分比水圆圈图

.monitor-item {
									width: 50%;
									display: flex;
									align-items: center;
									.monitor-wave {
										cursor: pointer;
										width: 40px;
										height: 40px;
										position: relative;
										background-color: var(--el-color-primary);
										border-radius: 50%;
										overflow: hidden;
										text-align: center;
										&::before,
										&::after {
											content: '';
											position: absolute;
											left: 50%;
											width: 40px;
											height: 40px;
											background: #f4f4f4;
											animation: roateOne 10s linear infinite;
											transform: translateX(-50%);
											z-index: 1;
										}
										&::before {
											bottom: 10px;
											border-radius: 60%;
										}
										&::after {
											bottom: 8px;
											opacity: 0.7;
											border-radius: 37%;
										}
										.monitor-z-index {
											position: relative;
											z-index: 2;
											color: var(--el-color-primary);
											display: flex;
											align-items: center;
											height: 100%;
											justify-content: center;
										}
									}
									@keyframes roateOne {
										0% {
											transform: translate(-50%, 0) rotateZ(0deg);
										}
										50% {
											transform: translate(-50%, -2%) rotateZ(180deg);
										}
										100% {
											transform: translate(-50%, 0%) rotateZ(360deg);
										}
									}
									.monitor-active {
										background-color: #22bc76;
										.monitor-z-index {
											color: #22bc76;
										}
									}
								}

css报警动画

.breathe-zc{ position:relative; width:20px; height:20px; margin:10px auto; line-height:40px; border:1px solid #008000; border-radius:10px; color:#fff; font-size:20px; text-align:center; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden;

        background-image: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#00FF00));

        background-image: -moz-linear-gradient(#00FF00,#00FF00);

    -webkit-animation-timing-function: ease-in-out;

    -webkit-animation-name: breathe;

    -webkit-animation-duration: 500ms;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;

        animation:ease-in-out breathe 500ms infinite alternate;

}

@keyframes breathe{

    0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}

    100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}

}

@-webkit-keyframes breathe {

    0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}

    100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}

}

.breathe-yc{ position:relative; width:20px; height:20px; margin:10px auto; line-height:40px; border:1px solid #008000; border-radius:10px; color:#fff; font-size:20px; text-align:center; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden;

        background-image: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF0000));

        background-image: -moz-linear-gradient(#FF0000,#FF0000);

    -webkit-animation-timing-function: ease-in-out;

    -webkit-animation-name: breathe;

    -webkit-animation-duration: 1000ms;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;

        animation:ease-in-out breathe 100ms infinite alternate;

}

@keyframes breathe{

    0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}

    100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}

}

@-webkit-keyframes breathe {

    0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}

    100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}

}