SeaPlus

[구성요소] - h2 두개로 구현된 애니메이션 - content h2:nth-child(1) 는 water 문자를 표현하는 역할 - content h2:nth-child(2) 는 water 내부의 물결치는 애니메이션으로 만든다. [Clippy - CSS clip-path maker] Clippy 사이트 ( https://bennettfeely.com/clippy/ ) - clipy-path 함수는 shape을 생성하는 함수이고 지정 값을 통해 원하는 모양을 만들 수 있다. - 사이트를 통해 물결모양을 생성한다. [HTML] Water Water [CSS] @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;5..

크게 2가지 애니메이션으로 분류 가능하다. 1. 계속 전환되는 배경색 애니메이션 2. 늘었다 줄었다 하는 text 애니메이션 [배경 효과] - 총 3개의 레이어로 구성되어 있다.( 배경이미지 레이어 1개, 조명 2개) - 배경이미지는 "그라데이션 효과 + 벽돌 이미지" 로 구성되어 있는데 "background-blend-mode: multiply;" 로 혼합해서 구성 했다. - 2개의 조명은 배경의 after, before 가상선택자로 구현했다. [1. 배경색 애니메이션] - hue-rotate 속성을 통해 색조 회전을 한다. - "색조 회전"을 적용하기 전에 배경색상은 정해져 있어야 한다. @keyframes animateBgColor { 0% { /* hue-rotate -> 색조회전 */ /* 배경..

크게 2가지 애니메이션 효과로 분류 가능하다. 1. 요소들을 360도 회전시키는 애니메이션 2. 요소들을 가운데 한 점으로 모아주는 애니메이션 [가상선택자와 그림자효과] - div class loader의 before, after 가상선택자를 활용해 애니메이션 효과를 적용할 원들을 만든다. - 각 요소들의 그림자를 x축으로 이동시키고 배치함으로써 또 다른 요소가 활용되는것 과 같은 효과를 만들어 낸다. .loader:before { background-color: #cb2025; box-shadow: 30px 0 0 #f8b334; margin-bottom: 10px; } .loader:after { background-color: #00a096; box-shadow: 30px 0 0 #97bf0d; }..

하단부 에서 bubble 효과가 나타났다가 사라지는 애니메이션 - 버블 요소를 하단부에 정렬 배치 - 각 버블에게 "하단 -> 상단" 으로 움직이는 animation 적용 - 각 버블이 하단->상단으로 움직일때 하단부분과 상단부분 keyframes 에서 opacity 값 조정 - 각 버블에게 적용되는 animation delay값을 조정하여 다른속도로 실행된다. [HTML] Sign UP Welcome to our World's Creative Studio Take a tour [CSS] * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: sans-serif; color: #fbfcfd; } button { display: b..