Common effects of website front-end production pages

Suyou Network (10 years of experience), serves tens of thousands of companies, and has fixed transparent quotations.Domain name registration, hosting /One-stop service for server and website source code.A physical company, a professional team, worth choosing!Website building business: corporate website construction, company official website production, foreign trade website construction, website imitation, website copying, imitation site, foreign trade website construction, single-page customer service WeChat【 suyoufuwu】

The content of the website is all-encompassing, and the design reveals a lot of unique ideas, which can be reflected in the framework of the page or the small details and effects in the page.In the production of these websites, some small effects can be used frequently. This is done by recording them. The following small effects are commonly used, and they are all used css It can be done.For example: the effects of some drop-down boxes or bubble boxes in the page, the effect of the page content flips, the background of the text and the search box at the head.Many of these effects form a very good website.

Make a small triangle for the drop-down box, as shown below:

Page Effect

Css as follows:
.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 Modify the size of the small triangle. border-color The color and direction of the small triangle can be set.

The page content flip effect is as shown in the figure below:

Page Effect 2

Two can be used div Made the front and back content, and flip the content through the flip effect, the main html+css as follows:
Html：

CSS Effect

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 Implement the background to the text, as shown below

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;
}
The common search box on the page will have a wider width after the mouse is moved up, as shown in the figure below:

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;
}

The above is the "common effects of website front-end production pages" shared by Suyou Network and everyone. Thank you very much for reading this article patiently. We will provide you with more information on reference, use or learning and communication.We can also provide you with:Enterprise website construction, website imitation, website copying, imitation site, foreign trade website construction, foreign trade website construction, company official website productionFor services, our company serves customers with the service concept of "integrity, professionalism, pragmatism and innovation".If you need cooperation, please scan the code to consult, and we will serve you sincerely.

TAG Label:

Previous article:Typesetting optimization of video websites

Next article:Can the official account "build a building"?How to use website messages and public