레인보우 테두리 반짝반짝 animation css
더시민
0
3587
2021.05.01 12:12
.list-board .list-body li.list-item.pr1 {
background: #ffe3e1 !important;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: rainbowBorder;
border-bottom-width: 4px !important;
border-left-width: 4px !important;
border-right-width: 4px !important;
}
@keyframes rainbowBorder {
0% { border-color: #ff2a2a; }
15% { border-color: #ff7a2a; }
30% { border-color: #ffc52a; }
45% { border-color: #43ff2a; }
60% { border-color: #2a89ff; }
75% { border-color: #202082; }
90% { border-color: #6b2aff; }
100% { border-color: #e82aff; }
}
@keyframes rainbowBackground {
0% { background: #ff2a2a; }
15% { background: #ff7a2a; }
30% { background: #ffc52a; }
45% { background: #43ff2a; }
60% { background: #2a89ff; }
75% { background: #202082; }
90% { background: #6b2aff; }
100% { background: #e82aff; }
}
</style>
background: #ffe3e1 !important;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: rainbowBorder;
border-bottom-width: 4px !important;
border-left-width: 4px !important;
border-right-width: 4px !important;
}
@keyframes rainbowBorder {
0% { border-color: #ff2a2a; }
15% { border-color: #ff7a2a; }
30% { border-color: #ffc52a; }
45% { border-color: #43ff2a; }
60% { border-color: #2a89ff; }
75% { border-color: #202082; }
90% { border-color: #6b2aff; }
100% { border-color: #e82aff; }
}
@keyframes rainbowBackground {
0% { background: #ff2a2a; }
15% { background: #ff7a2a; }
30% { background: #ffc52a; }
45% { background: #43ff2a; }
60% { background: #2a89ff; }
75% { background: #202082; }
90% { background: #6b2aff; }
100% { background: #e82aff; }
}
</style>