コニファ・ロゴ

csstest:CSSだけで、画面に吸い付くようなフォント表示アニメーション

CSS3の「@keyframes」などを使い、タイトルやロゴ風のテキストが一文字ずつ下から浮かび上がって画面に張り付いていくアニメーションの実装です。以前はjavascriptなどの手を借りなければできなかった動きが、CSS3では可能になりました。ただ、テキストを個別にひとつずつ動かしているため、CSSの記述はやや長めになります。

また、斜めに色分けされたテキストの輝くような効果がきれいです。次は、やや古いMacのChrome v46でサンプルページを表示したときの画像です。

●実際の表示サンプルページ → 最新のブラウザかそれに準じるブラウザでご覧下さい。

実装:

HTMLソース

<div>
	<span data-text="M"></span>
	<span data-text="A"></span>
	<span data-text="G"></span>
	<span data-text="N"></span>
	<span data-text="E"></span>
	<span data-text="T"></span>
	<span data-text="Y"></span>
	<span data-text="P"></span>
	<span data-text="E"></span>
</div>

CSSソース

@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);
@-webkit-keyframes flip-top {
	from {
 	-webkit-transform: rotate(50deg) translateY(120vh);
	transform: rotate(50deg) translateY(120vh);
	}
}
@keyframes flip-top {
  from {
    -webkit-transform: rotate(50deg) translateY(120vh);
            transform: rotate(50deg) translateY(120vh);
  }
}
@-webkit-keyframes flip-bottom {
  from {
    -webkit-transform: rotate(-50deg) translateY(120vh);
            transform: rotate(-50deg) translateY(120vh);
  }
}
@keyframes flip-bottom {
  from {
    -webkit-transform: rotate(-50deg) translateY(120vh);
            transform: rotate(-50deg) translateY(120vh);
  }
}
body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: #111;
  -webkit-animation: glow 8s both;
  animation: glow 8s both;
}

span {
  font: 900 10vw Raleway;/*900 15vw Raleway;*/
  position: relative;
  display: inline-block;
  -webkit-perspective: 500px;
          perspective: 500px;
}
span:nth-child(odd):before {
  -webkit-animation-name: flip-top;
          animation-name: flip-top;
}
span:nth-child(odd):after {
  -webkit-animation-name: flip-bottom;
          animation-name: flip-bottom;
}
span:nth-child(even):before {
  -webkit-animation-name: flip-bottom;
          animation-name: flip-bottom;
}
span:nth-child(even):after {
  -webkit-animation-name: flip-top;
          animation-name: flip-top;
}
span:nth-child(1n + 0):before {
  color: #4EC0B6;
}
span:nth-child(1n + 0):after {
  color: #4ea4c0;
}
span:nth-child(2n + 1):before {
  color: #3967CB;
}
span:nth-child(2n + 1):after {
  color: #3c39cb;
}
span:nth-child(3n + 2):before {
  color: #FDCD2F;
}
span:nth-child(3n + 2):after {
  color: #e8fd2f;
}
span:nth-child(4n + 3):before {
  color: #E23942;
}
span:nth-child(4n + 3):after {
  color: #e26839;
}
span:nth-child(1):before {
  -webkit-animation-delay: 0.88706s;
          animation-delay: 0.88706s;
}
span:nth-child(1):after {
  -webkit-animation-delay: 1.32717s;
          animation-delay: 1.32717s;
}
span:nth-child(2):before {
  -webkit-animation-delay: 1.76318s;
          animation-delay: 1.76318s;
}
span:nth-child(2):after {
  -webkit-animation-delay: 2.19375s;
          animation-delay: 2.19375s;
}
span:nth-child(3):before {
  -webkit-animation-delay: 2.61756s;
          animation-delay: 2.61756s;
}
span:nth-child(3):after {
  -webkit-animation-delay: 3.03328s;
          animation-delay: 3.03328s;
}
span:nth-child(4):before {
  -webkit-animation-delay: 3.43965s;
          animation-delay: 3.43965s;
}
span:nth-child(4):after {
  -webkit-animation-delay: 3.8354s;
          animation-delay: 3.8354s;
}
span:nth-child(5):before {
  -webkit-animation-delay: 4.21932s;
          animation-delay: 4.21932s;
}
span:nth-child(5):after {
  -webkit-animation-delay: 4.59022s;
          animation-delay: 4.59022s;
}
span:nth-child(6):before {
  -webkit-animation-delay: 4.94696s;
          animation-delay: 4.94696s;
}
span:nth-child(6):after {
  -webkit-animation-delay: 5.28843s;
          animation-delay: 5.28843s;
}
span:nth-child(7):before {
  -webkit-animation-delay: 5.61358s;
          animation-delay: 5.61358s;
}
span:nth-child(7):after {
  -webkit-animation-delay: 5.92141s;
          animation-delay: 5.92141s;
}
span:nth-child(8):before {
  -webkit-animation-delay: 6.21098s;
          animation-delay: 6.21098s;
}
span:nth-child(8):after {
  -webkit-animation-delay: 6.48137s;
          animation-delay: 6.48137s;
}
span:nth-child(9):before {
  -webkit-animation-delay: 6.73177s;
          animation-delay: 6.73177s;
}
span:nth-child(9):after {
  -webkit-animation-delay: 6.96139s;
          animation-delay: 6.96139s;
}
span:before, span:after {
  display: block;
  content: attr(data-text);
  -webkit-animation: 0.88889s ease-out both;
          animation: 0.88889s ease-out both;
  -webkit-animation-name: inherit;
          animation-name: inherit;
  text-shadow: 0 0 1em;
}
span:before {
  -webkit-clip-path: polygon(0 0 100% 0, 100% 100%);
  clip-path: polygon(0 0 100% 0, 100% 100%);
  position: absolute;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  color: #4EC0B6;
}
span:after {
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  color: #3967CB;
}

 

 

戻るボタン