CSS3 放射状グラデーション大きな魚が小さな魚を食べる: 孤独な大きな魚_html/css

CSS3 放射状グラデーション大きな魚が小さな魚を食べる: 孤独な大きな魚_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:20:18

オリジナル

1718 人が閲覧しました

最近釣りにはまってますが、なかなか大きな魚が釣れないので、弱った心を慰めるために大きな魚を描きました。

最初の写真:

上記は、今夜あなたと共有したい小さなデモです。私は彼を「孤独な大きな魚が小さな魚を食べる」と名付けました。

本題に戻りますが、この大きな魚は頭、尾、目の 3 つの部分に分かれています。まず、この魚のフレームを見てください。以下に示すように、クラスは非常に簡単です

<div class="fish">        <div class="fisg-head"></div>        <div class="fisg-tail"></div>    </div>

ログイン後にコピー

最初に魚全体に少し加工を施します

.fish{            display: inline-block;            position:relative;        }

ログイン後にコピー

それから彫刻です、最初のステップは魚を描くことです頭:

.fisg-head{            float: left;            width: 150px;            height: 150px;            border-radius: 100px;            background: radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);            background: -webkit-radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);            background: -moz-radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);            background: -ms-radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);            }

ログイン後にコピー

次のステップは尾を描くことです:

.fisg-tail{            float: left;            width: 100px;            height: 100px;            transform: rotate(30deg);            -webkit-transform: rotate(30deg);            -moz-transform: rotate(30deg);            -ms-transform: rotate(30deg);            background: radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);            background: -webkit-radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);            background: -moz-radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);            background: -ms-radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);        }

ログイン後にコピー

最後のステップは魚の目を描くことです

.fisg-head::after{            content:"";            display:block;            position:absolute;            top:20px;            left:35%;            width:20px;            height:20px;            border-radius:10px;            background:rgba(220, 245, 29,1);        }

ログイン後にコピー

radial-gradient は CSS3 の新機能です。この大きな魚を認識する方法の 1 つとして、他の賢いトリックをみんなが共有しており、それが私の目を開かせてくれました。

将来的には他の魚も登場しますが、一種類の魚だけでどうやってそれを行うことができますか？

ははは、12時だよ、眠い