From bronze to king 10 CSS3 pseudo-class using skills and use, understand a ha

Writing in the front

Pseudo-classes are often confused with pseudo-elements, which have effects similar to those achieved by adding an actual element, and pseudo-classes, which have effects similar to those achieved by adding an actual class. In fact, CSS3 explicitly specifies that pseudo-classes are represented by a colon, and pseudo-elements by two colons, in order to distinguish the two. The essential difference between a pseudo-class and a pseudo-element is whether an abstraction creates a new element. This paper will not go into the specific knowledge of pseudo classes and pseudo elements. Here we will introduce the skills and application of 10 CSS3 pseudo classes from Bronze to King. Go straight to the case code

Bronze-1, pseudo-classes implement box shadows

After Animate/ Transition box-shadow you can Animate/transition box-shadow with box-shadow properties, but repaint requires a lot of work

Implementation principle:

By changing the transparency, so from a non-default value updates its value, there is no need to take any redraw (see: https://csstriggers.com/opacity)

(PS: Seemingly inexplicably unlocked an optimization about front-end CSS, smirk)

Here, an empty pseudo-element is set to zero shadow opacity to hide, and its opacity is restored by hovering over it. Here is a code comparison between the traditional and pseudo-class implementations

<div class="before"</p> </div> <hr /> <div class= after </h1> <p>Animate/transition box-shadow You can use the box-shadow attribute to implement box shadows"after"> <h1>After</h1> <p> Achieve the same effect by modifying the transparency of pseudo-elements without redrawing the cost </p> </div>Copy the code

.before {
    padding: 1em;
    background-color: #fff;- its - the transition: 0.2 s; The transition: 0.2 s; }. Before :hover {box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); } .after { position: relative; padding: 1em; background-color:#fff;
}
.after:before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; Box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); opacity: 0; will-change: opacity; - its - the transition: 0.2 s; The transition: 0.2 s; } .after:hover:before { opacity: 1; }Copy the code

Effect :(see link below for full code)

Bronze-2, Pseudo-element: Before implemented breadcrumb navigation bar

<ul class="breadcrumb">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Pictures</a>
    </li>
    <li><a href="#">Summer 15</a>
    </li>
    <li>Italy</li>
</ul>
Copy the code

ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li {
    display: inline;
}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li a {
    color: green;
}
Copy the code

Effect:

Bronze-3, pseudo-element to hover button filling and border floating animation

Effect :(see link below for full code)

Bronze-4, pseudo-class after implementation of the triangular arrow

Implementation principle: The border in the direction the arrow points to is not set. The border on either side of the arrow is transparent. The opposite side is the main border color (larger)/main background color (smaller), because we want the triangle arrow with the border color. After the first arrow (larger) is accurately covered by the second arrow (smaller), the remaining uncovered edge is the border of the composite triangle arrow, whose color is the color of the larger triangle arrow, adjustable. The color of the smaller triangle arrow should be set to the body color, and the negative offset should be covered by the body border, so that it is integrated with the body

<div class='container'>
    <img alt=' ' src='http://placehold.it/400x200'>
    <div class='arrow-left'></div>
</div>
<div class='container new'>
    <div class='arrow-right'></div>
    <img alt=' ' src='http://placehold.it/400x200'>
</div>
Copy the code

.arrow-left:before {
    z-index: 9999;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #E9E9E9;
    position: absolute;
    left: -20px;
    top: 80px;
}

Copy the code

Effect :(see link below for full code)

Bronze-5, pseudo-class after implemented picture arrow

Effect :(see link below for full code)