- transform
- animation
1) transform #1
.box {
width: 400px;
margin: 100px auto;
}
.box img {
width: 400px;
height: 250px;
transition: all 1s ease-in-out;
}transition : all 1s ease-in-out를 공통으로 맨 위에 잡아 두었다.
.box img {
width: 400px;
height: 250px;
transition: all 1s ease-in-out;
}
.box1:hover img {
transform: scale(1.5);
}scale을 이용해 img 크기를 1.5배로 키웠다.
<div class="box box2">
<p>
<img src="images/lf.png" alt="">
</p>
<strong>루피</strong>
</div>
-------------------------------------------------------
.box2 {
border: 1px solid #000;
}
.box2 p {
width: 100%;
height: 250px;
overflow: hidden;
}
.box2 img {
transition: 1s;
}
.box2 strong {
display: block;
padding-top: 20px;
font-size: 40px;
text-align: center;
background: gray;
}
.box2:hover img {
transform: scale(1.2);
}img를 p로 묶은 뒤 overflow : hidden을 하게 되면 scale로 커진 나머지 부분들을 가려줄 수 있다.
.box3:hover strong {
position: absolute;
left: 0;
bottom: -80px;
transform: translateY(-100%); opacity: 0.8;
}y축으로 100%만큼 -방향으로 이동시키고 투명도(opacity)를 기본값 1에서 0.8로 낮추었다.
.box4 {
height: 250px;
position: relative;
border: 1px solid #000;
overflow: hidden;
}
.box4 strong {
display: block;
width: 400px;
height: 80px;
line-height: 80px;
background: gray;
text-indent: 20px;
font-size: 20px;
font-weight: 500px;
color: white;
transition: 1s;
transform-origin: 0 0;
transform: rotate(-90deg) translateY(-80px);
}
.box4:hover strong {
transform: rotate(-90deg);
}이처럼 실제 사이트에서 주는 효과도 구현할 수 있다.
2) transform #2
<style>
.box {
width: 400px;
height: 250px;
margin: 50px auto;
position: relative;
transition: 1s;
}
.box a img {
width: 400px;
height: 250px;
position: absolute;
transition: 1s;
top: 0;
left: 0;
}
.box1 p {
position: absolute;
left: 0;
bottom: 20px;
text-align: center;
width: 100%;
opacity: 0;
}
.box1 p button {
border-radius: 50%;
width: 70px;
height: 70px;
border: none;
cursor: pointer;
}
.box1 p button i {
font-size: 30px;
}
.box p button:first-child {
margin-right: 15px;
}
.box:hover a img:last-child {
opacity: 0;
}
.box:hover p {
opacity: 1;
}
</style>
</head>
<body>
<div class="box box1">
<a href="">
<img src="images/lf.png" alt="">
<img src="images/rr.jpg" alt="">
</a>
<p>
<button>
<i class="xi-caret-up-circle-o">
</i>
</button>
<button>
<i class="xi-caret-down-circle-o">
</i>
</button>
</p>
</div>
</body>쇼핑몰등에서 상품 이미지에 마우스를 올리면 찜하기, 장바구니에 추가 등 버튼이 나오는 것을 연습해 보았다.
position : relative와 absolute를 사용해 이미지를 겹쳐 놓은 뒤 hover를 하게 되면 last-child img는 opacity가 0이 되어 보이지 않고 button이 있는 p는 1이 되어 나타나게 된다.
3) transform #3
.list:hover li a {
transform: scale(0.9) rotate(-15deg) ;
opacity: 0.7 ;
}
.list li:hover a {
transform: scale(1.3) rotate(15deg) ;
opacity: 1 ;
color: white;
}마우스를 올려놓는 요소에만 강조하는 효과를 주고 싶다면 요소들이 있는 .list에 hover를 사용해 반대되는 효과를 설정해 주면 된다.
.list li:hover a {
transform: scale(1.3) rotate(15deg) ;
opacity: 1 ;
color: white;
}
.list:hover li a {
transform: scale(0.9) rotate(-15deg) ;
opacity: 0.7 ;
}* 만약 위처럼 순서가 바뀌게 된다면 겹치지 않는 color외에 다른 효과는 적용이 되지 않는다.
4) transform #4
.box {
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 50px auto;
position: relative;
}
.box span {
position: absolute;
transition: 1s;
}
공통부분
.box1 span {
width: 100%;
height: 5px;
background: tan;
left: 0;
}
.box1 span:nth-child(1) {
top: 80px;
width: 0;
}
.box1:hover span:nth-child(1) {
top: 80px;
width: 400px;
}
.box1 span:nth-child(2) {
top: 160px;
left: auto;
right: 0;
width: 0;
}
.box1:hover span:nth-child(2) {
top: 160px;
width: 400px;
}
.box1 span:nth-child(3) {
top: 240px;
transform: scaleX(0);
}
.box1:hover span:nth-child(3) {
top: 240px;
transform: scaleX(1);
}
.box1 span:nth-child(4) {
top: 320px;
transform-origin: 0 0;
transform: scaleX(0);
}
.box1:hover span:nth-child(4) {
top: 320px;
transform: scaleX(1);
}
마찬가지로 마우스를 올렸을때 강조의 의미로 밑줄이 생기도록 할 수 있다.
width(너비)가 0에서 박스 크기인 400px까지 채워지게 된다.
왼쪽과 오른쪽 기준을 어디로 잡는지에 따라 선이 생기는 모양도 달라진다.
.box div {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 400px;
}
.box div span {
display: block;
position: absolute;
transition: 0.4s;
}
.box div span:nth-child(1) {
left: 0;
top: 0;
width: 0px;
height: 10px;
background: orange;
}
.box:hover div span:nth-child(1) {
width: 400px;
}
.box div span:nth-child(2) {
right: 0;
top: 0;
width: 10px;
height: 0px;
background: orange;
}
.box:hover div span:nth-child(2) {
height: 400px;
}
.box div span:nth-child(3) {
right: 0;
bottom: 0;
width: 0px;
height: 10px;
background: orange;
}
.box:hover div span:nth-child(3) {
width: 400px;
}
.box div span:nth-child(4) {
left: 0;
bottom: 0;
width: 10px;
height: 0px;
background: orange;
}
.box:hover div span:nth-child(4) {
height: 400px;
}
이를 활용해 시계방향으로 선이 자연스럽게 생기게 적용시킬 수 있다.
5) transform #5
<style>
.box {
margin: 30px;
width: 600px;
}
.box span {
display: inline-block;
width: 80px;
height: 80px;
font-size: 80px;
line-height: 1;
text-transform: uppercase;
font-weight: 700;
border: 1px solid #000;
text-align: center;
}
.box:hover span:nth-child(odd) {
transform: skewY(15deg);
}
.box:hover span:nth-child(even) {
transform: skewY(-15deg);
}
.box:hover span:nth-child(3n+1) {
background: lightblue;
}
.box:hover span:nth-child(3n+2) {
background: lightpink;
}
.box:hover span:nth-child(3n) {
background: lightgreen;
}
</style>uppercase를 사용해 모두 대문자로 바꿔주고 skew와 odd, even을 사용해 짝수, 홀수 child를 각각 다르게 효과를 줄 수 있다.
6) animation
<style>
div {
width: 100px;
height: 100px;
background: tan;
position: relative;
margin: 100px;
animation-name: ani;
/* animation 이름 */
animation-timing-function: ease-in-out;
animation-duration: 2s;
/* 시간 */
animation-iteration-count: infinite;
/* 반복 횟수 */
animation-delay: 1s;
/* 시작 딜레이 */
animation-direction: alternate;
/* 원점으로 */
}
/* 시간 시작 ~ 끝 */
@keyframes ani {
0%{
left: 0;
transform: scale(1);
rotate: 0deg;
border-radius: 0;
}
100%{
left: 500px;
background: blueviolet;
transform: scale(2);
rotate: 360deg;
border-radius: 50%;
}
}
</style>오늘은 animation의 기본적인 부분만 배웠다.
우선 animation-name으로 애니메이션 이름을 정한 뒤 설정을 하고 @keyframes를 이용해 처음인 0%에서부터 한 사이클의 끝인 100%까지 원하는 효과를 넣으면 된다. (중간에 20%, 50% 등 설정 가능하다.)
