- border
- animation
1-1) border #1
<style>
div {
width: 0;
height: 0;
margin: 30px;
border-left: 25px solid red;
border-right: 25px solid blue;
border-top: 25px solid green;
/* border-top: 25px solid transparent; */
/* 투명색 */
border-bottom: 25px solid yellow;
transform: rotate(-45deg);
}
</style>
border를 이용해 위와 같은 모양을 만들 수 있다.
단 두 면이상 맞닿아 있어야 하며 한 가지 색으로만 나타내고 싶다면 투명색인 transparent를 넣으면 된다.
<style>
div {
width: 0;
height: 0;
margin: 30px;
border-left: 25px solid red;
border-right: 25px solid blue;
/* border-top: 25px solid green; */
border-top: 25px solid transparent;
/* 투명색 */
border-bottom: 25px solid yellow;
transform: rotate(-45deg);
}
</style>
1-2) border #2
<style>
.box {
width: 300px;
height: 200px;
background: tan;
border-radius: 15px;
margin: 50px auto;
color: white;
text-align: center;
line-height: 200px;
font-size: 30px;
position: relative;
}
.box::after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 40px solid tan;
border-right: 40px solid transparent;
position: absolute;
}
.box1::after {
/* display: block;
content: "";
width: 0;
height: 0;
border-top: 25px solid tan;
border-right: 25px solid transparent;
position: absolute; */
left: 30%;
top: -20px;
transform: rotate(45deg);
}
.box2::after {
/* display: block;
content: "";
width: 0;
height: 0;
border-top: 25px solid tan;
border-right: 25px solid transparent;
position: absolute; */
right: -20px;
top: 30%;
transform: rotate(135deg);
}
.box3::after {
/* display: block;
content: "";
width: 0;
height: 0;
border-top: 25px solid tan;
border-right: 25px solid transparent;
position: absolute; */
right: 30%;
bottom: -20px;
transform: rotate(-135deg);
}
.box4::after {
/* display: block;
content: "";
width: 0;
height: 0;
border-top: 25px solid tan;
border-right: 25px solid transparent;
position: absolute; */
left: -20px;
top: 30%;
transform: rotate(-45deg);
}
</style>
이러한 점을 이용해 박스에 효과를 줄 수 있다.
공통적으로 들어가는 부분은. box::after에 묶어 놓았다.
1-3) border #3
<style>
.box {
width: 300px;
height: 200px;
background: tan;
border-radius: 15px;
margin: 50px auto;
color: white;
text-align: center;
line-height: 200px;
font-size: 30px;
position: relative;
border: 5px solid #000;
}
.box1::after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 40px solid tan;
border-right: 40px solid transparent;
position: absolute;
left: 30%;
top: -20px;
transform: rotate(45deg);
}
.box1::before {
display: block;
content: "";
width: 0;
height: 0;
border-top: 40px solid black;
border-right: 40px solid transparent;
position: absolute;
left: 30%;
top: -25px;
transform: rotate(45deg);
}
</style>
before가 after보다 먼저 생성되어 after 밑에 깔리는 특성을 이용해 테두리 효과를 줄 수 있다.
before를 크게 만들거나, absoulte 절대위치를 조절해서 테두리처럼 보이게 하면 된다.
2-1) animation #1
<style>
div {
width: 100px;
height: 100px;
background: orange;
margin: 20px;
position: relative;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* animation: ani 3s ease-in-out 0s 5 alternate; */
/* 이름: ani, 총시간: 3s, 효과: ease-in-out, 선딜레이: 0s, 반복횟수: 5, 원점 */
animation: ani 3s infinite ease-in-out;
}
@keyframes ani {
0% {
left: 0;
top: 0;
}
25% {
left: 300px;
top: 0;
}
50% {
top: 300px;
left: 300px;
}
75% {
top: 300px;
left: 0;
}
/* 시작 */
100% {
left: 0px;
top: 0;
}
/* 끝 */
}
</style>
어제 잠깐 배운 animation을 활용해 div박스를 설정한 경로를 무한히 돌게 할 수 있다.
한 사이클에 걸리는 시간인 3초를 100% 기준으로 4 등분하여 25%씩 설정하였다.
2-2) animation #2
<style>
.txt {
width: 600px;
margin: 50px;
display: flex;
overflow: hidden;
}
.txt span {
display: block;
width: 80px;
height: 80px;
font-size: 80px;
font-weight: 900;
text-transform: uppercase;
line-height: 1;
}
.txt span:nth-child(1) {
animation: ani1 0.5s linear 1;
}
.txt span:nth-child(2) {
animation: ani2 0.7s linear 1;
}
.txt span:nth-child(3) {
animation: ani3 0.9s linear 1;
}
.txt span:nth-child(4) {
animation: ani4 1.1s linear 1;
}
.txt span:nth-child(5) {
animation: ani5 1.3s linear 1;
}
.txt span:nth-child(6) {
animation: ani6 1.5s linear 1;
}
.txt span:nth-child(7) {
animation: ani7 1.7s linear 1;
}
@keyframes ani1 {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes ani2 {
0% {
transform: translateY(100px);
opacity: 0;
}
12% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes ani3 {
0% {
transform: translateY(100px);
opacity: 0;
}
25% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes ani4 {
0% {
transform: translateY(100px);
opacity: 0;
}
37% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes ani5 {
0% {
transform: translateY(100px);
opacity: 0;
}
50% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes ani6 {
0% {
transform: translateY(100px);
opacity: 0;
}
63% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes ani7 {
0% {
transform: translateY(100px);
opacity: 0;
}
82% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
</style>
한 글자씩 animation을 설정해 자연스럽게 떠오르는 효과를 줄 수 있다.
각각 0.2초씩 오래 걸리게 값을 주고, 100%를 7 등분하여 약 14% 누적되어 제자리에 머물다 animation이 시작되도록 했다.
overflow: hidden을 사용해 올라오는 부분을 자연스럽게 처리했다.
2-3) animation #3
<style>
.txt {
width: 600px;
margin: 50px;
display: flex;
overflow: hidden;
}
.txt span {
display: block;
width: 80px;
height: 80px;
font-size: 80px;
font-weight: 900;
text-transform: uppercase;
line-height: 1;
color: #006064;
animation: ani 0.6s linear infinite alternate;
}
.txt span:nth-child(1) {
animation-delay: 0s;
}
.txt span:nth-child(2) {
animation-delay: 0.1s;
}
.txt span:nth-child(3) {
animation-delay: 0.2s;
}
.txt span:nth-child(4) {
animation-delay: 0.3s;
}
.txt span:nth-child(5) {
animation-delay: 0.4s;
}
.txt span:nth-child(6) {
animation-delay: 0.5s;
}
.txt span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes ani {
0% {color: #00838F;}
10% {color: #0097A7;}
20% {color: #0097A7;}
30% {color: #00ACC1;}
40% {color: #00BCD4;}
50% {color: #26C6DA;}
60% {color: #4DD0E1;}
70% {color: #80DEEA;}
80% {color: #B2EBF2;}
90% {color: #E0F7FA;}
100% {color: #ffffff;}
}
</style>
한 사이클 소요시간인 0.6초를 0.1초씩 쪼개어 각각 딜레이를 주었다.
이렇게 하면 P는 딜레이 없이 바로 animation효과를 주고 R은 0.1초 뒤 O는 0.2초 뒤 animation을 시작하게 된다.
2-4) animation #4
<style>
ul {}
ul.gallery {
width: 600px;
height: 400px;
margin: 20px;
position: relative;
}
ul.gallery li {
position: absolute;
top: 0;
left: 0;
animation: banner 8s linear infinite;
opacity: 0;
}
ul.gallery li img {
width: 800px;
height: 1200px;
}
@keyframes banner {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
ul.gallery li:nth-child(1) {
animation-delay: 0s;
}
ul.gallery li:nth-child(2) {
animation-delay: 2s;
}
ul.gallery li:nth-child(3) {
animation-delay: 4s;
}
ul.gallery li:nth-child(4) {
animation-delay: 6s;
}
</style>
animation-delay를 사용해 위와 같은 배너도 만들 수 있다.
