網(wǎng)站前端制作頁面常用效果

網(wǎng)站的內(nèi)容包羅萬象，設(shè)計里透出很多別出心裁，頁面的框架或者頁面中的小細(xì)節(jié)小效果都能體現(xiàn)出來。在這些網(wǎng)站的制作中，有一些小效果經(jīng)常能用到，借此記錄下來，下面的這幾種小效果都是比較常用的，而且都是用css就能完成的。譬如：頁面中的一些下拉框或者氣泡框的小三角形、頁面內(nèi)容的翻轉(zhuǎn)、文字的背景和頭部的搜索框的效果。諸多這些效果組成一個個很不錯的網(wǎng)站。

制作下拉框的小三角形，如下圖：
Css如下：
.other ul li::before{
content: '';
position: absolute;
top: -8px;
left: 50%;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 8px;
border-color: transparent transparent #d5d5d5 transparent;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
border-width修改小三角的大小，border-color的可以設(shè)置小三角的顏色和指向方向。
頁面內(nèi)容翻轉(zhuǎn)效果，如下圖：

可以用兩個div做成正面和反面的內(nèi)容，通過翻轉(zhuǎn)動效將內(nèi)容翻轉(zhuǎn)，主要的html+css如下：
Html：

Ccs:
.caseli .above{
padding-top: 7%;
background: #FFFFFF;
position: relative;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
transform: rotateY(0deg);
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
transition: all .4s ease-out;
z-index: 24;
box-shadow: 0px 5px 38px rgba(0,69,87, 0.09);
border-radius: 10px;
}
.caseli:hover .above{
z-index: 35;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
transition-delay: .2s;
}
.caseli .below{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(../images/img32.jpg) center no-repeat;
background-size: cover;
box-shadow: 0px 5px 38px rgba(0,69,87, 0.09);
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
transform: rotateY(-180deg);
-moz-transition: all .4s ease-out;
-webkit-transition: all .4s ease-out;
transition: all .4s ease-out;
z-index: 13;
border-radius: 10px;
}
.caseli:hover .below{
display: block;
-webkit-animation: fadeIn 0.8s;
animation: fadeIn 0.8s;
}
.caseli:hover .below{
z-index: 46;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
transition-delay: .2s;
}
Css實現(xiàn)給文字添加背景，如下圖

.i-title .tsp{
position: relative;
display: inline-block;
padding: 0px 166px;
font-weight: bold;
font-family: "syh";
color: #ec3f41;
text-transform: uppercase;
line-height: 1.2;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-image: url(../images/img9.jpg);
background-position: center left;
background-size: cover;
}
頁面中常見的搜索框，鼠標(biāo)移上去之后寬度就會變大，如下圖：

Css:
.searchbox{
width: 80px;
height: 40px;
border-radius:40px;
border:1px solid #EEEEEE;
position: absolute;
right: 0;
outline:none;
text-indent:12px;
color: #333333;
font-size:15px;
padding:0;
-webkit-transition:width 0.4s;
transition:width 0.4s;
}
.searchbox:hover{

分享名稱：網(wǎng)站前端制作頁面常用效果
轉(zhuǎn)載注明：http://muchs.cn/news31/246881.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、建站公司、網(wǎng)站導(dǎo)航、搜索引擎優(yōu)化、微信公眾號、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)