N잡러의 삶
.aros-blink-top {
position: relative;
width: 100%;
height: 50%;
background-color: red;
animation: blink 0.4s infinite alternate;
}
@keyframes blink {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
.aros-blink-top-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 16px;
max-width: 280px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aros-blink-bottom {
position: relative;
width: 100%;
height: 50%;
background-color: #DCDCDC;
}
.aros-blink-bottom-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
font-size: 16px;
max-width: 280px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
animation: blinkColor 0.4s infinite alternate;
}
@keyframes blinkColor {
0% {
color: red;
}
100% {
color: blue;
}
}
.aros-blink:hover .aros-blink-top {
animation: blink 0.4s infinite alternate;
}
.aros-blink-img {
font-size: 16px;
letter-spacing: -0.14px;
line-height: 1.33;
font-weight: normal;
font-stretch: normal;
font-style: normal;
text-align: left;
color: #747474;
text-decoration: none;
}
@media only screen and (max-width: 800px) {
.aros-blink {
top: 73%;
left: 10%;
z-index: 99;
cursor: pointer;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.31;
letter-spacing: -0.16px;
text-align: right;
text-decoration: none;
height: 95px;
border-radius: 15px;
overflow: hidden;
}
}
티스토리 뷰
N잡러의 삶을 알려드리겠습니다.
