html & css3
@keyframes 과 animation 속기형/animation-direction
kimnaa
2020. 11. 23. 21:54
반응형
<body>
<div class="wrap">
<div class="content">
<div class="center effect">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>.wrap{
position: absolute;
top:50%;
left: 50%;
}
.effect{
transform: translate(-50%, -50%);
color: #1670f0;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
overflow:hidden;
background-color:ff0675;
width: 400px;
height: 400px;
}
.effect: before{
content:'';
position:absolute;
top: 6px;
left: 6px;
bottom: 6px;
width: 50%;
background: rgba(255,255,255,0.05);
}
.effect span:nth-child(1){
position:absolute;
top:0;
left:0;
width: 100%;
height:4px;
background: linear-gradient(to right, #fff, #3571cc);
animation: animate1 2s linear infinite;
}
@keyframes animate1{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.effect span:nth-child(2){
position:absolute;
top:0;
right:0;
width: 4px;
height:100%;
background: linear-gradient(to bottom, #fff, #3571cc);
animation: animate2 2s linear infinite;
}
@keyframes animate2{
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
.effect span:nth-child(3){
position:absolute;
bottom:0;
left:0;
width: 100%;
height:4px;
background: linear-gradient(to left, #3571cc, #fff);
animation: animate3 2s linear infinite;
}
@keyframes animate3{
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.effect span:nth-child(4){
position:absolute;
bottom:0;
left:0;
width: 4px;
height:100%;
background: linear-gradient(to top, #fff, #3571cc);
animation: animate4 2s linear infinite;
}
@keyframes animate4{
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
반응형