Heim > Artikel > Web-Frontend > Teilen von fünf häufig verwendeten CSS3-Webseiten-Kleineffekten
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.
Tutorial-Empfehlung: CSS-Video-Tutorial
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>
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);
}
}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.
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="搜索...">
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;
}Normalerweise befindet sich daneben eine Schaltfläche, aber ich werde das hier nicht tun.
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>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;
}
Dieser Prompt-Effekt wird häufiger verwendet und von vielen Websites verwendet.
HTML-Code:
<div> <a>博</a> <span>这是我的个人博客</span> </div>
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);
}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:
HTML-Struktur:
<div class="wrapper">
<div class="round">
<span>东邪</span>
<span>西毒</span>
<span>南乞</span>
<span>北丐</span>
</div>
</div>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:'你猜';
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;
}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!