疑似要素の使用に関する注意:
一般的な疑似要素は後と前です。使用する場合は、この要素に最初の子要素を追加する前にcontent属性を追加する必要があります。その後、この要素に最後の子要素を追加します。デフォルトはインライン(行レベルの要素)です。サイズを設定する場合は、通常、ブロックに設定するか、floatまたはflexに設定します。疑似要素とフローティングの使用:2つの画像を使用して、両開きドア効果、背景画像、および動画を実現します。
背景画像:
動画:
ホバー効果:
写真は両側(左と右)
のレイアウトのアイデアに移動します。親を背景として使用し、レベルから浮かせます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1366px;
height: 600px;
margin: 0 auto;
background: url('./images/bg.jpg');// 背景图
overflow: hidden;
}
// 伪元素的公共样式
.box::before,
.box::after {
/* 行内标签,宽高看不见,需要使用float或者display */
float: left;
content: '';
/* 只需要显示一半 */
width: 50%;
height: 600px;
background-image: url(./images/fm.jpg);// 移动的图
transition: all .5s;
}
/* 移动一下图片的位置,bck-position除了写像素值,还可以写right这样的方向值,直接定位到最右侧 */
/* right为0表示从右侧开始显示。而且只是一半,所以是右半部分 */
.box::after {
background-position: right 0;//设置背景图的位置,达到只要右半部分的效果
}
/* 鼠标移入的时候的位置改变的效果 */
/* 移入之后看不见自己,则至少是自身的宽度,即100% */
.box:hover::before {
/* 注:这里的100%是自身的宽度 */
transform: translate(-100%);
}
.box:hover::after {
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
注:代码和素材均来自B站黑马的网课