animation 으로 놀기 - Skew image -

17271 단어 CSSanimation
CSS animation day28이 되었습니다.

지난번 의 작품에서는, 중요한 skew 가 별로 나오지 않았으므로, 이번이야말로 정말로, skew 에focus 를 둡니다.

1. 완성판





2. 참고문헌



How To Create Modern Morph Animated Slides in PowerPoint 2018
HTML Css Angled Div Shape - Slanted / Skewed / Razor-Blade div Shape -
CSS Skewed Background Tutorial - pure css tutorial

3. 분해해 본다



❶.

우선은 평소대로 마크 업입니다.

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="content"></div>
      <div class="image"></div>
    </div>
  </body>
</html>

styles.scss
body {
  margin: 0px;
  padding: 0px;
  background: linear-gradient(#43cea2, #185a9d);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 50%;
  background-color: #fff;
  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.5);
}



그럼 여기에 두 개의 이미지를 넣어 보겠습니다.

styles.scss
body {
  margin: 0px;
  padding: 0px;
  background: linear-gradient(0deg, #43cea2, #185a9d);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 80%;
  height: 400px;
  background-color: #fff;
  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.5);
  display: flex;
}

.content {
  width: 50%;
  height: 100%;
  background: #ded46e;
}

.image {
  width: 50%;
  height: 100%;
  background: #003833;
}



❷.
그러면 skew에서 두 경계에 대각선을 넣습니다.

styles.scss


.content {
  width: 50%;
  height: 100%;
  background: #ded46e;
  transform: skew(10deg, 0deg);
}

.image {
  width: 50%;
  height: 100%;
  background: #003833;
  z-index: 3;
  transform: skew(10deg, 0deg);
}



우무

돌출해 버려, box-sizing: border-box 를 적응해 잘 되지 않았습니다. 다른 방법을 생각해 봅시다.

❸.
조금 이야기가 바뀝니다만, 여러분은, CSS로 삼각형을 만들려면 어떻게 하면 좋은지 알고 있습니까?

그렇습니다, border 속성을 구사 했어요.
border와 border의 경계는 비스듬해졌습니다.

여기 의 기사에 상세하게 되어 있으므로, 참조해 주세요.

그럼 조속히, 이 아이디어를 사용해 갑시다.

styles.scss

.container {
  width: 80%;
  height: 400px;
  background-color: #fff;
  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.5);
  display: flex;
}

.content {
  width: 50%;
  height: 100%;
  background: #ded46e;
  box-sizing: border-box;
}

.image {
  width: 50%;
  height: 100%;
  background: #003833;
  border-left: 100px solid yellow;
  box-sizing: border-box;
}



우선, 오른쪽의 image 클래스에, border-left 로, 검은색 내향의 경계를 만듭니다.

styles.scss
.image {
  width: 50%;
  height: 100%;
  background: #003833;
  border-left: 100px solid #000;
  border-bottom: 400px solid #185a9d;
  box-sizing: border-box;
}



그런 다음 border-bottom을 설정했습니다.
보시다시피 경계가 비스듬하게되어 있습니다.

이제 검은 색 경계를 왼쪽의 content 클래스와 같은 색으로 만들고 border-bottom의 색을 투명하게 만듭니다.

styles.scss

.content {
  width: 50%;
  height: 100%;
  background: #ded46e;
  box-sizing: border-box;
}

.image {
  width: 50%;
  height: 100%;
  background: #003833;
  border-left: 100px solid #ded46e;
  border-bottom: 400px solid transparent;
  box-sizing: border-box;
}



좋은 느낌이 들었습니다.

길이를 균등하게 하기 위해서, 이전 전달한, calc 메소드로 조정합니다.

styles.scss
.content {
  width: calc(50% - 50px);
  height: 100%;
  background: #ded46e;
  box-sizing: border-box;
}

.image {
  width: calc(50% + 50px);
  height: 100%;
  background: #003833;
  border-left: 100px solid #ded46e;
  border-bottom: 400px solid transparent;
  box-sizing: border-box;
}



할 수 있었습니다!
멋진 디자인이군요.

내일은, 이번이야말로 정말로, skew animation 를 구현합니다.
그럼 또 내일~
animation에서 놀기 - Typewriter Effect -
animation에서 놀기 - Scroll Arrow2 -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage