반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rotation Circle</title>
<link href="css/ex03.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div class="circle-container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</body>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
#wrapper {
width: 960px;
height: 500px;
margin: 30px auto;
}
.circle-container {
margin: 0 auto;
position: relative;
width: 440px;
height: 440px;
background: transparent;
/* 밴더프릭스 */
-webkit-animation: rotation 6s linear 0s infinite normal none;
-moz-animation: rotation 6s linear 0s infinite normal none;
-ms-animation: rotation 6s linear 0s infinite normal none;
-o-animation: rotation 6s linear 0s infinite normal none;
animation: rotation 6s linear 0s infinite normal none;
}
.circle {
position: absolute;
top: 170px;
left: 170px;
width: 100px;
height: 100px;
border-radius: 50%;
opacity: 0.7;
}
.circle:nth-child(1) {
-webkit-transform: rotate(0deg) translateX(150px);
-moz-transform: rotate(0deg) translateX(150px);
-ms-transform: rotate(0deg) translateX(150px);
-o-transform: rotate(0deg) translateX(150px);
transform: rotate(0deg) translateX(150px);
background: #ff504f;
}
.circle:nth-child(2) {
-webkit-transform: rotate(72deg) translateX(150px);
-moz-transform: rotate(72deg) translateX(150px);
-ms-transform: rotate(72deg) translateX(150px);
-o-transform: rotate(72deg) translateX(150px);
transform: rotate(72deg) translateX(150px);
background: #ffe63d;
}
.circle:nth-child(3) {
-webkit-transform: rotate(144deg) translateX(150px);
-moz-transform: rotate(144deg) translateX(150px);
-ms-transform: rotate(144deg) translateX(150px);
-o-transform: rotate(144deg) translateX(150px);
transform: rotate(144deg) translateX(150px);
background: #50dc64;
}
.circle:nth-child(4) {
-webkit-transform: rotate(216deg) translateX(150px);
-moz-transform: rotate(216deg) translateX(150px);
-ms-transform: rotate(216deg) translateX(150px);
-o-transform: rotate(216deg) translateX(150px);
transform: rotate(216deg) translateX(150px);
background: #41c39d;
}
.circle:nth-child(5) {
-webkit-transform: rotate(288deg) translateX(150px);
-moz-transform: rotate(288deg) translateX(150px);
-ms-transform: rotate(288deg) translateX(150px);
-o-transform: rotate(288deg) translateX(150px);
transform: rotate(288deg) translateX(150px);
background: #4db5dc;
}
/* Animations */
/*************************************************/
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotation {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
3. HTML / CSS 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190623 Basic Study 59(풀화면 동영상 - 서브메뉴) (0) | 2019.06.23 |
|---|---|
| HTML5 - 190623 Basic Study 58(박스 그림자 / 테두리 동적효과) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 56(3차원 회전 주사위) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 55(Transform 3차원) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 54(Transform 2차원) (0) | 2019.06.23 |
