CSS3 Radial Gradient----Feeding frenzy's lonely big fish

Recently infatuated with the fishing, but always can not catch the big fish, so draw a big fish to comfort my weak heart.

First:

Above this is this evening I want to share with you small demo, I give him the name of the word "feeding frenzy of the lonely big fish."

To the point, this big fish is divided into three parts: Head, tail, eyes. First look at the frame of the fish, as shown below, class has been very straightforward.

<class= "Fish">        <class= " Fisg-head "></div>        <class  = "Fisg-tail"></div>    </Div  >

First, give the whole fish a little bit of treatment.

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

Then is the carved, first step, draw fish head:

. 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%) ; }

The second step is to draw the tail:

. 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%); }

Last step, draw the fish's finishing touches

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

Radial-gradient is a new feature of CSS3, here I use one of the ways to achieve this big fish, we have other tricks not to share a piece, let me also open horizons.

There will be other fish in the follow-up, only one fish can do it?

Haha, 12 o ' Night, break sleep

CSS3 Radial Gradient----Feeding frenzy's lonely big fish