この記事は、css3を使用して素晴らしいインタビュアーのバックグラウンドアニメーションを実現する著者の前回の記事の続編です（ソースコードが進んでいます）。また、cssの知識に多くの困難はなく、css3の新機能に精通しているため、css3のスキルを紹介する記事でもあります。基本的な理論的知識。したがって、この記事を書く目的は、一方では私の仕事におけるいくつかの高度なcssスキルを要約することであり、他方では、あなたの仕事の効率を改善するために、cssを開発するためのいくつかの実践的なスキルと効率的な方法を教えたいと思います。
学びます
ボックスシャドウの高度なアプリケーション
適応楕円を作る
純粋なcss3は円グラフの進行状況アニメーションを実現します
ボーダーを使用してダイアログスタイルを実装する
css3フィルターの簡単なアプリケーション
css3疑似要素はカスタムチェックボックスを実現します
css3アニメーションをオンラインで作成するための強力なツール
テキスト
1.ボックスシャドウの高度なアプリケーション
css3の新機能を使用すると、さまざまな予期しない特殊効果を実現できます。次のいくつかのケースでは、css3 box-shdowを使用して実現します。今すぐ始めましょう！
水の波のアニメーションを実現する
知識のポイント：ボックスシャドウ
css3を使用しない場合、どのようにして水波拡散のアニメーションを実現できるか考えてみてください。次の効果を実現するには、多くのjsを作成する必要があります。
css3はコアコードを実装します
<style>
.wave {
margin-left: auto;
margin-right: auto;
width: 100px;
height: 100px;
border-radius: 100px;
border: 2px solid #fff;
text-align: center;
line-height: 100px;
color: #fff;
background: #06c url(http://p3g4ahmhh.bkt.clouddn.com/me.jpg) no-repeat center center;
background-size: 100%;
animation: wave 4s linear infinite;
}
@keyframes wave {
0% {
box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);
}
50% {
box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);
}
100% {
box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);
}
}
</style>
<div class="wave"></div>
ここでは、主にボックスシャドウマルチレベルシャドウを使用して、@ keyframesを使用するアニメーション部分を実現していますが、大丈夫ですか？
読み込みアニメーションを実装する
知識のポイント：ボックスシャドウ複数のシャドウ
アニメーションの読み込みは、誰にとってもなじみのないことではありません。アニメーションの読み込みは、疑似要素、gif、jsなど、さまざまな方法で実装できますが、cssに直接実装する方がエレガントだと思います。
コアコードは次のとおりです。
<style>
.loading {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: transparent;
animation: load 3s linear infinite;
}
@keyframes load {
0% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 0);
}
30% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 1),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 0);
}
60% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 1),
40px 0 0 rgba(250, 189, 189, 0);
}
100% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 1);
}
}
</style>
<div class="loading"></div>
また、ボックスシャドウマルチバックグラウンドを使用してこれを実現します。これは、当時私が考えていた方向でもあります。他のCSSソリューションについては、皆さんが私とコミュニケーションをとることを歓迎します。
ダイアログボックスとダイアログボックスの不規則な投影を実現する
知識ポイント：フィルターと疑似要素
ここにはcssフィルターの知識が含まれていますが、それも非常に簡単です。css3の公式Webサイトを見ると理解できます。効果を直接見てみましょう。
フィルタのドロップシャドウを使用して不規則なグラフィックのシャドウを実現し、次に疑似要素と境界線を使用して頭の三角形を実現します。
<style>
.odd-shadow{
margin-left: auto;
margin-right: auto;
width: 200px;
height: 80px;
border-radius: 8px;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 80px;
background: #06c;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.8))
}
.odd-shadow::before{
content: '';
position: absolute;
display: block;
margin-left: -20px;
transform: translateY(20px);
width:0;
height: 0;
border: 10px solid transparent;
border-right-color: #06c;
}
</style>
<div class="odd-shadow">哎呦，猪先森</div>
ぼかし効果
知識ポイント：フィルター
これは比較的簡単です。ここでは、画像とコードの真上にあります。
filter: blur(20px);
2.適応楕円を作成します
ボーダーラジアスの登場により、角を丸くするのに非常に便利で、ボーダーラジアスの特性をさらに研究することで、さまざまなグラフィック効果を実現することができます。その力を見てみましょう！
ナレッジポイント：border-radius：a / b; // a、bは、それぞれ丸みを帯びた角の水平方向と垂直方向の半径です。単位が％の場合、分析は幅と高さに関連していることを意味します。
コアコード：
<style>
.br-1{
width: 200px;
height: 100px;
border-radius: 50% /10%;
background: linear-gradient(45deg,#06f,#f6c,#06c);
}
.br-2{
width: 100px;
border-radius: 20% 50%;
}
.ani{
animation: skew 4s infinite;
}
.ani1{
animation: skew1 4s infinite 2s;
}
.ani2{
animation: skew2 4s infinite 3s;
}
@keyframes skew{
to{
border-radius: 50%;
}
}
@keyframes skew1{
to{
border-radius: 20px 20px 100%;
}
}
@keyframes skew2{
to{
transform: rotate(360deg);
}
}
</style>
<div class="br-1 black-theme"></div>
<div class="br-1 black-theme ani"></div>
<div class="br-1 black-theme ani1"></div>
<div class="br-1 br-2 black-theme ani2"></div>
ここでは、主に背景グラデーションを使用して派手な背景を実現し、border-radiusを使用してさまざまな楕円パターンの仕様を実現します。
3.純粋なcss3は円グラフの進行状況アニメーションを実現します
知識ポイント：border-radius：abcd / efgh;アニメーション複数のアニメーションプロパティ;
効果は次のとおりです。
コアコード：
<style>
.br-31{
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(to right,#f6c 50%,#333 0);
}
.br-31::before{
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: #f6c;
transform-origin: left;
animation: skin 4s linear infinite,
bg 8s step-end infinite;
}
@keyframes skin{
to{
transform: rotate(.5turn);
}
}
@keyframes bg{
50%{
background: #333;
}
}
.br-32::before{
animation-play-state: paused;
animation-delay: inherit;
}
</style>
<div class="br-31 black-theme"></div>
<div class="br-31 br-32 black-theme" style="animation-delay:-1s"></div>
この作品の実現には、主にグラデーションの背景を使用します。これは、コード内の半円をブロックする方法、半円をアニメーション化する方法、回転の原点の位置を変更する方法など、扇形の進行を達成するための鍵でもあります。これらは非常に技術的ですが、少しです。絵を描くことも可能です。
4.カスタムチェックボックスを実装するためのcss3疑似要素
ネイティブのチェックボックスコントロールスタイルをカスタマイズするのは非常に難しいため、エンジニアが設計ドラフトを実装するのが難しくなることは誰もが知っています。css3の登場により、：checkedセレクターが追加されたため、：checkedとlabelを使用して、さまざまなフォーム選択コントロールを実装できます。実装方法を見てみましょう。
上記のカスタムチェックボックスを実装する方法を見てみましょう。
<style>
.check-wrap{
text-align: center;
}
.checkbox{
position: absolute;
clip: rect(0,0,0,0);
}
.checkbox[type="checkbox"]:focus + label::before{
box-shadow: 0 0 .6em #06c;
}
.checkbox[type="checkbox"] + label::before{
content: '\a0'; /* 不换行空格 */
display: inline-block;
margin-right: .3em;
width: 2em;
height: 2em;
border-radius: .3em;
vertical-align: middle;
line-height: 2em; /* 关键 */
font-size: 20px;
text-align: center;
color: #fff;
background: gray;
}
.checkbox[type="checkbox"]:checked + label::before{
content: '\2713'; /* 对勾 */
background: black;
}
label{
margin-right: 40px;
font-size: 20px;
}
</style>
<div class="check-wrap">
<input type="checkbox" class="checkbox" id="check-1" />
<label for="check-1">生男孩</label>
<input type="checkbox" class="checkbox" id="check-2" />
<label for="check-2">生女孩</label>
</div>
ネイティブのチェックボックスコントロールを非表示にするために、clip：rect（0,0,0,0）を使用してインターセプトし、次にチェックボックスの疑似クラスを使用します：チェックして相互作用を実現します。
次に、展開して、カスタムスイッチを実装しましょう。
ここでの原則は同じですが、スタイルが変更され、コードが直接変更されている点が異なります。
<style>
.check-wrap{
margin-bottom: 20px;
text-align: center;
}
.switch{
position: absolute;
clip: rect(0,0,0,0);
}
.switch[type="checkbox"] + label{
width: 6em;
height: 3em;
padding: .3em;
border-radius: .3em;
border: 1px solid rgba(0,0,0,.2);
vertical-align: middle;
line-height: 2em; /* 关键 */
font-size: 20px;
text-align: center;
color: #fff;
box-shadow: 0 1px white inset;
background-color: #ccc;
background-image: linear-gradient(#ddd,#bbb);
}
.switch[type="checkbox"]:checked + label{
box-shadow: 0.05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}
label{
margin-right: 40px;
font-size: 14px;
}
.switch-an{
position: absolute;
clip: rect(0,0,0,0);
}
.switch-an[type="checkbox"] + label{
position: relative;
display: inline-block;
width: 5em;
height: 2em;
border-radius: 1em;
color: #fff;
background: #06c;
text-align: left;
}
.switch-an[type="checkbox"] + label::before{
content: '';
width:2em;
height: 2em;
position: absolute;
left: 0;
border-radius: 100%;
vertical-align: middle;
background-color: #fff;
transition: left .3s;
}
.switch-an[type="checkbox"] + label::after{
content: 'OFF';
margin-left: 2.6em;
}
.switch-an[type="checkbox"]:checked + label::before{
transition: left .3s;
left: 3em;
}
.switch-an[type="checkbox"]:checked + label::after{
content: 'NO';
margin-left: .6em;
}
</style>
<div class="check-wrap">
<input type="checkbox" class="switch" id="switch-1" />
<label for="switch-1">生男孩</label>
<input type="checkbox" class="switch" id="switch-2" />
<label for="switch-2">生女孩</label>
</div>
<div class="check-wrap">
<input type="checkbox" class="switch-an" id="switch-an-1" />
<label for="switch-an-1"></label>
</div>
css3がより強力なアニメーションとカスタム機能を提供すると思いますか？実際、私たちはあなたが試してみるのを待って、よりクールでより実用的な効果を達成することができます。
5.css3アニメーションをオンラインで作成するための強力なツール
最後に、オンラインでさまざまなBezier曲線を作成するためのツールをお勧めします。これは、アニメーションを行うときによく使用する、cubic-bezierです。