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 {
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(8, 8, 8);
}
.linebox {
width: 100%;
height: 25%;
background: rgba(0,0,0,.7);
}
.linebox .col {
flex:none;
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: 100%;
height: 3px;
background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
position: absolute;
left:0px; bottom:-2px;
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: 100%;
height: 3px;
background:linear-gradient(180deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
position: absolute;
left:0px; bottom:-2px;
animation-name: up;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
@keyframes down {
0% {
left: 0;
width: 0%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
left: 100%;
width: 10%;
opacity: 0;
}
}
@keyframes up {
0% {
left: 100%;
width: 0%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
left: 0;
width: 10%;
opacity: 0;
}
}
</style>LIST
'프론트엔드 개발자 > CSS' 카테고리의 다른 글
| CSS 애니메이션 효과 _ 카드박스 효과내기(1) (0) | 2023.04.07 |
|---|---|
| CSS _ 애니메이션 다양한 효과넣기(4) (0) | 2023.04.05 |
| CSS _ 애니메이션 연습(3) (0) | 2023.04.05 |
| CSS _ 애니메이션 연습(2) (0) | 2023.04.05 |
| CSS _ 애니메이션 연습(1) (0) | 2023.04.05 |
댓글