댓글 검색 목록

[css] CSS로 구현하는 아름다운 수박모양

페이지 정보

작성자 운영자 작성일 19-07-30 09:52 조회 643 댓글 0

크림에서 나온 이 즐거운 CSS 애니메이션 조각으로 멋지게 마무리하십시오.

HTML :


<div class="container">
	<div class="full">
		<div class="melon"></div>
	</div>
	<div class="full">
		<div class="melon"></div>
	</div>
	<div class="half">
		<div class="melon melon--slice"></div>
	</div>
</div>

CSS :


:root {
  --size: 100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8efd6;
  overflow: hidden;
}

.container {
  width: calc(var(--size) * 2);
  height: calc(var(--size) * 2);
  position: relative;
}

.full {
  width: calc(var(--size) * 2);
  height: var(--size);
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  z-index: 1;
  -webkit-animation: slice 1s cubic-bezier(0.9, 0, 0.2, 1) forwards;
          animation: slice 1s cubic-bezier(0.9, 0, 0.2, 1) forwards;
}
.full:nth-child(1) {
  bottom: 0;
  top: unset;
  -webkit-animation: slice1 1s cubic-bezier(0.9, 0, 0.2, 1) forwards;
          animation: slice1 1s cubic-bezier(0.9, 0, 0.2, 1) forwards;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}
.full:nth-child(1) > .melon {
  top: unset;
  bottom: 0;
}

@-webkit-keyframes slice {
  0%, 80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(calc(var(--size) * 2.5));
            transform: translateX(calc(var(--size) * 2.5));
    opacity: 0;
  }
}

@keyframes slice {
  0%, 80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(calc(var(--size) * 2.5));
            transform: translateX(calc(var(--size) * 2.5));
    opacity: 0;
  }
}
@-webkit-keyframes slice1 {
  0%, 80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(calc(var(--size) * 1.5), calc(var(--size) * 1.5));
            transform: translate(calc(var(--size) * 1.5), calc(var(--size) * 1.5));
    opacity: 0;
  }
}
@keyframes slice1 {
  0%, 80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(calc(var(--size) * 1.5), calc(var(--size) * 1.5));
            transform: translate(calc(var(--size) * 1.5), calc(var(--size) * 1.5));
    opacity: 0;
  }
}
.half {
  width: calc(var(--size) * 2);
  height: var(--size);
  position: absolute;
  overflow: hidden;
  left: 0;
  bottom: 0;
  -webkit-animation: wiggle 3s cubic-bezier(0.9, 0, 0.2, 1);
          animation: wiggle 3s cubic-bezier(0.9, 0, 0.2, 1);
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
@-webkit-keyframes wiggle {
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  75% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes wiggle {
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  75% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.melon {
  position: absolute;
  width: calc(var(--size) * 2);
  height: calc(var(--size) * 2);
  border-radius: 50%;
  top: 0;
  left: 0;
  background: transparent;
  background-color: #43c29e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%23339f80' fill-opacity='0.75' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E");
  background-size: calc(var(--size) * 2);
}
.melon--slice {
  top: unset;
  bottom: 0;
  background: transparent;
  box-shadow: inset 0 0 0 calc(var(--size) * .05) #43c29e, inset 0 0 0 calc(var(--size) * .1) #7dd5bc, inset 0 0 0 var(--size) #ec5e64;
}
.melon--slice:before {
  content: '';
  position: absolute;
  margin: auto;
  width: calc(var(--size) * .05);
  height: calc(var(--size) * .1);
  background: #000;
  bottom: calc(var(--size) * .7);
  left: 0;
  right: 0;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  border-top-right-radius: 100% 150%;
  border-top-left-radius: 100% 150%;
  box-shadow: calc(var(--size) * .3) 0 0 0 #000, calc(var(--size) * .6) 0 0 0 #000, calc((var(--size) * .3) * -1) 0 0 0 #000, calc((var(--size) * .6) * -1) 0 0 0 #000, calc(var(--size) * .15) calc(var(--size) * .25) 0 0 #000, calc(var(--size) * .45) calc(var(--size) * .25) 0 0 #000, calc((var(--size) * .15) * -1) calc(var(--size) * .25) 0 0 #000, calc((var(--size) * .45) * -1) calc(var(--size) * .25) 0 0 #000;
}