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