Shulou(Shulou.com)06/03 Report--

This article is about how to achieve CSS3 radial gradient in the big fish eat small fish lonely big fish effect picture, the editor thinks it is very practical, so share with you to learn, I hope you can get something after reading this article, not to say much, follow the editor to have a look.

Like fishing is not that skill to catch fish, below draw a big fish to comfort my weak mind. First of all, I'll show you the small effect pictures. If you feel good and satisfied, please read on.

First, the picture above:

This is the little DEMO I want to share with you. I named him "the lonely big fish that eats the small fish".

To get to the point, the big fish is divided into three parts: head, tail and eyes. First of all, take a look at the frame of the fish. As shown below, class has made it very straightforward.

CSS Code copies content to the clipboard

First of all, do a little treatment for the whole fish.

CSS Code copies content to the clipboard

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

Then it is carefully carved, and the first step is to draw the fish head:

CSS Code copies content to the clipboard

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

Step two, draw the tail:

CSS Code copies content to the clipboard

.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), rgba (255px rgba) 100px green 100px); background:-webkit-radial-gradient (100px 0px, rgba (255px), rgba (255px) 100px camera green 100%); background:-moz-radial-gradient (100px 0px, rgba), rgba (255px), rgba (255px) Background:-ms-radial-gradient (100px 0px, rgba), rgba (255px Green 100px);}

The last step is to paint the fish as the finishing touch.

CSS Code copies content to the clipboard

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

Radial-gradient is a new feature of CSS3, and here I use one of the ways to implement this big fish.

The above is how to achieve the CSS3 radial gradient in the big fish eat small fish lonely big fish effect picture, the editor believes that there are some knowledge points may be seen or used in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.