创建动画CSS艺术

CSS art
+$(Image credit: Tiffany Choong)

+$Creating CSS images is a fun way to practise your skills and create a neat piece of artwork. It's a nice break from the usual day-to-day styling of web components. All you'll need to get started is a blank document and a CSS file; we recommend using Sass, which will enable you to reuse your styles and write simpler selectors (see our guide to什么是萨斯?+$to learn more about this preprocessor).

+$We'll start with some top tips for mastering CSS art, then show you how to recreate this animated balloon Pikachu using only CSS.

+$For more inspiration, explore our roundup of amazingCSS动画示例+$. After something more basic? Start by learning+$how to create an ice lolly using CSS

+$Reduce the design to simple shapes

+$When creating CSS art, it can help to look at a few reference images for inspiration and then create a simplified cartoon variation as you go along, envisioning the subject using primitive shapes, which make better+$CSS Shapes

+$Use a bright background to help with positioning

+$When overlapping shapes of similar colours, it’s difficult to see where they’re being placed or what they look like. It’s useful to have the shape you’re working on stand out by changing the背景颜色+$to something bright and cheery, like magenta. This enables you to easily see the exact position and shape of your element.

+$Use Fluid Sizes

+$When it comes to defining a px value for properties, we would recommend using the rem unit. In the event you decide that you want your overall piece to be larger or smaller, by using rem units you only have to change the base+$html { Font-size: …px }+$in your Sass to scale the whole artwork up or down.

+$When defining the heights and widths of child elements that should have relative sizing to the parent, percentages come in handy. Since these values are always relative to their parent, they should also scale with the+$html Font-size

Generate CSS

+$Generate CSS is a bespoke conference brought to you by Creative Bloq, net and Web Designer. Click to book your Early Bird ticket!

+$(Image credit: Getty / Future)

+$01. Start With Containers

+$A wrapper container to hold the artwork's pieces is a good place to start. Within the container, we can place three inner containers – the head, the body and the balloons.

+$

+$The container should usually be位置:相对+$to allow for other elements to be placed relatively inside it using位置:绝对+$and have a well-defined height and width, otherwise positioning child elements becomes difficult.

+$In your styles, add your base colours as Sass variables for reusability. The Sass减轻()+$darken()+$functions will create tints and shades of your colours, which can be used as highlights or shadows for your character.

+$02. Style The Head

+$With the structure figured out, let's style the head first. In this case, the head makes a nice centre point for the artwork, so rather than setting its position to absolute, it can be set to relative. This enables the container to have a stable element inside of it, giving the other floating absolute elements an anchor point and thus more control over their position.

+$The facial features will need a container for positioning, so create a

+$inside the head container for the yellow shape with a width, height and background colour – now let's make this rectangle look more like a head shape. One of the most common and useful properties in CSS art is the边界半径+$property, which changes the curve of the X or Y of a box's corners and can be used to create more organic shapes.

+$Using this technique with a rem and percentage combo, you can make blob-like shapes rather than just plain ellipses, which scale naturally with theHTML +${ Font-size: …px }

+$.face { border-top-left-radius: 50% 4.5rem; border-top-right-radius: 50% 4.5rem; border-bottom-left-radius: 50% 3rem; border-bottom-right-radius: 50% 3rem; ... }

+$After perfecting the head's边界半径+$, position the rest of the facial features as child elements of the head, such as the eyes, cheeks, nose and ears. Like the head, the边界半径+$trick will come in handy since+$border-radius: 50%+$may not look appealing.

+$03. Move on to the body

+$A Body

+$can be placed within the body container behind the head and shaped with the same边界半径+$technique, as well as the arms, legs and tail. To allow for proper overlapping, the actual body should be its own element, as certain inner elements like the back stripes will need to be cut off with溢出:隐藏+$. To give the body more depth, the+$transform: Skew()+$property can sheer the body slightly.

+$The lightning bolt tail can be built using three separate rectangles rather than trying to form this shape from one element. The rectangles can be rotated and positioned over the top of one another to form a bolt. The arms and legs can use the darker primary colour we created using Sass+$darken()+$so they stand out.

+$04. Add Balloons

+$Now that the electric mouse is completed, let's tie balloons to its back. Add some

+$s with shared styles with a child string
+$and position them bunched above the head. The string is invisible except a左边框+$, which help make it look more string-like.

+$To tie the string around the character's waist, a

+$can be placed within the body to allow for proper positioning. The string needs a slight curve to appear as though it's tied around the body, so it can have a small height,+$border-bottom和a+$border-bottom+$left and right radius, which makes a thin curved line:

+$.string { height: 1rem; width: 9rem; border-right: solid 1px $white; border-left: solid 1px $white; border-bottom: solid 1px $white; border-bottom-left-radius: 50% 1rem; border-bottom-right-radius: 50% 1rem; }

+$05. Animate The CSS

+$We can give the character life by adding@keyframes+$animations. The arms, legs, ears and tail can be animated with+$transform: Rotate()+$. Ensure The变换原点+$is set to the ‘joint' (i.e. top center for a leg) and adjust the rotation. This animation type can be used several times in a Sass mixin:

+$@mixin animateRotate($name, $start, $end) { @keyframes #{$name} { 0%, 100% { transform: rotate(#{$start}deg) } 50% { transform: rotate(#{$end}deg) } } }

+$Finally, adding a slow 5s+$transform: TranslateY()+$keyframe animation will animate the character up and down as though it's floating. For a touch of realism, a blinking animation using+$transform: ScaleY(0.1)+$property can be used to make it appear as though the eyes are closing.

本文最初发表于创意网页设计杂志+$Buy Issue 283要么订阅

阅读更多:



翻译字数超限