편집 요약 없음 |
편집 요약 없음 |
||
123번째 줄: | 123번째 줄: | ||
.rotate { | .rotate { | ||
transform: rotate(0deg); | transform: rotate(0deg); | ||
animation: rotate | animation: rotate 5s infinite; | ||
animation-delay: 1s; | |||
} | } | ||
2023년 5월 20일 (토) 22:14 판
/* 테스트에요 여러분 테스트 */
.ageofchange {
margin-top: 10px;
line-height: 80px;
width: 100%;
animation-name: ageofchange;
font-size: 24pt;
background-color:#580009;
color:#CFA547;
font-family: KoPubDotumMedium;
font-weight: bold;
text-align: center;
animation-duration: 4s;
animation-iteration-count: 1;
}
@keyframes ageofchange {
0% {background-color:#580009; color:#CFA547; left:20px; top:10px;}
50% {background-color:#00F1BA; color:#252525; left:20px; top:10px;}
100% {background-color:#580009; color:#CFA547; left:20px; top:10px;}
}
/* 테스트에요 여러분 테스트 2 */
.animation6 {
margin-top: 10px;
height: 100px;
width: 100%;
border: 1px solid #000000;
overflow: visible;
font-size: 24pt;
text-align: center;
}
.text-animation {
overflow: hidden;
padding-top: 15px;
text-align: center;
font-size: 20pt;
letter-spacing: -0.5px;
animation: text-animation 1s ease;
animation-iteration-count: 1;
transform: translateY(calc(100% - 50%));
}
@keyframes text-animation {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(calc(100% - 50%));
}
}
/* 테스트에요 여러분 테스트 3 */
.header {
display: inline-block;
overflow: hidden;
margin: 10px 10px 10px;
margin-right: -10px;
width: 185px;
height: 300px;
border-radius: 15px;
transform: scale(0.85);
transition: .2s ease-out;
}
.header:hover{
transition: .2s ease-in;
transform: scale(0.9);
z-index:3;
}
.header img {
position: relative;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
overflow: visible;
}
/* 와샤 연구 중 */
.warsawanimation {
margin-top: 10px;
line-height: 80px;
width: 100%;
animation: warsawanimation 2s infinite;
font-size: 20pt;
background-color:#EF426F;
color:white;
font-weight: bold;
text-align: center;
}
@keyframes warsawanimation {
25% {background-color:#EF426F; color:white;}
50% {background-color:#001AB2; color:white;}
75% {background-color:#00F1BA; color:#252525;}
100% {background-color:#1E9AFF; color:white;}
}
/* 3D 회전 */
.threed-rotate {
display: inline-block;
overflow: hidden;
margin: 10px 10px 10px;
margin-right: -10px;
width: 185px;
height: 300px;
border-radius: 15px;
}
.threed-rotate:hover {
animation: threed-rotate 3s ease infinite;
transform: rotateY(0deg);
}
@keyframes threed-rotate {
to {transform: rotateY(0deg)}
from {transform: rotateY(360deg)}
}
/* 회전 */
.rotate {
transform: rotate(0deg);
animation: rotate 5s infinite;
animation-delay: 1s;
}
@keyframes rotate {
0% {transform: rotate(0deg)}
50% {transform: rotate(90deg)}
100% {transform: rotate(0deg)}
}