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

In this article, the editor introduces in detail "how to make small balls with DIV+CSS under stylus". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to make small balls with DIV+CSS under stylus" can help you solve your doubts.

Preparatory work

Npm install stylus---- > npm install-g stylus

Create new wanzi.css,wanzi.styl and index under the project directory, and introduce wanzi.css on html

Switch the command line to the project directory

Start live-server real-time refresh-- > live-server

Start stylus and monitor wanzi.styl--- > stylus-w wanzi.styl

Construct the whole structure of small balls

Let's first analyze the structure of the meatballs. The meatballs have grown:

1 face

Hair

Neck

The body, the clothes on the body

There is a belt on the waist

Two hands

Two legs, wearing a red dress.

Feet, wearing red shoes.

The structure of the face

Set the basic style first

Base-color = # 152131body font-size 20pxbody, div margin 0 padding 0 background # ffef5e.border border 1px solid base-color.main position relative width 1000px height 1000px margin 50px auto.wanzi position absolute top 250px left 100px z-index 10

Basic facial style

.face background # fbdac7 width 126px height 113px position absolute border 1px solid # 000000 top 0 left 20% border-radius 18px 40px 80px 80px

Eyebrow

Realization principle: set width,height to determine eyebrow length, border-radius to determine the degree of roundness, transform:rotate () to determine the degree of inclination of eyebrows. Brow width 37px height 3px background base-color position absolute top 31px border-radius 50% &. Left-brow left 13px transform:rotate (- 13deg) &. Right-brow right 13px transform:rotate (13deg)

Eye

Realization principle: round the four corners of the box with border-radius to form a circle. Width and height affect the size and shape of the eyes. Eye width 13px height 13px border-radius: 50% background # 000000 position absolute top 45px z-index 2 &. Left-eye left 30% &. Right-eye right 30%

Ear

Implementation principle: setting border-radius,width and height affects ear size, shape .ear width 17px height 26px position absolute top 30px background-color # fbdac7 z-index 2 & .left-ear left- 10% border-radius: 40 0069% & .right-ear right- 10% border-radius 0 40% 69% 0

Dimple

Implementation principle: setting border-radius,width and height affects dimple size, shape .blusher width 14px height 14px border-radius 50% background-color # f79c99 position absolute top 77px z-index 2 &. Left-blusher left 9% &. Right-blusher right 9%

Mouth

Realization principle: round the box with fillet border-radius, define the style after the pseudo element after, set the pseudo element background color to the face color, achieve the effect of covering the upper part of the mouth box, and form the shape of the mouth.

.mouth width 30px height 27px border-radius:79% border: 1px solid # 000000 background-color # e77072 position absolute top 62px left 38% z-index 1 &: after content'/ * must have content attribute * / width 32px height 25px position absolute top-9px left-1px background-color # fbdac7

Sawtooth hair structure

Realization: turn the box into a parallelogram through transform:skew (), then rotate the parallelogram to the corner down through rotate (), and then adjust the position of the hair through position adjustment.

Hair width 35px height 45px background base-color position absolute z-index 1 transform rotate (70deg) scale (1) skew (44deg) translate (8px) & .hair1 top 17px left 27px & .hair2 top 8px left 52px & .hair3 top 4px left 73px & .hair4 top 0 left 90px & .hair5 top 4px left 108px & .hair6 top 8px left 125px & .hair7 top 17px right 17px

Neck

.neck width 20px height 7px border 1px solid # 000 background-color # fbdac7 position absolute top 113px left 53px z-index 1

clothes

Overall analysis: clothes have collars and straps, how to make straps and collars fully displayed in the clothes, not more than the clothes box? Implementation: hide the elements beyond the box by setting overflow:hidden in the clothing box, and then adjust the display order through z-index Cover the part of the collar covered by the collar: tranform:rotate () rotate to the right position. Clothes width 130px height 130px position absolute border: 1px solid # 000 background-color # ffffff border-radius 36% 36% 00 overflow hidden top 121px z-index 10. Collar / * collar * / width 10px height 25px position absolute border: 1px solid # 000 background-color # fff top-8px z-index 4 &. Left-collar left 35% transform rotate (- 40deg) &. Right-collar right 35% Transform rotate (40deg) .straps / * braces * / width 10px height 120px position absolute background-color # f7003b border: 1px solid # 000top 0 z-index 3 & .left-straps left 28% & .right-straps right 28% .belt / width 130px height 10px position absolute background-color # f7003b border: 1px solid # 000top 119px z-index 3

Two-handed structure

Implementation principle: it is actually two ellipses of different colors, which are cascading through the display order z-index, and only the two sides are exposed.

.arm-inside height 116px width 156px position absolute border: 1px solid # 000 background-color # ffef5e border-radius 61% top 136px left-13px z-index 1. Arm-outside height 139px width 181px position absolute border: 1px solid # 000 background-color # fff border-radius 75% top 122px left-25px

Skirt construction

Realization: cut the skirt hem round by border-radius, increase the skirt width by width, enlarge the hem by border-width, and set transparent most to achieve the effect of skirt wrinkles: first define a baseline line, and then rotate () according to the baseline, and then move the position slightly to realize the placement of .skirt border-color: # e9003a transparent border-style: solid border-width: 0px 57px 90px; left:-57px Position: absolute top: 251px width: 132px z-index: 5 border-radius: 00 50%. Line width 2px height 44px background-color # 000000 position absolute top 23px left 64px transform-origin 00 & .line 1 transform rotate (20deg) left 11% & .line2 transform rotate (8deg) left 30% & .line3 transform rotate (0deg) & .line4 transform rotate (- 8deg) left 68% & .line5 transform rotate (- 20deg) left 89%

Thigh structure

.leg width 20px height 60px position absolute border 1px solid # 000000 background-color # fadbc7 top 333px z-index 4 & .left-leg left 32px & .right-leg left 80px

Sock construction

Implementation: composed of two parts, foot and sock,sock, the lower border is not displayed. The foot part sets the foot direction through rotate (). Sock width 20px height 28px position absolute background # ffffff border-style solid border-width 1px 1px 0px 1px border-color # 000000 top 370px z-index 4 &. Left-sock left 32px &. Right-sock left 80px. Foot width 48px height 23px position absolute background-color # ffffff border: 1px solid # 000 border-radius: 80% top 383px transform-origin 00 z-index 3 &. Left-foot transform rotate (- 24deg) top 405px left 2px &. Right-foot transform rotate (24deg) left 86px

Shoe construction

Implementation: similar to foot,rotate (). Shoe width 67px height 34px position absolute background-color # a23030 border-radius: 80% top 383px transform-origin 00 z-index 2 &. Left-shoe transform rotate (- 24deg) top 409px left- 14px &. Right-shoe transform rotate (24deg) left 86px, this article "how to make small balls with DIV+CSS under stylus" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to 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.