[ μμ μ΄λ―Έμ§ - frog.svg ]
- λ¬΄λ£ SVG λ³ν μ¬μ΄νΈ - Convertio
- SVG μ΄λ―Έμ§ μ΅μ ν
SVG μμ μ½λλ₯Ό μ΅λν μμΆνμ¬ μ©λμ κ°λ³κ² λ§λ€ μ μλ€.
<img>
λ‘ μ¬μ© : src=""
μμ±κ°μΌλ‘ SVG νμΌ μ°κ²° <img src="frog.svg" alt="">
background
λ‘ μ¬μ© : background-img
μμ±κ°μΌλ‘ SVG νμΌ μ°κ²° .cont-svg {
width: 100vw;
height: 100vh;
background: url(frog.svg) no-repeat 0 0;
background-size: contain;
}
<svg width="624" height="465" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
fill="#00A249" />
<path
d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5"
fill="#89C140" />
<path
d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5v0Z"
stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
fill="#8FC23F" />
<path
d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
fill="#FFFFFE" />
<path
d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179"
fill="#E88194" />
<path
d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179v0Z"
stroke="#1A1919" stroke-width="7.425" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M213.528 195.375c0 8.49-7.218 15.375-16.125 15.375s-16.125-6.885-16.125-15.375c0-8.493 7.218-15.375 16.125-15.375s16.125 6.882 16.125 15.375Zm205.5-7.5c0 8.49-7.218 15.375-16.125 15.375-8.904 0-16.125-6.885-16.125-15.375 0-8.493 7.221-15.375 16.125-15.375 8.907 0 16.125 6.882 16.125 15.375Z"
fill="#E88194" />
<path
d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086"
fill="#C9E8F2" />
<path
d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086v0Z"
stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
fill="#C9E8F2" />
<path
d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
fill="#C9E8F2" />
<path
d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
<path d="M529.278 289.875C515.403 306 530.529 324.501 552.528 324" stroke="#1A1919" stroke-width="5.844"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M609.528 283.002c16.125 6.498 9.999 20.964 3.999 25.998" stroke="#1A1919" stroke-width="6.48"
stroke-linecap="round" stroke-linejoin="round" />
<path
d="M581.421 283.671c7.503 1.605 12.891 5.862 13.089 11.058.171 4.5-2.232 10.146-9.381 11.025m-22.098 4.245c-9.375.375-15.096-5.766-15.378-11.124-.375-7.125 4.284-12.237 11.406-14.463l3.972 25.587Z"
stroke="#1A1919" stroke-width="6.309" stroke-linecap="round" stroke-linejoin="round" />
<path d="M506.028 36v108m63.501 150.501V120v174.501Z" stroke="#1A1919" stroke-width="6.48"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M573.03 324.999c9.378-.018 16.419-.681 24.501-5.499" stroke="#1A1919" stroke-width="5.844"
stroke-linecap="round" stroke-linejoin="round" />
<path
d="m442.77 254.502-28.002 18.999m-233.997-3.999L208.77 280.5l-27.999-10.998Zm-38.001 48h39.999-39.999Zm99.999 60.999-25.998 23.001 25.998-23.001Zm81 3 6.999 39-6.999-39Zm77.001 0 33.999 24-33.999-24Z"
stroke="#1A1919" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
<path d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
fill="#fff" />
<path d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
stroke="#000" />
<ellipse cx="224.5" cy="136" rx="12.5" ry="12" fill="#000" />
<path d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
fill="#fff" />
<path d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
stroke="#000" />
<ellipse class="eye-right" cx="353.5" cy="129" rx="12.5" ry="12" fill="#000" />
</svg>
/** μ μ© μμ **/
/* 1. μ€λ₯Έμͺ½ λμ 그리λ ellipses μμμ class="eye-right" ν΄λμ€λ₯Ό μΆκ°ν©λλ€. */
/* 2. ν΄λμ€μ μ λλ©μ΄μ
μμ±μ μμ±ν΄μ€λλ€. */
/* μ΄λ transform-origin μΌλ‘ μ€μ¬μΆμ μ€μ ν΄μΌν©λλ€. μ’νλ ellipses μμμμ cx="353.5" cy="129" μ
λλ€. */
.eye-right {
animation-duration: 0.5s;
animation-name: blink;
animation-direction: alternate;
animation-iteration-count: infinite;
transform-origin: 353.5px 129px;
}
@keyframes blink {
to {
transform: scaleY(0.1);
}
}
- κ° λλΌλ³ μ§λ
Free SVG Maps - amCharts
=> μλμ²λΌ μ¬μ©ν μ μλ€.
μ½λ‘λ19 λ°μ΄λ¬μ€ νν©ν
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New Colored Frog</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 1000px;
}
.container {
position: relative;
}
.umbrella {
position: absolute;
top: -135px;
left: 60px;
z-index: -1;
transform: rotate(-10deg);
}
.umbrella-top {
overflow: hidden;
position: relative;
width: 400px;
height: 180px;
border-radius: 400px 400px 0 0;
border: 10px solid #000;
background-color: #998ceb;
}
.umbrella-bottom {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.umbrella-bottom__ver {
width: 10px;
height: 150px;
background-color: #000;
}
.umbrella-bottom__round {
position: absolute;
bottom: -35px;
left: -60px;
width: 50px;
height: 25px;
border: 10px solid #000;
border-radius: 50px 50px 0 0;
background-color: #fff;
transform: rotate(180deg);
}
.umbrella-bottom__round::after {
content: "";
display: block;
position: absolute;
bottom: -10px;
width: 50px;
height: 10px;
/* border-radius: 50px 50px 0 0; */
background-color: #fff;
}
.wink-right {
position: absolute;
top: 130px;
right: 290px;
}
.wink-line {
position: absolute;
left: 0;
width: 40px;
height: 5px;
border-radius: 10px;
background-color: #000;
}
.wink-line:nth-child(1) {
top: -10px;
transform: rotate(-30deg);
}
.wink-line:nth-child(3) {
top: 10px;
transform: rotate(30deg);
}
</style>
</head>
<body>
<div class="container">
<div class="umbrella">
<div class="umbrella-top"></div>
<div class="umbrella-bottom">
<div class="umbrella-bottom__ver"></div>
<div class="umbrella-bottom__round"></div>
</div>
</div>
<svg
width="624"
height="465"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
fill="#00A249"
/>
<path
d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
stroke="#1A1919"
stroke-width="9"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5"
fill="#B4FE98"
/>
<path
d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5v0Z"
stroke="#1A1919"
stroke-width="9"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
fill="#B4FE98"
/>
<path
d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
stroke="#1A1919"
stroke-width="9"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
fill="#FFFFFE"
/>
<path
d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
stroke="#1A1919"
stroke-width="9"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179"
fill="#E88194"
/>
<path
d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179v0Z"
stroke="#1A1919"
stroke-width="7.425"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M213.528 195.375c0 8.49-7.218 15.375-16.125 15.375s-16.125-6.885-16.125-15.375c0-8.493 7.218-15.375 16.125-15.375s16.125 6.882 16.125 15.375Zm205.5-7.5c0 8.49-7.218 15.375-16.125 15.375-8.904 0-16.125-6.885-16.125-15.375 0-8.493 7.221-15.375 16.125-15.375 8.907 0 16.125 6.882 16.125 15.375Z"
fill="#E88194"
/>
<path
d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086"
fill="#C9E8F2"
/>
<path
d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086v0Z"
stroke="#1A1919"
stroke-width="7.074"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
fill="#C9E8F2"
/>
<path
d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
stroke="#1A1919"
stroke-width="7.074"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
fill="#C9E8F2"
/>
<path
d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
stroke="#1A1919"
stroke-width="7.074"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M529.278 289.875C515.403 306 530.529 324.501 552.528 324"
stroke="#1A1919"
stroke-width="5.844"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M609.528 283.002c16.125 6.498 9.999 20.964 3.999 25.998"
stroke="#1A1919"
stroke-width="6.48"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M581.421 283.671c7.503 1.605 12.891 5.862 13.089 11.058.171 4.5-2.232 10.146-9.381 11.025m-22.098 4.245c-9.375.375-15.096-5.766-15.378-11.124-.375-7.125 4.284-12.237 11.406-14.463l3.972 25.587Z"
stroke="#1A1919"
stroke-width="6.309"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M506.028 36v108m63.501 150.501V120v174.501Z"
stroke="#1A1919"
stroke-width="6.48"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M573.03 324.999c9.378-.018 16.419-.681 24.501-5.499"
stroke="#1A1919"
stroke-width="5.844"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="m442.77 254.502-28.002 18.999m-233.997-3.999L208.77 280.5l-27.999-10.998Zm-38.001 48h39.999-39.999Zm99.999 60.999-25.998 23.001 25.998-23.001Zm81 3 6.999 39-6.999-39Zm77.001 0 33.999 24-33.999-24Z"
stroke="#1A1919"
stroke-width="6"
stroke-linecap="round"
stroke-linejoin="round"
/>
<!-- μΌμͺ½ λ -->
<path
d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
fill="#fff"
/>
<path
d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
stroke="#000"
stroke-width="5.844"
/>
<ellipse cx="224.5" cy="136" rx="12.5" ry="12" fill="#000" />
<!-- μ€λ₯Έμͺ½ λ -->
<!-- <path
d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
fill="#fff"
/>
<path
d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
stroke="#000"
stroke-width="5.844"
/>
<ellipse
class="eye-right"
cx="353.5"
cy="129"
rx="12.5"
ry="12"
fill="#000"
/> -->
<div class="wink-right">
<div class="wink-line"></div>
<div class="wink-line"></div>
<div class="wink-line"></div>
</div>
</svg>
</div>
</body>
</html>
:hover
hover
λλ μμ μ μ μ μκΈ° λλ¬Έμ νμ¬λ μ¬μ©λΉλκ° μ€μ΄λ€κ³ μλ€. :active
:focus
focus
κ°λ₯transition
: CSS μμ±κ°μ΄ λ³ν λ, κ°μ λ³νκ° μΌμ μκ°μ κ±Έμ³ μΌμ΄λλλ‘ νλ κ²
[μΆμ²: Webanimation 1λΆ css Animation]
property
: μ΄λ€ μμ±μ transition
ν¨κ³Όλ₯Ό μ€ μ§ μ€μ
μμ±κ° | μ€λͺ |
---|---|
all | κΈ°λ³Έκ°, λͺ¨λ μμ±μ transition ν¨κ³Όκ° λνλ¨ |
none | transition ν¨κ³Όλ₯Ό λ°μ§ λͺ»ν¨ |
property | transition ν¨κ³Όλ₯Ό μ μ©νκ³ μΆμ CSS μμ±μ μ€μ νμ¬ μ§μ λ μμ±μλ§ transition μ΄ λνλ¨ |
initial | μμ±μ κΈ°λ³Έκ°μΌλ‘ μ€μ |
inherit | λΆλͺ¨ μμμ μμ±κ°μ μμ λ°μ |
duration
: transition
μ΄ μΌμ΄λλ μ§μμκ° μ€μ
s
, ms
0s
λ₯Ό μλ―Έtransition
μ΄ μΌμ΄λ¨delay
: transition
μ΄ μΌμ΄λ λ μΌλ§λ§νΌ κΈ°λ€λ Έλ€κ° μ€νν μ§ κ²°μ
s
, ms
0s
λ₯Ό μλ―Έtransition
μ ν¨κ³Όκ° λνλμ§ μμtiming - function
: transition
μ μ§ν μλ μ€μ
μμ±κ° | μ€λͺ |
---|---|
linear | μ²μλΆν° λκΉμ§ μΌμ ν μλ = cubic-bezier(0, 0, 1, 1) |
ease | κΈ°λ³Έκ°, μ²μ²ν μμ / λΉ λ₯΄κ² μ§ν / μ²μ²ν λ = cubic-bezier(0.25, 0.1, 0.25, 0.1) |
ease-in | μ²μ²ν μμ = cubic-bezier(0.42, 0, 1, 1) |
ease-out | μ²μ²ν λ = cubic-bezier(0, 0, 0.58, 1) |
ease-in-out | μ²μ²ν μμ, μ²μ²ν λ = cubic-bezier(0.42, 0, 0.58, 1) |
step-start | μμνλ μμ μ μ€ν
μ λμ΄μ€ = steps(1, start) |
step-end | λλλ μμ μ μ€ν
μ λμ΄μ€ = steps(1, end) |
steps(int, start/end) | int = μ μ, start /end int λ§νΌ μμμ΄λ λλλ μμ μ μ€ν
μ λμ΄μ€ |
cubic-bezier(n, n, n, n) | λ² μ§μ΄ 곑μ μ μνλ 컨νΈλ‘€ ν¬μΈνΈ μ§μ μ€μ |
initial | μμ±μ κΈ°λ³Έκ°μΌλ‘ μ μ© |
inherit | λΆλͺ¨μ μν₯μ λ°μ μ μ© |
transform
: Objectλ₯Ό μ¬λ¬ ννλ‘ λ³νν λ μ¬μ©νλ μμ±, transition
κ³Ό ν¨κ» μ¬μ©νλ©΄ λ ν° ν¨κ³Όλ₯Ό λΌ μ μλ€.scale(sx)
/ scale(sx ,sy)
ν κ° λλ λ κ°μ κ°μΌλ‘ μ§μ , κ° λ°©ν₯μ μ μ©ν ν¬κΈ°λ₯Ό λνλ
= Resizing
sx
: xμΆ λ°©ν₯μΌλ‘ ν¬κΈ° μ μ©sy
: yμΆ λ°©ν₯μΌλ‘ ν¬κΈ° μ μ©, μ§μ λμ§ μμ κ²½μ° κΈ°λ³Έκ°μ sx
μ κ°μ κ°μΌλ‘ μ μ©λμ΄ κ· μΌν λ°°μ¨λ‘ ν¬κΈ° μ μ©[μΆμ²: Webanimation 1λΆ css Animation]
rotate(a)
κ°λλ§νΌ νμ , μμλ μκ³ λ°©ν₯, μμλ λ°μκ³ λ°©ν₯
= Rotation
a
: νμ κ°λdeg
(degree)[μΆμ²: Webanimation 1λΆ css Animation]
translate()
xμΆ λλ yμΆμΌλ‘ μ΄λ
= Moving
Single <length-percentage> values
: xμΆ λ°©ν₯μΌλ‘ μ΄λ, yμΆμ 0μΌλ‘ μ€μ Double <length-percentage> values
: xμΆκ³Ό yμΆ λ°©ν₯μΌλ‘ μ΄λpx
, %
/* Single <length-percentage> values */
transform: translate(200px);
transform: translate(50%);
/* Double <length-percentage> values */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
[μΆμ²: Webanimation 1λΆ css Animation]
skew(ax)
/ skew(ax, ay)
ν κ° λλ λ κ°μ κ°μΌλ‘ μ§μ , κ° λ°©ν₯μ κ°λμ λ°λΌ μ곑(λΉνμ΄μ§)
= Distortion
ax
: xμΆμ λ°λΌ μ곑ay
: yμΆμ λ°λΌ μ곑, μ§μ λμ§ μμ κ²½μ° κΈ°λ³Έκ°μ 0deg
(degree)[μΆμ²: Webanimation 1λΆ css Animation]
transform-origin
transform
μ΄ μ μ©λλ κΈ°μ€μ
left
, right
, top
, bottom
, center
μ μ΄μ©ν΄ μμΉ μ€μ κ°λ₯ /* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;
/* x-offset | y-offset */
transform-origin: 3cm 2px;
/* x-offset-keyword | y-offset */
transform-origin: left 2px;
/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;
/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;
/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;
/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;
/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;
/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;
/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: unset;
translate
vs position
translate
, position
λͺ¨λ μνλ μ’νλ‘ μμλ₯Ό μμ§μΌ μ μλ€.
κ·Έλ λ€λ©΄, μ°λ¦¬λ μΈμ translate
μ μ¬μ©νκ³ position
μ μ¬μ©ν΄μΌ ν κΉ?
position
translate