網站前端制作頁面常用效果

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

　　制作下拉框的角形，如下圖：

　　Css如下：

　　.otherulli：：before{

　　content：'';

　　position：absolute;

　　top：-8px;

　　display：inline-block;

　　width：0;

　　height：0;

　　border-style：solid;

　　border-width：08px8px;

　　border-color：transparenttransparent#d5d5d5transparent;

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

　　transform：translateX(-50%);

　　}

　　border-width修改角的大小，border-color的可以設置角的顏色和指向方向。

　　頁面內容翻轉效果，如下圖：

　　可以用兩個p做成正面和反面的內容，通過翻轉動效將內容翻轉，主要的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-bacace-visibility：hidden;

　　-moz-transform：rotateX(0deg)rotateY(0deg);

　　-moz-transform-style：preserve-3d;

　　-moz-bacace-visibility：hidden;

　　transform：rotateY(0deg);

　　-webkit-transition：all.4sease-out;

　　-moz-transition：all.4sease-out;

　　transition：all.4sease-out;

　　z-index：24;

　　box-shadow：0px5px38pxrgba(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;

　　top：0;

　　width：100%;

　　height：100%;

　　background：url(../images/img3

　　2.jpg)centerno-repeat;

　　background-size：cover;

　　box-shadow：0px5px38pxrgba(0，69，87，0.09);

　　-webkit-transform：rotateY(-180deg);

　　-webkit-transform-style：preserve-3d;

　　-webkit-bacace-visibility：hidden;

　　-moz-transform：rotateY(-180deg);

　　-moz-transform-style：preserve-3d;

　　-moz-bacace-visibility：hidden;

　　transform：rotateY(-180deg);

　　-moz-transition：all.4sease-out;

　　-webkit-transition：all.4sease-out;

　　transition：all.4sease-out;

　　z-index：13;

　　border-radius：10px;

　　}

　　.caseli：hover.below{

　　display：block;

　　-webkit-animation：fadeIn0.8s;

　　animation：fadeIn0.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實現給文字添加背景，如下圖

　　.i-title.tsp{

　　position：relative;

　　display：inline-block;

　　padding：0px166px;

　　font-weight：bold;

　　font-family：syh;

　　color：#ec3f41;

　　text-transform：uppercase;

　　1.2;

　　background-clip：text;

　　-webkit-background-clip：text;

　　-webkit-text-fill-color：transparent;

　　color：transparent;

　　background-image：url(../images/img

　　9.jpg);

　　background-position：centerleft;

　　background-size：cover;

　　}

　　頁面中常見的搜索框，鼠標移上去之后寬度就會變大，如下圖：

　　Css：

　　.searchbox{

　　width：80px;

　　height：40px;

　　border-radius：40px;

　　border：1pxsolid#EEEEEE;

　　position：absolute;

　　right：0;

　　outline：none;

　　text-indent：12px;

　　color：#333333;

　　font-size：15px;

　　padding：0;

　　-webkit-transition：width0.4s;

　　transition：width0.4s;

　　}

　　.searchbox：hover{

　　width：200px;

　　}