网站前端制作页面常用效果 - 方维网络
400-800-9385
网站建设资讯详细

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

发表日期:2021-06-21 18:08:32   作者来源:林志平   浏览:2147   标签:网站前端制作    
网站的内容包罗万象,设计里透出很多别出心裁,页面的框架或者页面中的小细节小效果都能体现出来。在这些网站的制作中,有一些小效果经常能用到,借此记录下来,下面的这几种小效果都是比较常用的,而且都是用css就能完成的。譬如:页面中的一些下拉框或者气泡框的小三角形、页面内容的翻转、文字的背景和头部的搜索框的效果。诸多这些效果组成一个个很不错的网站。
 
制作下拉框的小三角形,如下图:

页面效果


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的可以设置小三角的颜色和指向方向。
 
页面内容翻转效果,如下图:
 

页面效果2

可以用两个div做成正面和反面的内容,通过翻转动效将内容翻转,主要的html+css如下:
Html:
 

CSS效果

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实现给文字添加背景,如下图
 

ABOUT US

 
.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;
}
页面中常见的搜索框,鼠标移上去之后宽度就会变大,如下图:
 

搜索


 
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{
    width:200px;
}
如没特殊注明,文章均为方维网络原创,转载请注明来自http://www.cdpcwl.com/news/6080.html