CSS :before 選擇器

定義和說(shuō)明

:before 選擇器向選定的元素前插入內(nèi)容。

使用content 屬性來(lái)指定要插入的內(nèi)容。

CSS :after 選擇器

定義和說(shuō)明

:after 選擇器向選定的元素之后插入內(nèi)容。

使用content 屬性來(lái)指定要插入的內(nèi)容。

這兩個(gè)偽元素會(huì)在真正頁(yè)面元素之前和之后插入一個(gè)額外的元素，從技術(shù)角度上講，它們與下面的HTML標(biāo)記是等效的。

1.偽類光圈

<div class="hover-circle">CSS</div>

.hover-circle {

 width: 100%;

 display: flex;

 align-items: center;

 justify-content: center;

 height: 100%;

 font-size: 3rem;

 letter-spacing: 0.3rem;

 font-weight: bold;

 position: relative;

 cursor: pointer;

 color: #666;

}

.hover-circle::before {

 width: 8.5rem;

 height: 8.5rem;

 border: 3px solid pink;

 content: "";

 border-radius: 50%;

 position: absolute;

 opacity: 0;

}

.hover-circle::after {

 width: 7.2rem;

 height: 7.2rem;

 border: 6px solid pink;

 content: "";

 border-radius: 50%;

 position: absolute;

 opacity: 0;

}

.hover-circle:hover::before,

.hover-circle:hover::after {

 animation-duration: 0.8s;

 animation-delay: 0.2s;

 animation: circle 0.8s;

}

@keyframes circle {

 0% {

   opacity: 0;

   scale: 1;

 }

 25% {

   opacity: 0.25;

 }

 50% {

   opacity: 0.5;

   scale: 1.03;

 }

 75% {

   opacity: 0.75;

 }

 100% {

   opacity: 1;

   scale: 1.03;

 }

}

2.偽類括號(hào)效果

<div class="hover-text">CSS</div>

.hover-text {

 width: 100%;

 display: flex;

 align-items: center;

 justify-content: center;

 height: 100%;

 font-size: 3rem;

 letter-spacing: 0.3rem;

 font-weight: bold;

 position: relative;

 cursor: pointer;

 color: #666;

}

.hover-text::before {

 content: "[";

 position: absolute;

 left: 0.8rem;

 opacity: 0;

 color: #999;

}

.hover-text::after {

 content: "]";

 position: absolute;

 right: 0.8rem;

 opacity: 0;

 color: #999;

}

.hover-text:hover::before {

 animation-duration: 0.8s;

 animation-delay: 0.2s;

 animation: hovertext1 0.8s;

}

.hover-text:hover::after {

 animation-duration: 0.8s;

 animation-delay: 0.2s;

 animation: hovertext2 0.8s;

}

@keyframes hovertext1 {

 0% {

   opacity: 0;

   left: 0.8rem;

 }

 100% {

   opacity: 1;

   left: 0.5rem;

 }

}

@keyframes hovertext2 {

 0% {

   opacity: 0;

   right: 0.8rem;

 }

 100% {

   opacity: 1;

   right: 0.5rem;

 }

}

3.炫酷絲帶效果

雙邊絲帶

<div class="tc">

   <div class="title1"><span>距離結(jié)束還有10天</span></div>

</div>

.title1 {

 position: relative;

 display: inline-block;

}

.title1 span {

 position: relative;

 z-index: 2;

 display: inline-block;

 padding: 0 15px;

 height: 32px;

 line-height: 32px;

 background-color: #dc5947;

 color: #fff;

 font-size: 16px;

 box-shadow: 0 10px 6px -9px rgba(0, 0, 0, 0.6);

}

.title1 span::before,

.title1 span::after {

 position: absolute;

 bottom: -6px;

 border-width: 3px 5px;

 border-style: solid;

 content: "";

}

.title1 span::before {

 left: 0;

 border-color: #972f22 #972f22 transparent transparent;

}

.title1 span::after {

 right: 0;

 border-color: #972f22 transparent transparent #972f22;

}

.title1::before,

.title1::after {

 position: absolute;

 top: 6px;

 content: "";

 border-style: solid;

 border-color: #dc5947;

}

.title1::before {

 left: -32px;

 border-width: 16px 26px 16px 16px;

 border-left-color: transparent;

}

.title1::after {

 right: -32px;

 border-width: 16px 16px 16px 26px;

 border-right-color: transparent;

}

右邊絲帶

<span class="title2">距離結(jié)束還有10天</span>

.title2 {

 position: relative;

 display: inline-block;

 padding: 0 15px;

 height: 32px;

 line-height: 32px;

 background-color: #dc5947;

 color: #fff;

 font-size: 16px;

}

.title2::before {

 position: absolute;

 top: -4px;

 left: 0;

 border-width: 2px 4px;

 border-style: solid;

 border-color: transparent #972f22 #972f22 transparent;

 content: "";

}

.title2::after {

 position: absolute;

 top: 0;

 right: -8px;

 border-width: 16px 8px 16px 0;

 border-style: solid;

 border-color: #dc5947 transparent #dc5947 #dc5947;

 content: "";

}

箭頭絲帶

<span class="title3">距離結(jié)束還有10天</span>

.title3 {

 position: relative;

 display: inline-block;

 margin-right: 16px;

 padding: 0 10px;

 height: 32px;

 line-height: 32px;

 background-color: #dc5947;

 color: #fff;

 font-size: 16px;

}

.title3::before {

 position: absolute;

 top: 0;

 left: -16px;

 border-width: 16px 16px 16px 0;

 border-style: solid;

 border-color: transparent #dc5947 transparent transparent;

 content: "";

}

.title3::after {

 position: absolute;

 top: 0;

 right: -16px;

 border-width: 16px 16px 16px 0;

 border-style: solid;

 border-color: #dc5947 transparent #dc5947 #dc5947;

 content: "";

}

多個(gè)箭頭絲帶

<div class="mt30 pl16">

   <span class="title3">距離結(jié)束還有10天</span>

   <span class="title3 ml5">距離結(jié)束還有10天</span>

   <span class="title3 ml5">距離結(jié)束還有10天</span>

</div>

.title4 {

 width: 200px;

 height: 140px;

 position: absolute;

 top: -8px;

 left: -8px;

 overflow: hidden;

}

.title4::before {

 position: absolute;

 left: 124px;

 border-radius: 8px 8px 0 0;

 width: 16px;

 height: 8px;

 background-color: #972f22;

 content: "";

}

.title4::after {

 position: absolute;

 left: 0;

 top: 124px;

 border-radius: 0 8px 8px 0;

 width: 8px;

 height: 16px;

 background-color: #972f22;

 content: "";

}

.title4 span {

 display: inline-block;

 text-align: center;

 width: 200px;

 height: 40px;

 line-height: 40px;

 position: absolute;

 top: 30px;

 left: -50px;

 z-index: 2;

 overflow: hidden;

 -ms-transform: rotate(-45deg);

 -moz-transform: rotate(-45deg);

 -webkit-transform: rotate(-45deg);

 -o-transform: rotate(-45deg);

 transform: rotate(-45deg);

 border: 1px dashed #fff;

 box-shadow: 0 0 0 3px #dc5947, 0 14px 7px -9px rgba(0, 0, 0, 0.6);

 background-color: #dc5947;

 color: #fff;

}

懸掛標(biāo)簽

<div class="pr mt30" style="background-color: #eee; height: 200px;">

   <div class="title4"><span>企業(yè)熱門(mén)動(dòng)態(tài)</span></div>

   <div class="title5"><span>企業(yè)熱門(mén)動(dòng)態(tài)</span></div>

</div>

.title5 {

 width: 140px;

 height: 200px;

 position: absolute;

 top: -8px;

 right: -8px;

 overflow: hidden;

}

.title5::before {

 position: absolute;

 right: 124px;

 border-radius: 8px 8px 0 0;

 width: 16px;

 height: 8px;

 background-color: #972f22;

 content: "";

}

.title5::after {

 position: absolute;

 right: 0;

 top: 124px;

 border-radius: 0 8px 8px 0;

 width: 8px;

 height: 16px;

 background-color: #972f22;

 content: "";

}

.title5 span {

 display: inline-block;

 text-align: center;

 width: 200px;

 height: 40px;

 line-height: 40px;

 position: absolute;

 top: 30px;

 right: -50px;

 z-index: 2;

 overflow: hidden;

 -ms-transform: rotate(45deg);

 -moz-transform: rotate(45deg);

 -webkit-transform: rotate(45deg);

 -o-transform: rotate(45deg);

 transform: rotate(45deg);

 border: 1px dashed #fff;

 box-shadow: 0 0 0 3px #dc5947, 0 14px 7px -9px rgba(0, 0, 0, 0.6);

 background-color: #dc5947;

 color: #fff;

}

4.幾何圖形

三角形

<div class="triangle"></div>

.triangle {

 width: 0;

 height: 0;

 margin: 50px auto;

 border-bottom: 100px solid #dc5947;

 border-left: 50px solid transparent;

 border-right: 50px solid transparent;

 cursor: pointer;

 transform: scale(1.2);

 transition: 0.5s;

}

五角星

<div class="pentagram"></div>

.pentagram {

 width: 0;

 height: 0;

 margin: 100px auto;

 position: relative;

 border-bottom: 70px solid #dc5947;

 border-left: 100px solid transparent;

 border-right: 100px solid transparent;

 -webkit-transform: rotate(35deg);

 -moz-transform: rotate(35deg);

 -ms-transform: rotate(35deg);

 -o-transform: rotate(35deg);

 transform: rotate(35deg);

 -webkit-transform: scale(1), rotate(35deg);

 -moz-transform: scale(1), rotate(35deg);

 -ms-transform: scale(1), rotate(35deg);

 -o-transform: scale(1), rotate(35deg);

 transform: scale(1), rotate(35deg);

}

.pentagram::after {

 content: "";

 width: 0;

 height: 0;

 border-bottom: 70px solid #dc5947;

 border-left: 100px solid transparent;

 border-right: 100px solid transparent;

 -webkit-transform: rotate(-70deg);

 -moz-transform: rotate(-70deg);

 -ms-transform: rotate(-70deg);

 -o-transform: rotate(-70deg);

 transform: rotate(-70deg);

 position: absolute;

 top: 0px;

 left: -100px;

}

.pentagram::before {

 content: "";

 width: 0;

 height: 0;

 border-bottom: 80px solid #dc5947;

 border-left: 30px solid transparent;

 border-right: 30px solid transparent;

 -webkit-transform: rotate(-35deg);

 -moz-transform: rotate(-35deg);

 -ms-transform: rotate(-35deg);

 -o-transform: rotate(-35deg);

 transform: rotate(-35deg);

 position: absolute;

 top: -45px;

 left: -60px;

}

5.水滴

<div class="drop"></div>

.drop::after {

 content: "";

 position: absolute;

 width: 30px;

 height: 20px;

 border-radius: 50%;

 background-color: #ace3ff;

 margin: 100px auto;

 top: -50px;

 left: 25px;

 box-shadow: 5px 12px 4px #ace3ff, -5px 11px 4px #ace3ff, 0px 14px 4px #4d576e;

 -webkit-transform: rotate(35deg);

}

.drop::before {

 content: "";

 position: absolute;

 width: 0px;

 height: 0px;

 border-style: solid;

 border-width: 0 40px 50px 40px;

 border-color: transparent transparent #ace3ff transparent;

 top: -30px;

 left: 10px;

}

.drop {

 width: 100px;

 height: 100px;

 border-radius: 50%;

 background-color: #ace3ff;

 position: relative;

 margin: 100px auto;

 box-shadow: 0px 6px 0 #3f475a;

}

6 絢麗流動(dòng)邊框

<div class="box-line1"></div>

.box-line2,

.box-line2::before,

.box-line2::after {

 position: absolute;

 top: 0;

 bottom: 0;

 left: 0;

 right: 0;

}

.box-line2 {

 width: 200px;

 height: 200px;

 margin: auto;

 color: #69ca62;

 box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);

}

.box-line2::before,

.box-line2::after {

 content: "";

 z-index: 99;

 margin: -5%;

 box-shadow: inset 0 0 0 2px;

 animation: clipMe 8s linear infinite;

}

.box-line2::before {

 animation-delay: -4s;

}

.box-line2:hover::after,

.box-line2:hover::before {

 background-color: rgba(255, 0, 0, 0.3);

}

@keyframes clipMe {

 0%,

 100% {

   clip: rect(0px, 220px, 2px, 0px);

 }

 25% {

   clip: rect(0px, 2px, 220px, 0px);

 }

 50% {

   clip: rect(218px, 220px, 220px, 0px);

 }

 75% {

   clip: rect(0px, 220px, 220px, 218px);

 }

}

@keyframes surround {

 0%,

 100% {

   clip: rect(0px, 220px, 2px, 0px);

 }

 25% {

   clip: rect(0px, 2px, 220px, 0px);

 }

 50% {

   clip: rect(218px, 220px, 220px, 0px);

 }

 75% {

   clip: rect(0px, 220px, 220px, 218px);

 }

}

.box-line1:before,

.box-line1:after {

 position: absolute;

 top: 0;

 left: 0;

 bottom: 0;

 right: 0;

 content: "";

 z-index: 99;

 margin: -5%;

 animation: surround linear infinite 8s;

 box-shadow: inset 0 0 0 2px #69ca62;

}

.box-line1:before {

 animation-delay: -4s;

}

.box-line1 {

 border: 1px solid #69ca62;

 position: absolute;

 left: 500px;

 top: 200px;

 margin: auto;

 width: 200px;

 height: 200px;

 margin: auto;

}

7.Tooltip提示

<div class="tip" data-tip="CSS偽類">CSS偽類</div>

.tip::after {

 content: attr(data-tip);

 display: none;

 position: absolute;

 padding: 5px 10px;

 left: 15%;

 bottom: 100%;

 width: 150px;

 margin-bottom: 12px;

 transform: translateX(-50%);

 font-size: 12px;

 background: #000;

 color: #fff;

 cursor: default;

 border-radius: 4px;

}

.tip::before {

 content: " ";

 position: absolute;

 display: none;

 left: 15%;

 bottom: 100%;

 transform: translateX(-50%);

 margin-bottom: 3px;

 width: 0;

 height: 0;

 border-left: 6px solid transparent;

 border-right: 6px solid transparent;

 border-top: 9px solid #000;

}

.tip:hover::after,

.tip:hover::before {

 display: block;

}

8.CSS 偽類盒子陰影

使用偽元素:before and :after制作出了完美驚艷的相片陰影效果。其中的技巧是使用絕對(duì)定位固定偽元素，然后給它們的z-index一個(gè)負(fù)值，以背景出現(xiàn)。

<div class="box effect2">

   <h3>CSS 偽類盒子陰影</h3>

</div>

.effect2 {

   position: relative;

}

.effect2::before, .effect2::after {

   z-index: -1;

   position: absolute;

   content: "";

   bottom: 15px;

   left: 10px;

   width: 50%;

   top: 80%;

   max-width: 300px;

   background: #777;

   -webkit-box-shadow: 0 15px 10px #777;

   -moz-box-shadow: 0 15px 10px #777;

   box-shadow: 0 15px 10px #777;

   -webkit-transform: rotate(-3deg);

   -moz-transform: rotate(-3deg);

   -o-transform: rotate(-3deg);

   -ms-transform: rotate(-3deg);

   transform: rotate(-3deg);

}

.effect2::after {

   -webkit-transform: rotate(3deg);

   -moz-transform: rotate(3deg);

   -o-transform: rotate(3deg);

   -ms-transform: rotate(3deg);

   transform: rotate(3deg);

   right: 10px;

   left: auto;

}

CSS Box 陰影效果

9.Tabs當(dāng)前激活狀態(tài)

   <div class="sm-box flex">

       <div class="menu-tabs active">首頁(yè)</div>

       <div class="menu-tabs">新聞</div>

       <div class="menu-tabs">視頻</div>

       <div class="menu-tabs">圖片</div>

   </div>

.menu-tabs {

 display: block;

 padding: 0.25rem 1.5rem;

 clear: both;

 font-weight: 400;

 color: #212529;

 text-align: inherit;

 white-space: nowrap;

 background-color: transparent;

 width: 50px;

 border: 0;

 height: 35px;

 justify-content: center;

 display: flex;

 cursor: pointer;

}

.menu-tabs:hover {

 color: #20a884;

 position: relative;

}

.menu-tabs:hover:after {

 position: absolute;

 content: "";

 border: 1px solid #20a884;

 width: 3rem;

 left: 0;

 bottom: 0;

 margin-left: 50%;

 transform: translateX(-50%);

}

.active {

 position: relative;

 color: #20a884;

}

.flex {

 display: flex;

}

.active::after {

 position: absolute;

 content: "";

 border: 1px solid #20a884;

 width: 3rem;

 left: 0;

 bottom: 0;

 margin-left: 50%;

 transform: translateX(-50%);

}

10.偽元素模糊背景

<div class="container">

  <div class="overlay">

     <h1>A blurred overlay</h1>

    <p>... mask or whatever

    <br>that is responsive and could be cross-browser compatible back to IE9</p>

  </div>

</div>

.container {

 width: 100%;

 height: 100%;

 margin: 0;

}

.container,

.overlay:before {

 background: url(https://wow.techbrood.com/assets/landing.jpg) no-repeat fixed 0 0 / cover;

}

.container {

 -webkit-box-align: center;

 -webkit-align-items: center;

 -ms-flex-align: center;

 align-items: center;

 display: -webkit-box;

 display: -webkit-flex;

 display: -ms-flexbox;

 display: flex;

 -webkit-box-pack: center;

 -webkit-justify-content: center;

 -ms-flex-pack: center;

 justify-content: center;

}

.overlay {

 max-height: 200px;

 margin: 0 auto;

 max-width: 768px;

 padding: 50px;

 position: relative;

 color: white;

 font-family: "Lato";

 position: relative;

 text-align: center;

 z-index: 0;

}

.overlay:before {

 content: "";

 -webkit-filter: blur(100px);

 filter: blur(100px);

 height: 100%;

 left: 0;

 position: absolute;

 top: 0;

 width: 100%;

 z-index: -1;

}

11.藍(lán)湖文字

<span class="lanhu_text">

    本站由叫我詹躲躲提供技術(shù)支持

</span>

.lanhu_text {

 position: relative;

 color: #2878ff;

}

.lanhu_text::before {

 content: "";

 width: 80px;

 height: 20px;

 position: absolute;

 left: -86px;

 top: 0;

 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAABCAYAAABJwyn/AAAAjElEQVQoU22NSw7CQAxDX8ahICF2HIDTcf9d1c8kaDpthQSL6CmxHRuk8cZfMxqf6DGh+Y5uCxquaB7xdUCXilZHWvBorEiOaqAKrkRRUEmUOw283TKRRb9b4GnIEpWmGYrA237kDh1w6J5N7zzzZv13gtuvT7t++jefUTYmwvpk7v3fPaCzn//9LfsBvRpHnliu+xMAAAAASUVORK5CYII=) 0 no-repeat;

}

.lanhu_text::after {

 content: "";

 width: 80px;

 height: 20px;

 position: absolute;

 right: -86px;

 top: 0;

 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAABCAYAAABJwyn/AAAAhElEQVQoU22OSw7CQAxDXzJDWbHiEFyRJQflFggJSjyDph9oC6snx45lO52rrKJqzIyNlkFUPv6vnv+3uW9vrPpBq77/uWFPAXnrnfYVQ16JiWq0stjvxKB9vDc/MeaXWo5cqDEFUkKpEuEoB3ollHvUZ9QV4rFD3R3d9ujwJK5HxAW9AStemAIOwCNlAAAAAElFTkSuQmCC) 100% no-repeat;

}

12 主要標(biāo)題

<div class="first-title">服務(wù)項(xiàng)目</div>

.first-title {

 position: relative;

 color: #a98661;

 font-weight: 400;

 font-size: 30px;

 text-align: center;

}

.first-title::before,

.first-title::after {

 position: absolute;

 content: "";

 width: 110px;

 border-bottom: 1px solid #a98661;

 top: 50%;

 transform: translateY(-50%);

}

.first-title::before {

 left: 100px;

}

.first-title::after {

 right: 100px;

}

13.鼠標(biāo)浮層遮罩浮層

<div class="black-mask"></div>

.black-mask {

 position: relative;

 height: 100%;

 width: 100%;

 cursor: pointer;

}

.black-mask:hover {

 transition-duration: 1s;

 scale: 1.02;

}

.black-mask:hover:before {

 object-fit: cover;

}

.black-mask:hover:after {

 height: 100%;

 opacity: 1;

 transition-duration: 1s;

 display: flex;

 align-items: flex-end;

 padding: 0 30px 15px;

}

.black-mask::before {

 position: absolute;

 content: "";

 background: url(https://dcdn.it120.cc/2019/11/14/f17c5848-6d1f-4254-b3ba-64d3969d16b6.jpg) no-repeat;

 background-size: 100% 100%;

 width: 100%;

 height: 100%;

}

.black-mask::after {

 position: absolute;

 content: "霧在微風(fēng)的吹動(dòng)下滾來(lái)滾去，像冰峰雪山，似蓬萊仙境，如海市蜃樓，使人覺(jué)得飄然欲仙。山河景色在霧的裝點(diǎn)下，變得更加美麗。遠(yuǎn)處的七連山巍峨挺拔，它們仿佛成了神仙住的寶山，令人神往。近處池塘邊時(shí)時(shí)飄來(lái)霧氣，在初升陽(yáng)光的照耀下，呈現(xiàn)出赤、橙、黃、綠、青、藍(lán)、紫七種色彩。......";

 width: 90%;

 height: 0%;

 bottom: 0;

 right: 0;

 z-index: 32;

 background: rgba(0, 0, 0, 0.3);

 opacity: 1;

 color: #fff;

 opacity: 0;

 padding: 0 30px 0;

}

14.絢麗光圈

<div class="aperture">光圈</div>

.aperture {

 width: 136px;

 height: 136px;

 background-color: #dc5947;

 border-radius: 50%;

 line-height: 136px;

 text-align: center;

 color: #fff;

 font-size: 24px;

 cursor: pointer;

 position: relative;

}

.aperture::before {

 border: 3px dashed #a0ff80;

 content: "";

 width: 144px;

 height: 144px;

 position: absolute;

 border-radius: 50%;

 left: -8px;

 top: -6px;

 animation: clockwise 5s linear infinite;

}

@keyframes clockwise {

 100% {

   transform: rotate(360deg);

 }

}

15.彩色流動(dòng)邊框

<div class="rainbow"></div>

.rainbow {

 position: relative;

 z-index: 0;

 width: 400px;

 height: 300px;

 border-radius: 10px;

 overflow: hidden;

 padding: 2rem;

}

.rainbow::before {

 content: '';

 position: absolute;

 z-index: -2;

 left: -50%;

 top: -50%;

 width: 200%;

 height: 200%;

 background-color: #399953;

 background-repeat: no-repeat;

 background-size: 50% 50%, 50% 50%;

 background-position: 0 0, 100% 0, 100% 100%, 0 100%;

 background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);

 -webkit-animation: rotate 4s linear infinite;

 animation: rotate 4s linear infinite;

}

.rainbow::after {

 content: '';

 position: absolute;

 z-index: -1;

 left: 6px;

 top: 6px;

 width: calc(100% - 12px);

 height: calc(100% - 12px);

 background: white;

 border-radius: 5px;

}

@keyframes rotate {

 100% {

   -webkit-transform: rotate(1turn);

   transform: rotate(1turn);

 }

}

16.炫酷偽類邊框

<div class="corner-button">CSS3</div>

.corner-button::before, .corner-button::after {

 content: '';

 position: absolute;

 background: #2f2f2f;

 z-index: 1;

 transition: all 0.3s;

}

.corner-button::before {

 width: calc(100% - 3rem);

 height: calc(101% + 1rem);

 top: -0.5rem;

 left: 50%;

 -webkit-transform: translateX(-50%);

 transform: translateX(-50%);

}

.corner-button::after {

 height: calc(100% - 3rem);

 width: calc(101% + 1rem);

 left: -0.5rem;

 top: 50%;

 -webkit-transform: translateY(-50%);

 transform: translateY(-50%);

}

.corner-button:hover {

 color: pink;

}

.corner-button {

 font-family: 'Lato', sans-serif;

 letter-spacing: .02rem;

 cursor: pointer;

 background: transparent;

 border: 0.5rem solid currentColor;

 padding: 1.5rem 2rem;

 font-size: 2.2rem;

 color: #06c17f;

 position: relative;

 transition: color 0.3s;

 text-align: center;

 margin: 5rem 12rem;

}

.corner-button:hover::after {

 height: 0;

}

.corner-button:hover::before {

 width: 0;

}

.bg-f2{

 background: #2f2f2f;

}

17.偽類美化文字

<div class="beautify-font" data-text='躲躲'>躲躲</div>

<div class="beautify-font2" data-text='躲躲'>躲躲</div>

.beautify-font{

 position: relative;

 font-size: 12rem;

 color: #0099CC

}

.beautify-font::before{

 position: absolute;

 font-size: 12rem;

 color: #333;

 content: attr(data-text);

 white-space:nowrap;

 width: 50%;

 display: inline-block;

 overflow: hidden;

 transition:1s ease-in-out 0s;

}

.beautify-font2{

 position: relative;

 font-size: 6rem;

 color: #0099CC

}

.beautify-font2::before{

 position: absolute;

 font-size: 6rem;

 color: #333;

 content: attr(data-text);

 white-space:nowrap;

 height: 50%;

 display: inline-block;

 overflow: hidden;

 transition:1s ease-in-out 0s;

}

.beautify-font:hover::before{

 width:0;

}

.beautify-font2:hover::before{

 height: 0;

}

18.照片堆疊效果

只使用一張圖片來(lái)創(chuàng)造出一堆圖片疊摞在一起的效果，能做到嗎？當(dāng)然，關(guān)鍵是要使用偽元素:before和:after來(lái)幫助呈現(xiàn)。把這些偽元素的z-index設(shè)置成負(fù)值，讓它們以背景方式起作用。

<div class="stackthree"><img src="./images/city.jpg"></div>

.stackthree::before {

 background: #eff4de;

}

.stackthree, .stackthree::before, .stackthree::after {

 border: 6px solid #fff;

 height: 200px;

 width: 200px;

 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

 box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

}

.stackthree::before {

 top: 5px;

 left: -15px;

 z-index: -1;

 -webkit-transform: rotate(-10deg);

 -moz-transform: rotate(-10deg);

 -o-transform: rotate(-10deg);

 -ms-transform: rotate(-10deg);

 transform: rotate(-10deg);

}

.stackthree::after {

 top: -2px;

 left: -10px;

 -webkit-transform: rotate(-5deg);

 -moz-transform: rotate(-5deg);

 -o-transform: rotate(-5deg);

 -ms-transform: rotate(-5deg);

 transform: rotate(-5deg);

}

.stackthree::before, .stackthree::after {

 background: #768590;

 content: "";

 position: absolute;

 z-index: -1;

 height: 0px\9;

 width: 0px\9;

 border: none\9;

}

.stackthree {

 float: left;

 position: relative;

 margin: 50px;

}

為元素的兼容性

不論你使用單冒號(hào)還是雙冒號(hào)語(yǔ)法，瀏覽器都能識(shí)別。因?yàn)镮E8只支持單冒號(hào)的語(yǔ)法，所以，如果你想兼容IE8，保險(xiǎn)的做法是使用單冒號(hào)。

藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)