【JavaScript】巧用before和after偽元素制作動(dòng)畫特效
當(dāng)前位置：點(diǎn)晴教程→知識管理交流
→『 技術(shù)文檔交流 』
為什么要整理這篇文章，是因?yàn)樽罱粋€(gè)項(xiàng)目用到了 一、基本概念1.他們都是 二、基本用法p:after{}
img:before{}這兩個(gè)偽類下特有的屬性
a:after { content: "↗"; }
a:after { content:"(" attr(href) ")"; }
h1::before { content: url(logo.png); }
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }三、進(jìn)階用法清除浮動(dòng)是一個(gè)時(shí)常會遇到的問題，不少人的解決辦法是添加一個(gè)空的 .clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }制作三角的方法： 我們在寫聊天氣泡效果時(shí)會用到偽類元素 .c-main:before{
content: '';
border-top: 9px solid transparent;/*方框上部分背景顏色為透明*/
border-bottom: 9px solid transparent;/*方框下部分背景為透明*/
border-right: 9px solid #eee;/*箭頭背景顏色*/
position: absolute;/*絕對定位1*/
top: 25px;/*距離頂部位置偏移量2*/
left: -9px;/*距離左邊位置偏移量3*/ /*123都是控制顯示位置的*/
}
.c-main:after{
content: '';
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid #fbfdfb;/*箭頭背景顏色，覆蓋前面的#eee顏色，使其顏色與整體顏色一致*/
position: absolute;
top: 27px;
left: -7px;
}定位都是其次的，主要是看border設(shè)置。一邊有顏色，其他三邊透明就可以實(shí)現(xiàn)。 四、特效妙用除了簡單的添加字符，配合 CSS 強(qiáng)大的定位和特效特性，完全可以達(dá)到給簡單的元素另外附加最多兩個(gè)容器的效果。有一點(diǎn)需要注意的是，如果不需要內(nèi)容僅配合樣式屬性做出效果，內(nèi)容屬性也不能為空，即 鼠標(biāo)移上圖片懸停不懂出現(xiàn)邊框特效： HTML代碼 <div class="strength grWidth hidden"> <div class="homeTitle"> <h2>前端博客</h2> </div> <ul class="strengthMain"> <li><a href="https://mybj123.com/"><img src="xiank.jpg" alt="專業(yè)團(tuán)隊(duì)"><div class="font"><h3>碼云筆記</h3><p>歡迎訪問碼云筆記，這里有豐富的前端知識，但不局限于前端！</p></div></a></li> </ul> </div> CSS特效代碼 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
fieldset,img{border:0;}
img{vertical-align:middle;}
ol,ul,li{list-style-type:none;}
table{border-collapse:collapse;border-spacing:0;}
button,input,select,textarea{font-size:13px;font-family:inherit;margin:0;outline:none;resize:none;border:none;}
.clearfix:after {clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden; }
.clearfix { zoom:1; }
html{verflow:-Scroll;overflow-x:hidden;zoom:1;overflow-y:scroll;overflow:-moz-scrollbars-vertical;}
body{color:#1b1f2b;line-height:24px;font-family:"微軟雅黑","宋體", Arial, Helvetica, sans-serif; }
a{color:#1b1f2b;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#e5000c;text-decoration:none;}:focus{outline:none;}
/* CSS活動(dòng)的公共樣式 */
.fl{float:left;}
.fr{float:right;}
.gr_center{text-align:center;}
.grWidth{width:1200px; margin:0 auto;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.center{text-align:center;}
.hidden{overflow:hidden;}
.nor{font-weight:normal;}
.homeTitle {
text-align: center;
margin-bottom: 35px;
text-transform: uppercase;
line-height: 40px;
}
.homeTitle h2 {
font-size: 36px;
color: #FF0000;
font-weight: normal;
}
.strength {
padding-top: 60px;
}
.strengthMain {
height: ;
overflow: hidden;
}
.strengthMain li {
float: left;
width: 600px;
height: 330px;
overflow: hidden;
background: #000;
position: relative;
}
.strengthMain li img {
width: 600px;
height: 330px;
transition: all .5s;
opacity: 0.4;
filter: alpha(opacity=40);
}
.strengthMain li .font {
width: 600px;
height: 205px;
top: 0;
left: 0;
position: absolute;
color: #fff;
text-align: center;
font-size: 16px;
padding-top: 125px;
}
.strengthMain li .font h3 {
font-size: 36px;
color: #fff;
font-weight: normal;
margin-bottom: 20px;
line-height: 36px;
}
.strengthMain li:hover img {
transform: scale(1.05, 1.05);
}
.strengthMain li .font::before,
.strengthMain li .font::after {
position: absolute;
content: '';
opacity: 0;
transition: all 0.5s;
}
.strengthMain li .font::before {
top: 25px;
right: 15px;
bottom: 25px;
left: 15px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0, 1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0
}
.strengthMain li .font::after {
top: 15px;
right: 25px;
bottom: 15px;
left: 25px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1, 0);
transform-origin: 100% 0;
}
.strengthMain li:hover .font::before,
.strengthMain li:hover .font::after {
opacity: 1;
transform: scale(1);
transition: all 0.5s;
}結(jié)束語以上代碼親測可用，用 該文章在 2023/7/7 10:52:53 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
