Heim > Artikel > Web-Frontend > So verwenden Sie CSS, um eine Maskenebene anzuzeigen, wenn die Maus darüber schwebt
So verwenden Sie CSS, um eine Maskenebene anzuzeigen, wenn die Maus darüber schwebt
- 不言Original
- 2018-06-20 17:52:033314Durchsuche
Dieser Artikel zeigt Ihnen den Effekt von zwei Mausbewegungen, die die Maskenebene anzeigen. Beispielcodes für beide Effekte finden Sie in der Artikelleiste.
Lass uns mit einer einfachen Implementierung beginnen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.mask-wrapper {
position: relative;
overflow: hidden;
}
.mask-inner {
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: 100%;
-moz-transition: top ease 200ms;
-o-transition: top ease 200ms;
-webkit-transition: top ease 200ms;
transition: top ease 200ms;
}
.mask-wrapper:hover .mask-inner {
top: 0;
}
#my-mask {
width: 300px;
height: 200px;
background: red;
}
#my-mask .mask-inner {
background: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<p id="my-mask" class="mask-wrapper">
<p>Lorem ipsum</p>
<p class="mask-inner">
<p>foo bar</p>
</p>
</p>
</body>
</html>Lass uns eine fortgeschrittenere machen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 arail;
}
ul {
list-style: none;
}
.icon-lists {
overflow: hidden;
background: #f7f7f7;
padding: 40px;
}
.icon-lists .box {
float: left;
margin-right: 10px;
}
.box {
position: relative;
width: 46px;
height: 46px;
overflow: hidden;
z-index: 1;
}
.box i, .box .info {
display: block;
width: 46px;
height: 46px;
border-radius: 46px;
}
.box .shadow {
position: absolute;
top: 0;
z-index: 10;
border-radius: 0;
background: url(<a href="http://xiaomingming.qiniudn.com/shadow.png">http://xiaomingming.qiniudn.com/shadow.png</a>) no-repeat;
}
.box .icon {
position: absolute;
top: 0;
line-height: 46px;
text-align: center;
background: #eee;
color: #333;
font-size: 14px;
}
.box .info {
position: absolute;
top: 46px;
z-index: 2;
background: orange;
color: #fff;
text-align: center;
line-height: 46px;
-webkit-transition:top .2s ease-in;
-moz-transition:top .2s ease-in;
transition:top .2s ease-in;
}
.box:hover>.info {
top:0;
}</p>
<p> </style>
</head>
<body>
<ul class="icon-lists">
<li class="box">
<i class="shadow"></i>
<i class="icon">A</i>
<p class="info">服装</p>
</li>
<li class="box">
<i class="shadow"></i>
<i class="icon">B</i>
<p class="info">鞋包</p>
</li>
<li class="box">
<i class="shadow"></i>
<i class="icon">C</i>
<p class="info">配饰</p>
</li>
<li class="box">
<i class="shadow"></i>
<i class="icon">D</i>
<p class="info">运动</p>
</li>
</ul>
</p>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
So verwenden Sie CSS, um den Effekt der Maus-oben-Symbolrotation zu erzielen
So verwenden Sie CSS-Zeiger – Das Ereignisattribut implementiert den Mauspenetrationseffekt
Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um eine Maskenebene anzuzeigen, wenn die Maus darüber schwebt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!