Heim >Web-Frontend >CSS-Tutorial >Wie kann man mit reinem CSS einen Falteffekt erzielen? (mit Code)
Wie kann man mit reinem CSS einen Falteffekt erzielen? (mit Code)
- 藏色散人Original
- 2018-10-19 16:09:096618Durchsuche
In diesem Artikel wird hauptsächlich die Verwendung von reinem CSS zur Erzielung des Falteffekts vorgestellt.
In unserem Frontend-Seitenentwicklungsprozess wird der Falteffekt normalerweise in der Navigationsleiste oder Dropdown-Liste verwendet. Für Front-End-Neulinge kann es schwierig sein.
Im Folgenden werden wir anhand eines einfachen CSS-Codebeispiels detailliert die spezifische Methode zur Verwendung von CSS zur Erzielung des Falteffekts vorstellen.
HTML+CSS-Codebeispiel lautet wie folgt:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>纯css实现折叠效果</title>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#parent >li> span{background: #b2ecef;display: block;width: 200px;border:1px solid #ECEEF2;}
li {line-height: 40px;display: block;}
li p{
display: inline-block;
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1094f2;
}
li>ul{display: none;}
li>ul>li{border: 1px solid #DEDEDE;width: 199px;}
#parent span:hover + ul{display: block;}
#parent span:hover >p{
display: inline-block;
width: 0px;
height: 0px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid#2f2f2f;}
</style>
</head>
<body>
<ul id="parent">
<li>
<span><p></p>主列表</span>
<ul>
<li>子列表1</li>
<li>子列表2</li>
<li>子列表3</li>
</ul>
</li>
</ul>
</body>
</html>Der endgültige Falteffekt der Rezeption ist wie folgt:
Ben Dieser Artikel ist eine Einführung in die Methode zur Verwendung von reinem CSS zur Erzielung des Falteffekts, die ebenfalls sehr einfach und leicht zu verstehen ist. Ich hoffe, es hilft den Bedürftigen!
Wenn Sie mehr über Frontend-bezogenes Wissen erfahren möchten, können Sie der chinesischen PHP-Website HTML-Video-Tutorial, CSS-Video-Tutorial, Bootstrap folgen Video-Tutorial usw. Warten Sie auf verwandte Front-End-Tutorials und heißen Sie alle willkommen, auf die Sie sich beziehen und die Sie lernen können!
Das obige ist der detaillierte Inhalt vonWie kann man mit reinem CSS einen Falteffekt erzielen? (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!