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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.