css 常用滚动条

大家好，欢迎来到IT知识分享网。

// 竖向滚动条 .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);}

}