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

This article mainly introduces CSS to achieve loading loading special effects of what are the tips, have a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

Loader-1

This should be the easiest CSS load ever. There is a red arc on the circle. If you look closely, you will find that the arc is exactly 1pm 4.

Implementation logic:

A container with equal width and height, set border to white. Then set the bottom bottom to red.

When border-radius is set to 50%, it can just become a circle.

Animate the circle with rotation. The animation of rotation angle in CSS is rotate (). All we have to do is set it to rotate from 0 to 360. (this animation will be used many times below, which will not be discussed in detail below)

@-webkit-keyframes rotation {0% {transform: rotate (0deg);} 100% {transform: rotate (360deg);}}

Complete code

.loader-1 {width: 48px; height: 48px; border: 5px solid # FFF; border-bottom-color: # FF3D00; border-radius: 50%; display: inline-block;-webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite;} loader-2

Observation: there is a circle on the outside and a red element turning inside.

Realization logic

A container with equal width and height, with white edges and 50% fillet. This is the outer circle.

How to achieve the red inside? Here are two ideas. 1. Add a small div, let him in it, and set a red bottom edge like loader-1. 2: use:: after, the train of thought is consistent with method 1.

Plus the animation of rotation.

Complete code

.loader-2 {width: 48px; height: 48px; border: 3px solid # FFF; border-radius: 50%; display: inline-block; position: relative;-webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite;}. Loader-2:after {content: "; position: absolute; left: 50%; top: 50%; transform: translate (- 50%,-50%); width: 40px Height: 40px; border-radius: 50%; border: 3px solid transparent; border-bottom-color: # FF3D00;} loader-3

Observation: there is a circle on the inside and a red arc on the outside.

Realization logic

This loading effect is consistent with that of loader-2, except that the red arc is inside and outside.

Complete code

.loader-3 {width: 48px; height: 48px; border: 3px solid # FFF; border-radius: 50%; display: inline-block; position: relative;-webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite;}. Loader-3:after {content: "; position: absolute; left: 50%; top: 50%; transform: translate (- 50%,-50%); width: 56px Height: 56px; border-radius: 50%; border: 3px solid transparent; border-bottom-color: # FF3D00;} loader-4

Observation: there is a circle on the outside and two circles on the inside, which happen to be symmetrical.

Realization logic

A container with equal width and height, with white edges and 50% fillet. This is the outer circle.

How to achieve the red inside? Here are two ideas. 1. Add two small div, set the background color to red, and then set 50% rounded corners to look like two small dots. 2: use:: after and:: before, the idea is the same as method 1.

Plus the animation of rotation.

Complete code

.loader-4 {width: 48px; height: 48px; border: 2px solid # FFF; border-radius: 50%; display: inline-block; position: relative;-webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite;}. Loader-4:before {left: auto; top: auto; right: 0; bottom: 0; content: "; position: absolute; background: # FF3D00; width: 6px Height: 6px; transform: translate (- 150%,-150%); border-radius: 50%;}. Loader-4:after {content: "; position: absolute; left: 0; top: 0; background: # FF3D00; width: 6px; height: 6px; transform: translate (150%, 150%); border-radius: 50%;} loader-5

Observation: there are three layers, the outermost white circle, the middle red circle, and the inner white circle. Each circle has a half-arc gap, and the outer ring rotates in the same direction as the innermost ring.

Realization logic

A container with equal width and height, with white edges and 50% fillet. This is the outer circle.

The problem here is that how to implement the circle gap is actually very simple. There is a property value in css: transparent, which can be used to set transparency to the border to achieve the gap.

For the inner red and white arcs, continue to use:: after and:: before.

Plus animation, there is an animation that rotates in the opposite direction (rotationBack). Here, the rotation is set to a negative angle, and the rotation can be rotated in the opposite direction.

@ keyframes rotationBack {0% {transform: rotate (0deg);} 100% {transform: rotate (- 360deg);}}

Complete code

.loader-5 {width: 48px; height: 48px; border-radius: 50%; display: inline-block; position: relative; border: 3px solid; border-color: # FFF # FFF transparent transparent;-webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite;}. Loader-5:before {width: 32px; height: 32px; border-color: # FFF # FFF transparent transparent;-webkit-animation: rotation 1.5s linear infinite Animation: rotation 1.5s linear infinite;}. Loader-5:after, .loader-5:before {content: "; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 3px solid; border-color: transparent transparent # FF3D00 # FF3D00; width: 40px; height: 40px; border-radius: 50%;-webkit-animation: rotationBack 0.5s linear infinite Animation: rotationBack 0.5s linear infinite; transform-origin: center center; *} loader-6

Observation: it looks like a clock with a pointer in a circle.

Realization logic

A container with equal width and height, with white edges and 50% fillet. This is the outer circle.

How pointers are implemented: the addition of div is no longer discussed here. In fact, the red pointer is a simple container with inconsistent width and height.

Complete code

.loader-6 {width: 48px; height: 48px; border: 2px solid # FFF; border-radius: 50%; display: inline-block; position: relative;-webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite;}. Loader-6:after {content: "; position: absolute; left: 50%; top: 0; background: # FF3D00; width: 3px; height: 24px Transform: translateX (- 50%);} loader-7

Observation: first determine a few circles, a total of two. When the first circle has not disappeared, the second circle has already appeared. Finally, the effect is similar to that of water waves. At the same time, it should be noted that the two circles are the same size, because they eventually disappear in the same place.

Realization logic

First of all, determine whether the two circles are on the container. The above always adds borders to the container, of course, this example is fine, but for simplicity, let's put these two circles in:: after and:: before.

Plus animation, the circle here is gradually enlarged, and in CSS, scale is used to zoom in and out elements. At the same time, in order to achieve the effect of gradually clear ripples, we add transparency.

@ keyframes animloader7 {0% {transform: scale (0); opacity: 1;} 100% {transform: scale (1); opacity: 0;}}

Complete code

Here, because two circles appear one after another, you need a circle plus delay.

.loader-7 {width: 48px; height: 48px; display: inline-block; position: relative;}. Loader-7::after, .loader-- 7::before {content: "; width: 48px; height: 48px; border-radius: 50%; border: 2px solid # FFF; position: absolute; left: 0; top: 0;-webkit-animation: animloader7 2s linear infinite; animation: animloader7 2s linear infinite }. Loader-7::after {- webkit-animation-delay: 1s; animation-delay: 1s;}. Loader-7::after, .loader-7::before {content: "; width: 48px; height: 48px; border-radius: 50%; border: 2px solid # FFF; position: absolute; left: 0; top: 0;-webkit-animation: animloader7 2s linear infinite; animation: animloader7 2s linear infinite;} loader-8

Observation: an arc plus a triangle.

Realization logic

A container with equal width and height, with white edges and 50% fillet. This is the outer circle.

Transparent, using this value to set transparency to the border, you can achieve the gap.

Create an arrow on: after. There are many ways to implement triangles in CSS, the simplest of which is to use border. You don't need to set the width and height of the element, you just need to set the size of the border, and only one side sets the color.

Border: 10px solid transparent;border-right-color: # FFF

Plus rotation animation.

Complete code

.loader-8 {width: 48px; height: 48px; border: 3px solid # FFF; border-bottom-color: transparent; border-radius: 50%; display: inline-block; position: relative;-webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite;}. Loader-8:after {content: "; position: absolute; left: 20px; top: 31px; border: 10px solid transparent Border-right-color: # FFF; transform: rotate (- 40deg);} Thank you for reading this article carefully. I hope the article "what are the tips for CSS to achieve loading loading special effects" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.