ピュアなcss3を簡単に使って、ちょっと面白いフォールト・アートを作る（React/Vue強化コンポーネント版あり）

はじめに

テキスト

次に、純粋なCss3を使って「断層アニメーション」を実現する方法を紹介します。この効果はReact/vueコンポーネントにカプセル化されており、学習して使用することができます。 その効果を見てみましょう。

実装の原理

この効果の実装は、Css3の新機能であるmix-blend-modeとbackground-blend-modeに依存しています。

mix-blend-mode

このプロパティは、要素の内容が、要素の直接の親の内容や要素の背景とどのようにブレンドされるべきかを記述します。 値は以下のように記述します。

• mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: multiply
• mix-blend-mode: multiply; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: screen; mix-blend-mode: screen
• mix-blend-mode: screen; mix-blend-mode: overlay
• mix-blend-mode: overlay; mix-blend-mode: overlay
• mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: lighten
• mix-blend-mode: color-dodge; mix-blend-mode: color-dodge; mix-blend-mode: color-dodge
• mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-link; mix-blend-mode: hard-link
• mix-blend-mode: hard-light; mix-blend-mode: hard-light
• mix-blend-mode: soft-light; mix-blend-mode: soft-light; mix-blend-mode: soft-light
• mix-blend-mode: difference;
• mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: hue
• mix-blend-mode: ソフトライト; mix-blend-mode: 差分; mix-blend-mode: 除外; mix-blend-mode: 色相; mix-blend-mode: 彩度; mix-blend-mode: 色彩
• mix-blend-mode: unset; mix-blend-mode: unset; mix-blend-mode: unset; mix-blend-mode: unset

アニメーションの構造解析

<div className="blink-item">
 <div className="text text-front">興味深いフロントエンド</div>
 <div className="text text-back">興味深いフロントエンド</div>
</div>

ここでは、擬似要素を使って断層を実現しています。 だから、アニメーションの冒頭の記事では、実装が非常に簡単になり、単にキャンバスの背景を設定し、テキストオーバーレイの内容と混合し、最終的にテキストと断層線のアニメーションを設計することができます。 それでは、実装手順を見てみましょう。

ソリューションの実装

まず第一に、テキスト、断層線とキャンバスの背景を混在させる効果を達成するために、次のようなCSSコード。

.blink {
 // ...
 background-color: #000;
 .blink-item {
 &::after {
 content: '';
 position: absolute;
 z-index: 3;
 left: 0;
 top: 30px;
 width: 100%;
 height: 4px;
 background-color: #000;
 }
 .text-front {
 color: #74fcfd;
 }
 .text-back {
 position: absolute;
 transform: translate(-5px, -100%);
 color: #ea3448;
 mix-blend-mode: lighten;
 }
 }
}

上記のコードから、我々はCSSスタイルのバックテキストでミックスブレンドモードを使用し、明るく設定されていることがわかりますが、もちろん、値の他のモードに設定することもできます。 次に、断層のテキストアニメーションと断層線のアニメーションを実現するために、この作品はまた、CSS3 @キーフレームのアニメーションを使用することができ、非常に簡単ですが、コードは次のとおりです。

@keyframes shakeFront {
 0% {
 transform: translate(1px, 1px);
 }
 20% {
 transform: translate(-1px, 0);
 }
 60% {
 transform: translate(-1px, 0);
 }
 100% {
 transform: translate(1px, -1px);
 }
}
@keyframes shake {
 0% {
 transform: translate(-5px, -100%);
 }
 20% {
 transform: translate(-3px, -100%);
 }
 60% {
 transform: translate(1px, calc(-100% - 1px));
 }
 100% {
 transform: translate(2px, calc(-100% + 1px));
 }
}
@keyframes lineShake {
 0% {
 top: 10%;
 }
 20% {
 top: 60%;
 }
 40% {
 top: 35%;
 }
 60% {
 top: 2%;
 }
 80% {
 top: 80%;
 }
 100% {
 top: 99%;
 }
}

コードは次のとおりです。shakeFrontとshakeはそれぞれ後ろと前のテキストのアニメーション、lineShakeは断層線のアニメーションです。 最後に、css3animationの助けを借りて、アニメーションをループさせるだけです。

react/vueコンポーネントへのラップ

より自由度の高い断層アニメーションを実現し、使用するエンジニアのコストを削減するために、作者はreactコンポーネントにカプセル化されます、 vueコンポーネントのカプセル化のアイデアは似ているので、興味のある友人は自分で試すことができます。 ここでは、障害アニメーションのコンポーネント設計モデルを分解します。

上記のカスタム構成を実現するためには、さらに既存のコードをカプセル化する必要があり、そのような達成するために擬似要素を使用して断層線ので、どのように擬似要素の背景色も変更に応答することを保証するために背景色を切り替えた後？ ここでは、背景の継承を使用しています。

.blink {
 .blink-item {
 background-color: inherit;
 &::after {
 // ...
 background-color: inherit;
 animation: lineShake .5s infinite;
 }

この方法では、唯一の.blinkコンテナで動的に背景色を渡す必要があり、あなたが望む効果を達成することができます。 Reactコンポーネントのコードは以下の通りです。

import React from 'react'
import './index.less'
export default function Blink(props) {
 const { 
 text = '興味深いフロントエンド',
 fontSize = '48px',
 themeColor = '#000',
 textColor = ['#74fcfd', '#ea3448']
 } = props
 return (
 <div className='blink' style={{backgroundColor: themeColor}}>
 <div className="blink-item" data-text={text} style={{fontSize: fontSize}}>
 <div className="text text-front" style={{color: textColor[0]}}>{text}</div>
 <div className="text text-back" style={{color: textColor[1]}}>{text}</div>
 </div>
 </div> 
 )
}

どうです、とてもシンプルでしょう？ 私はgithubにコンポーネントコードをアップロードしているので、インストールして使用したり、さらにそのベース上で改善したり、断層アニメーションの背景イメージに基づくなど、比較的安定してサポートするために、モダンブラウザで上記のcss3の機能は、H5の開発を行うことを試みることができます。

最後に