반응형
1번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>about me</title>
<style>
@keyframes coinFlip {
from {
transform: rotateX(0);
}
to {
transform: rotateY(360deg) translateX(100px);
}
}
img {
border: 5px solid black;
border-radius: 50%;
animation: coinFlip 3s ease-in-out infinite;
}
</style>
</head>
<body>
<div>
<img src="img/mylogo.jpg" alt="" />
</div>
</body>
</html>2번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>about me</title>
<style>
body{
display:flex;
height:100vh;
align-items: center;
justify-content: center;
}
@keyframes coinFlip {
0% {
transform: rotateY(0);
}
25% {
transform: scale(2);
border-radius:0px;
}
50% {
transform: rotateY(180deg) translateY(180px);
opacity:0;
}
75% {
transform: scale(3);
border-radius:20px;
border-color:tomato;
}
100% {
transform: rotateY(0) translateY(0px);
}
}
img {
border: 5px solid black;
border-radius: 50%;
animation: coinFlip 3s ease-in-out infinite;
}
</style>
</head>
<body>
<div>
<img src="img/mylogo.jpg" alt="" />
</div>
</body>
</html>
참고 사이트
반응형
'Frontend > HTML, CSS, DOM, jQuery' 카테고리의 다른 글
| HTML) 주요 단축키 (0) | 2021.12.12 |
|---|---|
| CSS) Media Query(미디어쿼리) (0) | 2021.12.11 |
| CSS) Transform (0) | 2021.12.11 |
| grid item 움직이기 (0) | 2021.12.07 |
| CSS) Transition (0) | 2021.11.30 |