This article is the sequel to the author’s previous article using css3 to realize the background animation of amazing interviewers (advanced with source code) . It is also an article introducing css3 skills, because there are not many difficulties in css knowledge, and more is to be familiar with the new features of css3 and Basic theoretical knowledge. So the purpose of writing this article is to summarize some advanced css skills in my work, on the other hand, I hope to teach you some practical skills and efficient ways to develop css to improve your work efficiency.
We will learn
Advanced application of box-shadow
Make an adaptive ellipse
Pure css3 realizes pie chart progress animation
Use border to implement a dialog style
Simple application of css3 filter
css3 pseudo-element realizes custom check box
A powerful tool for making css3 animation online
text
1. Advanced application of box-shadow
Using the new features of css3 can help us achieve various unexpected special effects. In the next few cases, we will use css3 box-shdow to achieve it. Let’s start now!
Realize water wave animation
Knowledge points: box-shadow
Think about how we can realize the animation of water wave diffusion if we don't use css3? It must be written a lot of js to achieve the following effects:
css3 implements the core code
<style>
.wave {
margin-left: auto;
margin-right: auto;
width: 100px;
height: 100px;
border-radius: 100px;
border: 2px solid #fff;
text-align: center;
line-height: 100px;
color: #fff;
background: #06c url(http://p3g4ahmhh.bkt.clouddn.com/me.jpg) no-repeat center center;
background-size: 100%;
animation: wave 4s linear infinite;
}
@keyframes wave {
0% {
box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);
}
50% {
box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);
}
100% {
box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);
}
}
</style>
<div class="wave"></div>
Here we mainly use the box-shadow multi-level shadow to achieve, the animation part we use @keyframes, does it feel okay?
Implement loading animation
Knowledge points: box-shadow multiple shadows
Loading animation is certainly not unfamiliar to everyone. Although loading animation can be implemented in many ways, such as pseudo-elements, gif, and js, I think it’s more elegant to implement it directly on css:
The core code is as follows:
<style>
.loading {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: transparent;
animation: load 3s linear infinite;
}
@keyframes load {
0% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 0);
}
30% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 1),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 0);
}
60% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 1),
40px 0 0 rgba(250, 189, 189, 0);
}
100% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 1);
}
}
</style>
<div class="loading"></div>
We also use box-shadow multi-background to achieve this, which is also a direction I thought at the time. As for other CSS solutions, welcome everyone to communicate with me.
Realize dialog box and irregular projection of dialog box
Knowledge points: filter and pseudo elements
The knowledge of css filter is involved here, but it is also very simple. You can understand it by looking at the css3 official website. Let's see the effect directly:
We will use the drop-shadow of the filter to achieve the shadow of irregular graphics, and then use pseudo elements and borders to achieve the head triangle:
<style>
.odd-shadow{
margin-left: auto;
margin-right: auto;
width: 200px;
height: 80px;
border-radius: 8px;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 80px;
background: #06c;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.8))
}
.odd-shadow::before{
content: '';
position: absolute;
display: block;
margin-left: -20px;
transform: translateY(20px);
width:0;
height: 0;
border: 10px solid transparent;
border-right-color: #06c;
}
</style>
<div class="odd-shadow">哎呦，猪先森</div>
Blur effect
Knowledge points: filter
This is relatively simple, here I directly above the picture and code:
filter: blur(20px);
2. Make an adaptive ellipse
The emergence of border-radius has provided us with great convenience in achieving rounded corners. We can also achieve various graphic effects through further research on the characteristics of Border-radius. Let's take a look at its power!
Knowledge point: border-radius: a / b; //a, b are the horizontal and vertical radius of the rounded corners respectively, if the unit is %, it means that the analysis is relative to the width and height
Core code:
<style>
.br-1{
width: 200px;
height: 100px;
border-radius: 50% /10%;
background: linear-gradient(45deg,#06f,#f6c,#06c);
}
.br-2{
width: 100px;
border-radius: 20% 50%;
}
.ani{
animation: skew 4s infinite;
}
.ani1{
animation: skew1 4s infinite 2s;
}
.ani2{
animation: skew2 4s infinite 3s;
}
@keyframes skew{
to{
border-radius: 50%;
}
}
@keyframes skew1{
to{
border-radius: 20px 20px 100%;
}
}
@keyframes skew2{
to{
transform: rotate(360deg);
}
}
</style>
<div class="br-1 black-theme"></div>
<div class="br-1 black-theme ani"></div>
<div class="br-1 black-theme ani1"></div>
<div class="br-1 br-2 black-theme ani2"></div>
Here we mainly use background gradients to achieve flashy backgrounds, and border-radius to achieve various specifications of elliptical patterns.
3. Pure css3 realizes pie chart progress animation
Knowledge points: border-radius: abcd / efgh; animation multiple animation properties;
The effect is as follows:
Core code:
<style>
.br-31{
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(to right,#f6c 50%,#333 0);
}
.br-31::before{
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: #f6c;
transform-origin: left;
animation: skin 4s linear infinite,
bg 8s step-end infinite;
}
@keyframes skin{
to{
transform: rotate(.5turn);
}
}
@keyframes bg{
50%{
background: #333;
}
}
.br-32::before{
animation-play-state: paused;
animation-delay: inherit;
}
</style>
<div class="br-31 black-theme"></div>
<div class="br-31 br-32 black-theme" style="animation-delay:-1s"></div>
For the realization of this piece, we mainly use a gradient background, which is also the key to achieving fan-shaped progress, including how to block the semicircle in the code, how to animate the semicircle, how to change the position of the rotation origin, etc. Although these are very technical, we are a little bit It is also possible to draw a picture.
4.css3 pseudo-elements implement custom checkboxes
We all know that the native checkbox control style is extremely difficult to customize, which increases the difficulty for engineers to implement the design draft. With the advent of css3, the :checked selector has been added, so we can use :checked and label to implement a variety of form selection controls, let's take a look at how to implement it!
Let's take a look at how to implement the above custom check box:
<style>
.check-wrap{
text-align: center;
}
.checkbox{
position: absolute;
clip: rect(0,0,0,0);
}
.checkbox[type="checkbox"]:focus + label::before{
box-shadow: 0 0 .6em #06c;
}
.checkbox[type="checkbox"] + label::before{
content: '\a0'; /* 不换行空格 */
display: inline-block;
margin-right: .3em;
width: 2em;
height: 2em;
border-radius: .3em;
vertical-align: middle;
line-height: 2em; /* 关键 */
font-size: 20px;
text-align: center;
color: #fff;
background: gray;
}
.checkbox[type="checkbox"]:checked + label::before{
content: '\2713'; /* 对勾 */
background: black;
}
label{
margin-right: 40px;
font-size: 20px;
}
</style>
<div class="check-wrap">
<input type="checkbox" class="checkbox" id="check-1" />
<label for="check-1">生男孩</label>
<input type="checkbox" class="checkbox" id="check-2" />
<label for="check-2">生女孩</label>
</div>
In order to hide the native checkbox control, we use clip: rect(0,0,0,0) to intercept, and then use the pseudo-class of checkbox: checked to achieve interaction.
Next, let's expand, let's implement a custom switch:
The principle here is the same, except that the style has been changed, and the code directly:
<style>
.check-wrap{
margin-bottom: 20px;
text-align: center;
}
.switch{
position: absolute;
clip: rect(0,0,0,0);
}
.switch[type="checkbox"] + label{
width: 6em;
height: 3em;
padding: .3em;
border-radius: .3em;
border: 1px solid rgba(0,0,0,.2);
vertical-align: middle;
line-height: 2em; /* 关键 */
font-size: 20px;
text-align: center;
color: #fff;
box-shadow: 0 1px white inset;
background-color: #ccc;
background-image: linear-gradient(#ddd,#bbb);
}
.switch[type="checkbox"]:checked + label{
box-shadow: 0.05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}
label{
margin-right: 40px;
font-size: 14px;
}
.switch-an{
position: absolute;
clip: rect(0,0,0,0);
}
.switch-an[type="checkbox"] + label{
position: relative;
display: inline-block;
width: 5em;
height: 2em;
border-radius: 1em;
color: #fff;
background: #06c;
text-align: left;
}
.switch-an[type="checkbox"] + label::before{
content: '';
width:2em;
height: 2em;
position: absolute;
left: 0;
border-radius: 100%;
vertical-align: middle;
background-color: #fff;
transition: left .3s;
}
.switch-an[type="checkbox"] + label::after{
content: 'OFF';
margin-left: 2.6em;
}
.switch-an[type="checkbox"]:checked + label::before{
transition: left .3s;
left: 3em;
}
.switch-an[type="checkbox"]:checked + label::after{
content: 'NO';
margin-left: .6em;
}
</style>
<div class="check-wrap">
<input type="checkbox" class="switch" id="switch-1" />
<label for="switch-1">生男孩</label>
<input type="checkbox" class="switch" id="switch-2" />
<label for="switch-2">生女孩</label>
</div>
<div class="check-wrap">
<input type="checkbox" class="switch-an" id="switch-an-1" />
<label for="switch-an-1"></label>
</div>
Do you feel that css3 provides more powerful animation and custom functions? In fact, we can achieve cooler and more practical effects, waiting for you to try.
5. A powerful tool for making css3 animation online
Finally, I recommend a tool for making various Bezier curves online, which I often use when doing animation: cubic-bezier.