Table of contents
1. CSS3 filter filter:
The filter CSS property and that graphical effects such as blurring or color shifting are applied to the element.
filter: function(); For example: filter: blur(5px); blur The larger the value, the more blurred
2. CSS3 calc function
calc() This CSS function lets you perform some calculations when declaring CSS property values.
width:calc(100% - 80px);
You can use + - * / in parentheses to calculate.
3. CSS3 excessive (emphasis)
Transition is one of the disruptive features in CSS3, we can add effects to elements when they change from one style to another without using Flash animation or JavaScript.
Over-animation: It is a gradual transition from one state to another.
It can make our pages look better and more dynamic. Although low-version browsers do not support them (below ie9), they will not affect the page layout.
We now often use it with :hover.
transition: when the attribute to be transitioned takes time to start the motion curve;
- Attributes: The CSS attributes you want to transform, width and height, background color, inner and outer margins are all available, if you want all attributes to change excessively, just write all
- Time spent: the unit is seconds (the unit must be written) such as 0.5s
- Motion curve: the default is ease (can be omitted)
- When to start: the unit is seconds (the unit must be written) and the delay trigger time can be set, the default is 0s (can be omitted)
Excessive use of formulas: whoever does the excessive
4. Progress bar case
1. How to layout the progress bar
2. Excessive use
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3过度练习-进度条</title>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7.5px;
}
.bar-1 {
width: 50%;
height: 100%;
background-color: red;
padding: 1px;
transition: all .7s;
}
.bar:hover .bar-1 {
width: 100%;
;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar-1"></div>
</div>
</body>
</html>5. Chivalrous HTML5 CSS3
HTML5 structural tags themselves
1. HTML5 in a broad sense is HTML5 itself + CSS3 + JavaScript
2. This collection is sometimes called HTML5 and friends, often shortened to HTML5
3. Although some features of HTML5 are still not supported by some browsers, it is a development trend.