반응형
<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%);
}
}
반응형
'html & css3' 카테고리의 다른 글
| [html/css] 구글폰트/웹폰트 연결하기, 직접 폰트 변환하여 적용하기 (0) | 2020.11.30 |
|---|---|
| [웹디자인/html/css] 웹호스팅에 파일 업로드하기 / 필수 확인 사항들 (0) | 2020.11.29 |
| [html/css] 페이지 로딩 애니메이션 만들기 @keyframes/hue-rotate/infinite 속성 등 (0) | 2020.11.22 |
| [html/css] css animation 만들기 (0) | 2020.11.21 |
| [html/css] <dl>-<dt>-<dd> 태그 vs <th>-<tr>-<td> table 속성 (0) | 2020.11.20 |
