Teilen von fünf häufig verwendeten CSS3-Webseiten-Kleineffekten-CSS-Tutorial-php.cn

Teilen von fünf häufig verwendeten CSS3-Webseiten-Kleineffekten

青灯夜游

Freigeben： 2021-01-08 10:49:36

nach vorne

2563 Leute haben es durchsucht

In diesem Artikel stellen wir Ihnen 5 sehr häufig verwendete CSS3-Webseiteneffekte vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Teilen von fünf häufig verwendeten CSS3-Webseiten-Kleineffekten

Tutorial-Empfehlung: CSS-Video-Tutorial

Der erste Effekt:

Teilen von fünf häufig verwendeten CSS3-Webseiten-Kleineffekten

Da beim Aufzeichnen von GIF-Bildern Frames verloren gehen, sieht es unruhig und festgefahren aus, aber tatsächlich ist es der Effekt ist ziemlich gut und etwas flexibler.

HTML-Code:

<span class="shake">弹</span>

Nach dem Login kopieren

css-Code:

.shake{
    width:40px;
    height:40px;
    display:block;
    background:lightgreen;
    border-radius:50%;
    margin:5px;
    color:#fff;
    font-size:24px;
    text-align:center;
    line-height:40px;
    cursor:pointer;
    -webkit-transition:all 0.25s;
}
.shake:hover{
    -webkit-animation:shake 0.25s;
    background: lightblue;
}
@-webkit-keyframes shake{
    0%,10%,55%,90%,94%,98%,100%{
        -webkit-transform:scale(1,1);
    }
    30%{
        -webkit-transform:scale(1.14,0.86);
    }
    75%{
        -webkit-transform:scale(0.92,1.08);
    }
    92%{
        -webkit-transform:scale(1.04,0.96);
    }
    96%{
        -webkit-transform:scale(1.02,0.98);
    }
    99%{
        -webkit-transform:scale(1.01,0.99);
    }
}

Nach dem Login kopieren

Gestern Abend sah ich den schwebenden Effekt der Schaltfläche „Zurück zum Anfang“ auf der persönlichen Blog-Website von jemandem. Es war ziemlich interessant, aber der Effekt könnte so sein Es ist besser als meines, Sie können es auch mal ausprobieren.

Der zweite Effekt:

Teilen von fünf häufig verwendeten CSS3-Webseiten-Kleineffekten

Tatsächlich wird dieser Effekt derzeit von vielen Online-Websites genutzt, unabhängig davon, ob CSS3 oder jQuery verwendet wird, er kann erreicht werden. Deshalb verwende ich hier einfach CSS3, um dies zu erreichen.

HTML-Code:

<input class="search" type="text" placeholder="搜索...">

Nach dem Login kopieren

CSS-Code:

.search{
    width:80px;
    height:40px;
    border-radius:40px;
    border:2px solid lightblue;
    position: absolute;
    right:200px;
    outline:none;
    text-indent:12px;
    color:#666;
    font-size:16px;
    padding:0;
    -webkit-transition:width 0.5s;
}
.search:focus{
    width:200px;
}

Nach dem Login kopieren

Normalerweise befindet sich daneben eine Schaltfläche, aber ich werde das hier nicht tun.

Der dritte Effekt:

Teilen von fünf häufig verwendeten CSS3-Webseiten-Kleineffekten

Dieser Effekt wird auch sehr häufig verwendet, häufiger auf persönlichen Websites.

HTML-Code:

<div class="banner">
    <a href="javascript:;">博</a>
    <span>这是我的个人博客</span>
</div>

Nach dem Login kopieren

css-Code:

.banner{
    width:234px;
    height:34px;
    border-radius:34px;
    position:absolute;
    top:400px;
    left:200px;
}
.banner a{
    display:inline-block;
    width:30px;
    height:30px;
    line-height:30px;
    border-radius:50%;
    border:2px solid lightblue;
    position:absolute;
    left:0px;top:0px;
    background:lightgreen;
    color:#fff;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    z-index:2;
}
.banner a:hover + span{
    -webkit-transform:rotate(360deg);
    opacity:1;
}
.banner span{
    display:inline-block;
    width:auto;
    padding:0 20px;
    height:34px;
    line-height:34px;
    background:lightblue;
    border-radius:34px;
    text-align: center;
    position:absolute;
    color:#fff;
    text-indent:25px;
    opacity:0;
    -webkit-transform-origin:8% center;
    -webkit-transition:all 1s;
}

Nach dem Login kopieren

Der vierte Effekt:

Teilen von fünf häufig verwendeten CSS3-Webseiten-Kleineffekten

Dieser Prompt-Effekt wird häufiger verwendet und von vielen Websites verwendet.

HTML-Code:

<div class="banner1">
    <a href="javascript:;">博</a>
    <span>这是我的个人博客</span>
</div>

Nach dem Login kopieren

css-Code:

.banner1{
    width:234px;
    height:34px;
    border-radius:40px;
    position:absolute;
    top:400px;
    left:600px;
}
.banner1 a{
    display:inline-block;
    width:30px;
    height:30px;
    line-height:30px;
    border-radius:50%;
    border:2px solid lightblue;
    position:absolute;
    left:0px;top:0px;
    background:lightgreen;
    color:#fff;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    z-index:2;
}
.banner1 a:hover + span{
    -webkit-transform:translateX(40px);
    opacity:1;
}
.banner1 span{
    display:inline-block;
    width:auto;
    padding:0 20px;
    height:30px;line-height:30px;
    background:lightblue;
    border-radius:30px;
    text-align: center;
    color:#fff;
    position:absolute;
    top:2px;
    opacity:0;
    -webkit-transition:all 1s;
    -webkit-transform:translateX(80px);
}

Nach dem Login kopieren

Der fünfte Effekt:

Ich denke, das wird nicht häufig verwendet, ich probiere es nur aus ich selbst, Wenn Sie interessiert sind, werfen Sie einen Blick darauf. Hier ist es:

Teilen von fünf häufig verwendeten CSS3-Webseiten-Kleineffekten

HTML-Struktur:

<div class="wrapper">
    <div class="round">
        <span>东邪</span>
        <span>西毒</span>
        <span>南乞</span>
        <span>北丐</span>
    </div>
</div>

Nach dem Login kopieren

css-Code:

.wrapper{
    width:100px;
    height:100px;
    background:lightblue;
    border-radius:50%;
    border:2px solid lightgreen;
    position: absolute;
    top:200px;
    left:400px;
    cursor:pointer;
}
.wrapper:after{
    content:&#39;你猜&#39;;
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;
    text-align:center;
    color:#fff;
    font-size:24px;
}
.wrapper:hover .round{
    -webkit-transform:scale(1);
    opacity:1;
    -webkit-animation:rotating 6s 1.2s linear infinite alternate;
}
@-webkit-keyframes rotating{
    0%{
        -webkit-transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(180deg);
    }
}
.round{
    width:240px;
    height:240px;
    border:2px solid lightgreen;
    border-radius:50%;
    position: absolute;
    top:-70px;
    left:-70px;
    -webkit-transition:all 1s;
    -webkit-transform:scale(0.35);
    opacity:0;
}
.round span{
    width:40px;
    height:40px;
    line-height:40px;
    display:inline-block;
    border-radius:50%;
    background:lightblue;
    border:2px solid lightgreen;
    color:#fff;
    text-align:center;
    position:absolute;
}
.round span:nth-child(1){
    right:-22px;
    top:50%;
    margin-top:-22px;
}
.round span:nth-child(2){
    left:-22px;
    top:50%;
    margin-top:-22px;
}
.round span:nth-child(3){
    left:50%;
    bottom:-22px;
    margin-left:-22px;
}
.round span:nth-child(4){
    left:50%;
    top:-22px;
    margin-left:-22px;
}

Nach dem Login kopieren

Fazit

Also werde ich dieses Mal ein paar Gadgets teilen, und das werde ich auch Teile ein paar bessere, wenn ich Zeit habe.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonTeilen von fünf häufig verwendeten CSS3-Webseiten-Kleineffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!