Pseudo classes implement box shadows
After Animate/transition box-shadow, you can Animate/transition box-shadow using the box-shadow property. After Animate/transition box-shadow, you can Animate/transition box-shadow using the box-shadow property. By changing transparency so that it updates its value from a non-default value, no redrawing is required (see: csstriggers.com/opacity) (ps…
<div class="before">
<h1>Before</h1>
<p>Box-shadow effects can be implemented using the box-shadow property, but repainting is expensive</p>
</div>
<hr />
<div class="after">
<h1>After</h1>
<p>The same effect is achieved by modifying the transparency of the pseudo-elements without redrawing costs</p>
</div>
Copy the code.before {
padding: 1em;
background-color: #fff;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.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;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.after:hover:before {
opacity: 1;
}
Copy the code
The pseudo-element performs hover button filling and border floating animation
<div class="box one">
<div class="item">Buy</div>
</div>
<div class="box two">
<div class="item">Buy</div>
</div>
Copy the code.box { position: relative; width: 120px; height: 50px; display: flex; justify-content: center; align-items: center; margin: 15px; color: #F27059; } .item { text-transform: uppercase; letter-spacing: 2px; font-size: 14px; z-index: 99; display: flex; justify-content: center; align-items: center; The transition: 0.4 s all ease; } .one:before, .one:after { position: absolute; content: ''; width: 100%; height: 2px; background: #F27059; The transition: 0.4 s all ease; } .one:before { top: 0; } .one:after { bottom: 0; } .one .item:before, .one .item:after { position: absolute; top: 0; content: ''; height: 100%; width: 2px; background: #F27059; The transition: 0.4 s all ease; z-index: -1; } .one .item:before { left: 0; } .one .item:after { right: 0; }. One :hover:before,. One :hover:after {transition: 0.4s all ease; } .one:hover:before { transform: translateY(-10px); } .one:hover:after { transform: translateY(10px); } .one:hover .item { color: white; } .one:hover .item:before, .one:hover .item:after { width: 100%; The transition: 0.4 s all ease; } .two { box-sizing: border-box; border: 2px solid #F27059; position: relative; } .two:before { position: absolute; content: ''; width: 0; height: 50px; The transition: 0.4 s all ease; background: #F27059; left: 0; z-index: -1; } .two:hover { color: white; } .two:hover:before { width: 100%; The transition: 0.4 s all ease; }
The triangle arrow implemented by the pseudo-class after
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.container {
margin: 40px auto;
width: 600px;
border: 1px solid #eee;
padding: 10px;
}
.container:after {
clear: both;
content: "";
display: table;
}
.container img {
float: left;
}
.arrow-left {
position: relative;
width: 200px;
height: 200px;
background: #E9E9E9;
float: right;
}
.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;
}
.arrow-right {
position: relative;
width: 200px;
height: 200px;
background: #fff;
float: left;
}
.arrow-right img {
float: right;
}
.arrow-right:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
position: absolute;
right: -20px;
top: 80px;
}
Copy the codeThe picture arrow of the pseudo-class after implementation
<div class="healthy-snacks">
<div class="featured-image">
<img src="img/landing.jpg" alt="Healthy Snacks" />
<div class="arrow"></div>
</div>
<article>
<header>
<h3><span>Healthy</span> <span>Snacks</span></h3>
</header>
<div class="excerpt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere perferendis perspiciatis temporibus debitis distinctio blanditiis ea. Animi, placeat sint magni.</p>
<a href="#"><span class="fa fa-arrow-circle-right"></span><span>Show me somerecipes</span></a>
</div>
</article>
</div>
Copy the codebody { background: #E1E1E1; background-size: cover; background-position: 50% 50%; } .healthy-snacks { margin: 2em auto; width: 90%; max-width: 680px; background: #fff; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .healthy-snacks .featured-image { position: relative; overflow: hidden; } .healthy-snacks .featured-image img { display: block; width: 100%; height: auto; vertical-align: bottom; border-top-left-radius: 3px; border-top-right-radius: 3px; } .healthy-snacks .featured-image .arrow { position: absolute; bottom: 0; width: 100%; height: 0px; background-color: #fff; } .healthy-snacks .featured-image .arrow:before, .healthy-snacks .featured-image .arrow:after { content: ''; position: absolute; bottom: 100%; width: 80%; height: 20px; background-color: inherit; } .healthy-snacks .featured-image .arrow:before { right: 80%; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: skewX(45deg); -moz-transform: skewX(45deg); -ms-transform: skewX(45deg); -o-transform: skewX(45deg); transform: skewX(45deg); } .healthy-snacks .featured-image .arrow:after { left: 20%; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: skewX(-45deg); -moz-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -o-transform: skewX(-45deg); transform: skewX(-45deg); } .healthy-snacks article { padding: 1em 1em 2em; } .healthy-snacks article:after { content: ""; display: table; clear: both; } .healthy-snacks article header { border-bottom: 2px solid #9bb068; }. Healthy snacks article header h3 {margin: 0 0 0.25em; font-family: 'McLaren', cursive; The font - size: 1.5 em. color: #767d2e; text-align: center; text-transform: uppercase; } .healthy-snacks article .excerpt { font-family: 'Open Sans', sans-serif; } .healthy-snacks article .excerpt p { line-height: 24px; } .healthy-snacks article .excerpt a { display: block; margin-top: 1em; color: #c00413; text-decoration: none; } .healthy-snacks article .excerpt a:hover { color: #fb2f40; } .healthy-snacks article .excerpt a span:first-child { padding-right: 1em; vertical-align: middle; } @media only screen and (min-width: 680px) { .healthy-snacks article header { width: 40%; float: left; border-bottom: none; border-right: 2px solid #9bb068; } .healthy-snacks article header h3 { margin: 1em 0; font-size: 2em; } .healthy-snacks article header h3 span { display: block; } .healthy-snacks article .excerpt { width: 60%; float: left; padding-left: 2em; }}
Pseudo-elements implement angled bottom boundaries (tilted boundaries)
<div class="block -berry edge--bottom">
<h1>Bottom Angled Edge</h1>
</div>
<div class="block -blue edge--bottom--reverse">
<h1>Bottom Angled Edge</h1>
<p>Reversed</p>
</div>
<div class="block -berry edge--top">
<h1>Top Angled Edge</h1>
</div>
<div class="block -blue edge--top--reverse">
<h1>Top Angled Edge</h1>
<p>Reversed</p>
</div>
<div class="block -orange edge--both">
<h1>Top & Bottom Angled Edges</h1>
</div>
<div class="block -green edge--both--reverse">
<h1>Top & Bottom Angled Edges</h1>
<p>Reversed</p>
</div>
Copy the code.edge--bottom { position: relative; z-index: 1; } .edge--bottom:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; } .edge--bottom:after { bottom: 0; - its - transform: skewY (1.5 deg); - ms - transform: skewY (1.5 deg); The transform: skewY (1.5 deg); -webkit-transform-origin: 100%; -ms-transform-origin: 100%; transform-origin: 100%; } .edge--bottom--reverse { position: relative; z-index: 1; } .edge--bottom--reverse:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; } .edge--bottom--reverse:after { bottom: 0; - its - transform: skewY (1.5 deg); - ms - transform: skewY (1.5 deg); The transform: skewY (1.5 deg); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } .edge--top { position: relative; z-index: 1; } .edge--top:before { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; } .edge--top:before { top: 0; - its - transform: skewY (1.5 deg); - ms - transform: skewY (1.5 deg); The transform: skewY (1.5 deg); -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .edge--top--reverse { position: relative; z-index: 1; } .edge--top--reverse:before { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; } .edge--top--reverse:before { top: 0; - its - transform: skewY (1.5 deg); - ms - transform: skewY (1.5 deg); The transform: skewY (1.5 deg); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .edge--both { position: relative; z-index: 1; } .edge--both:before, .edge--both:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; } .edge--both:before { top: 0; - its - transform: skewY (1.5 deg); - ms - transform: skewY (1.5 deg); The transform: skewY (1.5 deg); -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .edge--both:after { bottom: 0; - its - transform: skewY (1.5 deg); - ms - transform: skewY (1.5 deg); The transform: skewY (1.5 deg); -webkit-transform-origin: 100%; -ms-transform-origin: 100%; transform-origin: 100%; } .edge--both--reverse { position: relative; z-index: 1; } .edge--both--reverse:before, .edge--both--reverse:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; } .edge--both--reverse:before { top: 0; - its - transform: skewY (1.5 deg); - ms - transform: skewY (1.5 deg); The transform: skewY (1.5 deg); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .edge--both--reverse:after { bottom: 0; - its - transform: skewY (1.5 deg); - ms - transform: skewY (1.5 deg); The transform: skewY (1.5 deg); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .-berry { background: #b52b4a; } .-blue { background: #41ade5; } .-orange { background: #de6628; } .-green { background: #5e9b42; } .block { color: #fff; font-family: 'Fira Sans', sans-serif; margin: 0 0 200px; padding: 20% 20px; text-align: center; } h1 { font-size: 32px; font-weight: 500; } p { font-size: 14px; font-weight: 300; Margin - top: 0.5 em. }
A prompt box for implementing fake elements and translate transformations
<div class="row"> <a rel="nofollow" rel="noreferrer" href="#" class="btn tooltip top"> <span>TOOLTIP TOP</span> <span class="tooltip-content">Lorem ipsum dolor sit amet</span> </a> </div> <div class="row"> <a rel="nofollow" rel="noreferrer" href="#" class="btn tooltip bottom"> <span>TOOLTIP BOTTOM</span> <span class="tooltip-content">Lorem ipsum dolor sit amet</span> </a> </div> <div class="row"> <a rel="nofollow" rel="noreferrer" href="#" class="btn tooltip right"> <span>TOOLTIP RIGHT</span> <span class="tooltip-content">Lorem ipsum dolor sit amet</span> </a> </div> <div class="row"> <a rel="nofollow" rel="noreferrer" href="#" class="btn tooltip left"> <span>TOOLTIP LEFT</span> <span class="tooltip-content">Lorem ipsum dolor sit amet</span> </a> </div> </div>Copy the code-webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100vh; font-family: 'Fira Sans', sans-serif; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 2rem 0; width: 100vw; } .row { display: -webkit-box; display: -ms-flexbox; display: flex; margin: auto; } a { text-decoration: none; } .btn { margin: 0 .5em; } /* COLORS */ /* BUTTONS */ .btn { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: white; border: 1px solid #cdd2d6; box-sizing: border-box; color: #000000; display: -webkit-box; display: -ms-flexbox; display: flex; height: 45px; letter-spacing: 2px; padding: .8em 1em; -webkit-transition: all .3s ease; transition: all .3s ease; } .btn:hover { background-color: #05a8ff; border-color: #05a8ff; color: #ffffff; } /* TOOLTIP */ .tooltip { position: relative; overflow: hidden; } .tooltip:hover { overflow: visible; } .tooltip:hover .tooltip-content { opacity: 1; } .tooltip .tooltip-content { background: #05a8ff; Box-shadow: 0 5px 25px 5px Rgba (205, 210, 214, 0.8); box-sizing: border-box; color: #ffffff; font-size: 12px; The line - height: 1.2; letter-spacing: 1px; max-width: 200px; min-width: 145px; padding: 1em; position: absolute; opacity: 0; -webkit-transition: all .3s ease; transition: all .3s ease; } .tooltip .tooltip-content::after { background: #05a8ff; content: ""; height: 10px; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 10px; }.tooltip.top. tooltip-content {bottom: calc(100% + 1.5em); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .tooltip.top .tooltip-content::after { bottom: -5px; left: 50%; margin-left: -5px; }.tooltip.bottom.tooltip-content {bottom: calc(-100%-1.8em); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .tooltip.bottom .tooltip-content::after { top: -5px; }.tooltip.right.tooltip-content {left: calc(100% + 1.5em); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tooltip.right .tooltip-content::after { left: -5px; margin-top: -5px; top: 50%; }.tooltip.left. Tooltip-content {right: calc(100% + 1.5em); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tooltip.left .tooltip-content::after { right: -5px; margin-top: -5px; top: 50%; }Copy the code
Automatic typing animation using CSS3 pseudo-element
Typing Animation with pseudo-elements looks like Typing, but it’s actually a visual effect of overlaying pseudo-elements on a string and then gradually reducing the pseudo-element overlay width
<h1>Typing Animation</h1>
<p class="tagline">
<span class="tagline-skill"><span class="tagline-skill_inner">webdesign</span></span>
</p>
</div>
Copy the code content: "";
position: absolute;
top: -1px;
right: 0;
bottom: -2px;
left: 0;
border-left: 1px solid #fff;
background-color: #2a2a28;
-webkit-animation: animatetoright 1s steps(10) infinite alternate;
animation: animatetoright 1s steps(10) infinite alternate;
}
Copy the code
CSS3 pseudo-element constructs the article watermark background
<div class="pre-headline">23 October 1983</div>
<h1>Welcome The Internet, The Nice Version</h1>
<p>Was Phileas Fogg rich? Undoubtedly. But those who knew him best could not imagine how he had made his fortune, and Mr. Fogg was the last person to whom to apply for the information. He was not lavish, nor, on the contrary, avaricious; for, whenever
he knew that money was needed for a noble, useful, or benevolent purpose, he supplied it quietly and sometimes anonymously. He was, in short, the least communicative of men. He talked very little, and seemed all the more mysterious for his taciturn
manner. His daily habits were quite open to observation; but whatever he did was so exactly the same thing that he had always done before, that the wits of the curious were fairly puzzled.</p>
<p>Had he travelled? It was likely, for no one seemed to know the world more familiarly; there was no spot so secluded that he did not appear to have an intimate acquaintance with it. He often corrected, with a few clear words, the thousand conjectures
advanced by members of the club as to lost and unheard-of travellers, pointing out the true probabilities, and seeming as if gifted with a sort of second sight, so often did events justify his predictions. He must have travelled everywhere, at
least in the spirit.</p>
</div>
Copy the codewidth: 400px; padding: 6rem 4rem 2rem 2rem; background: #fff; Margin: 0.5 rem; } .pre-headline { color: #777; Letter - spacing: 0.1 rem; font-family: monospace; The font - size: 1.25 rem; text-transform: uppercase; } h1 { position: relative; margin: 0; font-weight: bold; Letter - spacing: 0.05 rem. line-height: 1; text-transform: uppercase; z-index: 10; } h1:before { content: "2018/08"; font-family: monospace; font-size: 10rem; position: absolute; top: 2rem; left: -2rem; z-index: 0; line-height: 1; Color: rgba(50, 25, 0, 0.1); }Copy the code
Finally: pseudo-class compatibility
IE8 does not support many features in CSS3, such as the pseudo-nth-child element, which can be used with the + sign (representing adjacent elements) to achieve the same function
2. Ie9.js is a JS library to solve the compatibility problem of IE5.5 to IE8 CSS3 features