网站前端制作页面常用效果

　　网站的内容包罗万象，设计里透出很多别出心裁，页面的框架或者页面中的小细节小效果都能体现出来。在这些网站的制作中，有一些小效果经常能用到，借此记录下来，下面的这几种小效果都是比较常用的，而且都是用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;

　　}