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

This article mainly introduces how to use CSS3 to make love plus, the article is very detailed, has a certain reference value, interested friends must read it!

The effect looks like this.

1. First, html creates a new file and defines 9 div tags.

2. Start defining the css style to modify and add the background-color attribute to set the background color, set the width to 100% and the height to 100% to set all the outer margin attributes.

Body {width: 100%; height: 100%; margin: 0; background-color: # ccc;}

3. Container title text style, using align-items attribute to center alignment.

.container {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center

4. Header title text style, using the position attribute to specify an element location.

.header {position: relative; width: 138px; / * display: flex; * /

5. Class*='header-' title text style, using the position attribute to locate the element, and the syntax "position: absolute;top:-5pxbordercopyright radius: 5px" to generate absolutely positioned elements.

[class*='header-'] {position: absolute; width: 10px; height: 10px; top:-5px; border-radius: 5px;}

6, header0-8 title text style, the use of animation (animation) attributes bound to every 8 elements, so that elements wobble.

.header-0, .header-8 {animation: header-0 3.2s infinite;} .header-1, .header-7 {animation: header-1 3.2s infinite;} .header-2, .header-6 {animation: header-2 3.2s infinite;} .header-3, .header-5 {animation: header-3 3.2s infinite .header-4 {animation: header-4 3.2s infinite;}

7. Use 4 @ keyframes rules to create 4 animations and gradually change 0% is the beginning of the animation.

@ keyframes header-0 {0%, 10%, 90%, 100% {height: 10px; top:-5px;} 45%, 55% {height: 30px; top:-10px;}} @ keyframes header-1 {0%, 10%, 90%, 100% {height: 10px; top:-5px } 45%, 55% {height: 60px; top:-31px;}} @ keyframes header-2 {0%, 10%, 90%, 100% {height: 10px; top:-5px;} 45%, 55% {height: 80px; top:-37px } @ keyframes header-3 {0%, 10%, 90%, 100% {height: 10px; top:-5px;} 45%, 55% {height: 90px; top:-31px;}} @ keyframes header-4 {0%, 10%, 90%, 100% {height: 10px; top:-5px } 45%, 55% {height: 94px; top:-23px;}

8. Header0-8 title text style add animation-delay attribute wait 1 second and then start the animation. The background attribute sets the color binding to 8 elements.

Header-0 {left: 0; animation-delay: 0s; background: # 92fe9d;}. Header-1 {left: 16px; animation-delay: 0.15s; background: # 00c9ff;} .header-2 {left: 32px; animation-delay: 0.3s; background: # ff758c;}. Header-3 {left: 48px; animation-delay: 0.45s; background: # ff7eb3;}. Header-4 {left: 66px Animation-delay: 0.6s; background: # fa71cd;}. Header-5 {left: 82px; animation-delay: 0.75s; background: # 6f86d6;}. Header-6 {left: 98px; animation-delay: 0.9s; background: # f9f586;}. Header-7 {left: 114px; animation-delay: 1.05s; background: # b1f4cf;}. Header-8 {left: 130px; animation-delay: 1.2s Background: # fef9d7;}

The code effect has come out.

The following complete code

Load html,body {width: 100%; height: 100%; margin: 0; background-color: # ccc;} .container {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;} .header {position: relative; width: 138px / * display: flex; * /} [class*='header-'] {position: absolute; width: 10px; height: 10px; top:-5px; border-radius: 5px;} .header-0, .header-8 {animation: header-0 3.2s infinite } .header-1, .header-7 {animation: header-1 3.2s infinite;} .header-2, .header-6 {animation: header-2 3.2s infinite;} .header-3, .header-5 {animation: header-3 3.2s infinite;} .header-4 {animation: header-4 3.2s infinite } @ keyframes header-0 {0%, 10%, 90%, 100% {height: 10px; top:-5px;} 45%, 55% {height: 30px; top:-10px;}} @ keyframes header-1 {0%, 10%, 90%, 100% {height: 10px; top:-5px } 45%, 55% {height: 60px; top:-31px;}} @ keyframes header-2 {0%, 10%, 90%, 100% {height: 10px; top:-5px;} 45%, 55% {height: 80px; top:-37px } @ keyframes header-3 {0%, 10%, 90%, 100% {height: 10px; top:-5px;} 45%, 55% {height: 90px; top:-31px;}} @ keyframes header-4 {0%, 10%, 90%, 100% {height: 10px; top:-5px } 45%, 55% {height: 94px; top:-23px;}} .header-0 {left: 0; animation-delay: 0s; background: # 92fe9d;} .header-1 {left: 16px; animation-delay: 0.15s; background: # 00c9ff;} .header-2 {left: 32px; animation-delay: 0.3s; background: # ff758c Header-3 {left: 48px; animation-delay: 0.45s; background: # ff7eb3;}. Header-4 {left: 66px; animation-delay: 0.6s; background: # fa71cd;}. Header-5 {left: 82px; animation-delay: 0.75s; background: # 6f86d6;}. Header-6 {left: 98px; animation-delay: 0.9s; background: # f9f586;}. Header-7 {left: 114px Animation-delay: 1.05s; background: # b1f4cf;}. Header-8 {left: 130px; animation-delay: 1.2s; background: # fef9d7 } the above is all the contents of the article "how to make Love Plus with CSS3". Thank you for reading! Hope to share the content to help you, more related knowledge, 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.