#4.4 Animations part Two이전 포스트/코코아 html css2020. 12. 15. 19:38
Table of Contents
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@keyframes superSexy {
0% {
transform: scale(0.2) rotateY(0) translateY(0);
}
25% {
transform: scale(0.2) rotateY(90deg) translateY(1600px);
}
50% {
transform: scale(0.2) rotateY(180deg) translateY(0px);
}
75% {
transform: scale(0.2) rotateY(90deg) translateY(-1600px);
}
100% {
transform: scale(0.2) rotateY(0) translateY(0);
}
}
img {
border: 3px solid black;
border-radius: 50%;
animation: superSexy 5s ease-in-out infinite;
}
body {
width: 100vh;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<img src="logo-social.png" />
</body>
</html>
'이전 포스트 > 코코아 html css' 카테고리의 다른 글
| #6.10 Navigation Bar part One ,#6.11 Navigation Bar part Two (0) | 2020.12.18 |
|---|---|
| #4.5 Media Queries (0) | 2020.12.15 |
| #4.3 Animations part One (0) | 2020.12.15 |
| #4.1 Transitions part Two (0) | 2020.12.14 |
| #4.0 Transitions (0) | 2020.12.14 |
@병고라니 :: 컴퓨터공학과 고인물
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!