SMALL
<body>
<div class="linebox">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</body> <style>
* {
margin:0; padding:0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
.linebox {
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
display: flex;
}
.linebox .col {
flex:none;
width: 25%;
height: 100%;
position: relative;
}
.linebox .col:not(:last-child) {
border-right: 1px solid rgba(128,128,128,.5);
}
.linebox .col:not(:last-child)::before {
content:'';
width: 3px;
height: 100%;
background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
position: absolute;
right:-2px; top:0;
animation-name: down;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.linebox .col:nth-child(2)::before {
content:'';
width: 3px;
height: 100%;
background:linear-gradient(180deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
position: absolute;
right:-2px; top:0;
animation-name: up;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
@keyframes down {
0% {
height: 0;
top: 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
height: 40%;
top: 100%;
opacity: 0;
}
}
@keyframes up {
0% {
height: 40%;
top: 100%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
height: 0;
top: 0;
opacity: 0;
}
}
</style>LIST
'프론트엔드 개발자 > CSS' 카테고리의 다른 글
| CSS _ 애니메이션 다양한 효과넣기(4) (0) | 2023.04.05 |
|---|---|
| CSS _ 애니메이션 연습(3)-(2) 3번의 변형형 (0) | 2023.04.05 |
| CSS _ 애니메이션 연습(2) (0) | 2023.04.05 |
| CSS _ 애니메이션 연습(1) (0) | 2023.04.05 |
| CSS 그라디언트 사용하기와 애니메이션 사용하기 (0) | 2023.04.05 |
댓글