- 사진 아이콘 사용하기
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
- HTML 요소
<!-- 바운스할 요소 -->
<div class="bounce">
<i class="fa fa-camera-retro fa-lg"></i>
</div>- CSS 요소
div {
margin-top: 100px;
margin-left: 100px;
}
/* 0.5 초씩 바운스 효과 */
.bounce {
position: relative;
/* 파폭 */
-moz-animation: bounce 0.5s infinite linear;
/* 크롬 */
-webkit-animation: bounce 0.5s infinite linear;
-o-animation: bounce 0.5s infinite linear;
animation: bounce 0.5s infinite linear;
}
/*
바운스의 높이
0% 일 때, 0px
50%일 때, -5px
70%일 때, -50px
100%일 때, 0px
*/
@-webkit-keyframes bounce {
0% {
top: 0;
}
50% {
top: -5px;
}
70% {
top: -50px;
}
100% {
top: 0;
}
}
@-moz-keyframes bounce {
0% {
top: 0;
}
50% {
top: -5px;
}
70% {
top: -50px;
}
100% {
top: 0;
}
}
@-o-keyframes bounce {
0% {
top: 0;
}
50% {
top: -5px;
}
70% {
top: -50px;
}
100% {
top: 0;
}
}
@-ms-keyframes bounce {
0% {
top: 0;
}
50% {
top: -5px;
}
70% {
top: -50px;
}
100% {
top: 0;
}
}
@keyframes bounce {
0% {
top: 0;
}
50% {
top: -5px;
}
70% {
top: -50px;
}
100% {
top: 0;
}
}
- 결과화면
'[CSS]' 카테고리의 다른 글
| 크롬 자동재생 방어,막기 없애버리기 ( + 보너스 유튜브(youtube) api 사용기) (0) | 2018.05.03 |
|---|---|
| [css] @media query(미디어 쿼리)와 screen 크기 (0) | 2017.01.02 |
| [css] font-family 속성 (0) | 2016.12.29 |
| [css] :before :after (0) | 2016.12.28 |
미나미나미
