레인보우 테두리 반짝반짝 animation css

레인보우 테두리 반짝반짝 animation css

더시민 0 3575 0
.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>

0 Comments
제목