CSS Animation

13382 ワード
CSS animation テキストリンク
1.実施画面

2.HTMLコード
整理マーク(上から下)
- body
- div class='dots'(1) : 3개의 dots을 가진 div(block)
- span class='dot'(3) : 1개의 dot을 가진 span(inline)
- div class='lines' 와 span class='line' 도 위와 같음
コード#コード#
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
  <div class='dots'>
    <span class='dot' ></span>
    <span class='dot'></span>
    <span class='dot'></span>
  </div>
  <div class='lines'>
    <span class='line'></span>
    <span class='line'></span>
    <span class='line'></span>
    <span class='line'></span>
    <span class='line'></span>
  </div>
</body>
3. CSS
内容を整理する
1. div 가운데 위치시키기 (부모태그 body에 flex 적용)
  display: flex;				flex-direction: column;
  justify-content: center;		 align-items: center;

2. animation 만들기
- @keyframes {{}} 안의 내용은 코드 참고

3. 태그마다 따로 animation-delay 등으로 효과를 다채롭게 표현 가능
コード#コード#
html,
body {
  height: 100%;
}
/* 
> display, direction, justify, align 옵션을 
> 아래와 같이 설정하면, 콘텐츠들이 화면 가운데 위치 
*/
body {
  font-family: sans-serif;
  background-color: #76c4c6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 
  > div에 rotate(0.5turn)으로 회전효과를 줌 
    - span에 각각 주는게 아님!! 
  > space-around로 간격을 띄워줌 
*/
.dots {
  width: 200px;
  display: flex;
  justify-content: space-around;
  animation: dotAnim 1s ease-in-out infinite;
}

.dot {
  background-color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.lines {
  width: 150px;
  margin-top: 200px;
  display: flex;
  justify-content: space-around;
}

/* 각각의 line에 animation 주기 */
.line {
  width: 20px;
  height: 80px;
  background-color: white;
  animation: LineAnim 1s ease-in-out infinite;
}

/* 
rotate에 0.5turn으로 반바퀴 돌아가게 설정
*/
@keyframes dotAnim {
  50% {
    transform: rotate(0.5turn);
  }
  100% {
    transform: rotate(0.5turn);
  }
}

/* 
none 설정으로 크기 고정시켜야 깔끔하게 나옴
*/
@keyframes LineAnim {
  0% {
    transform: none;
  }
  25% {
    transform: scaleY(2);
  }
  50%,
  100% {
    transform: none;
  }
}

/* line 들에 각각 다른 딜레이 주기 */
.line:nth-child(2) {
  animation-delay: 0.1s;
}

.line:nth-child(3) {
  animation-delay: 0.2s;
}

.line:nth-child(4) {
  animation-delay: 0.3s;
}

.line:nth-child(5) {
  animation-delay: 0.4s;
}
[コンピュータ構築]第6週の概要
mysqlデータベースへの接続中にエラーが発生しました:The server time zone value'й���׼ʱ��' is unrecognized or represents more than one ti...