我看不到之前的实现。
div-image 框中最后一个部分库中的属性之前
我照顾所有解决方案,例如内容或相对于父母的位置和绝对于孩子的位置,但我仍然没有看到::before。
不知道为什么没有出现
我仍在学习前端,并在 YouTube 的视频中看到了这个实现,它对于视频来说效果很好,但对我来说,我不明白为什么??
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3MJ</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/3mj.css">
<link rel="stylesheet" href="css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Cairo:[email protected]&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet">
</head>
<body>
<!-- Start Header -->
<div class="header" id="header">
<div class="container">
<a href="#" class="logo">3MJ</a>
<ul class="main-nav">
<li><a href="#article">Article</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#feature">Feature</a></li>
<li><a href="#">Other Links</a>
<!-- Start Megamenu -->
<div class="mega-menu">
<div class="image">
<img src="images/megamenu.png" alt="">
</div>
<ul class="links">
<li>
<a href="#testimonials"><i class="far fa-comments fa-fw"></i> Testimonials</a>
</li>
<li>
<a href="#team"><i class="far fa-user fa-fw"></i> Team Members</a>
</li>
<li>
<a href="#services"><i class="far fa-building fa-fw"></i> Services</a>
</li>
<li>
<a href="#our-skills"><i class="far fa-check-circle fa-fw"></i> Our Skills</a>
</li>
<li>
<a href="#work-steps"><i class="far fa-clipboard fa-fw"></i> How It Works</a>
</li>
</ul>
<ul class="links">
<li>
<a href="#events"><i class="far fa-calendar-alt fa-fw"></i> Events</a>
</li>
<li>
<a href="#pricing"><i class="fas fa-server fa-fw"></i> Pricing Plans</a>
</li>
<li>
<a href="#video"><i class="far fa-play-circle fa-fw"></i> Top Videos</a>
</li>
<li>
<a href="#stats"><i class="far fa-chart-bar fa-fw"></i> Stats</a>
</li>
<li>
<a href="#discount"><i class="fas fa-percent fa-fw"></i> Request A Discount</a>
</li>
</ul>
</div>
<!-- End Megamenu -->
</li>
</ul>
</div>
</div>
<!-- End Header -->
<!-- Start Landing -->
<div class="landing">
<div class="container">
<div class="text">
<h1>Welcome, To 3MJ Store World</h1>
<p>Here you will find your dream, your goals and what do you hope. We share happiness.</p>
</div>
<div class="image">
<img src="images/landing-image.png" alt="">
</div>
</div>
<a href="#article" class="go-down">
<i class="fas fa-angle-double-down fa-2x"></i>
</a>
</div>
<!-- End Landing -->
<!-- Start Article -->
<div class="article" id="article">
<h2 class="main-title">ARTICLE</h2>
<div class="container">
<div class="box">
<img src="images/cat-01.jpg" alt="">
<div class="content">
<h3>Test Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit</p>
</div>
<div class="info">
<a href="#">Read More</a>
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div>
<div class="box">
<img src="images/cat-02.jpg" alt="">
<div class="content">
<h3>Test Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit</p>
</div>
<div class="info">
<a href="#">Read More</a>
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div>
<div class="box">
<img src="images/cat-03.jpg" alt="">
<div class="content">
<h3>Test Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit</p>
</div>
<div class="info">
<a href="#">Read More</a>
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div>
<div class="box">
<img src="images/cat-04.jpg" alt="">
<div class="content">
<h3>Test Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit</p>
</div>
<div class="info">
<a href="#">Read More</a>
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div>
<div class="box">
<img src="images/cat-05.jpg" alt="">
<div class="content">
<h3>Test Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit</p>
</div>
<div class="info">
<a href="#">Read More</a>
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div>
<div class="box">
<img src="images/cat-06.jpg" alt="">
<div class="content">
<h3>Test Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit</p>
</div>
<div class="info">
<a href="#">Read More</a>
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div>
<div class="box">
<img src="images/cat-07.jpg" alt="">
<div class="content">
<h3>Test Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit</p>
</div>
<div class="info">
<a href="#">Read More</a>
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div>
<div class="box">
<img src="images/cat-08.jpg" alt="">
<div class="content">
<h3>Test Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit</p>
</div>
<div class="info">
<a href="#">Read More</a>
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div>
</div>
</div>
<!-- End Article -->
<!-- Start Gallery -->
<div class="gallery" id="gallery">
<h2 class="main-title">GALLERY</h2>
<div class="container">
<div class="box">
<img src="images/gallery-01.png" alt="" class="image">
</div>
<div class="box">
<img src="images/gallery-02.png" alt="" class="image">
</div>
<div class="box">
<img src="images/gallery-03.jpg" alt="" class="image">
</div>
<div class="box">
<img src="images/gallery-04.png" alt="" class="image">
</div>
<div class="box">
<img src="images/gallery-05.jpg" alt="" class="image">
</div>
<div class="box">
<img src="images/gallery-06.png" alt="" class="image">
</div>
</div>
</div>
<!-- End Gallery -->
</body>
</html>
CSS
/* Start Public Config */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:root {
--main-color: #2196f3;
--main-color-alt: #1787e0;
--main-transition: 0.3s;
--main-padding: 100px;
--section-background-color: #ececec;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Cairo", sans-serif;
}
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.main-title {
margin: 0 auto 100px;
border: 1px solid black;
padding: 10px 20px;
font-size: 30px;
width: fit-content;
position: relative;
z-index: 1;
transition: var(--main-transition);
}
.main-title::before,
.main-title::after {
content: "";
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: var(--main-color);
top: 50%;
transform: translateY(-50%);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.main-title::before {
left: -25%;
}
.main-title::after {
right: -25%;
}
.main-title:hover {
color: white;
border: 1px solid white;
transition-delay: 0.5s;
}
.main-title:hover::before {
z-index: -1;
animation: left-move 0.5s linear forwards;
-webkit-animation: left-move 0.5s linear forwards;
}
.main-title:hover::after {
z-index: -1;
animation: right-move 0.5s linear forwards;
-webkit-animation: right-move 0.5s linear forwards;
}
/* End Public Config */
/* Start Header */
.header {
background-color: white;
position: relative;
box-shadow: 0 0 10px #ddd;
--main-height: 72px;
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.header .container .logo {
color: var(--main-color);
font-size: 26px;
font-weight: bold;
height: var(--main-height);
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 767px) {
.header .container .logo {
width: 100%;
height: 50px;
}
}
.header .container .main-nav {
display: flex;
}
@media (max-width: 767px) {
.header .container .main-nav {
margin: auto;
}
}
.header .container .main-nav li:hover .mega-menu {
opacity: 1;
top: 100%;
z-index: 100;
}
.header .container .main-nav>li>a {
display: flex;
justify-content: center;
align-items: center;
height: var(--main-height);
position: relative;
color: black;
padding: 0 30px;
transition: var(--main-transition);
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
overflow: hidden;
}
@media (max-width: 767px) {
.header .container .main-nav>li>a {
padding: 10px;
font-size: 14px;
height: 40px;
}
}
.header .container .main-nav>li>a::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: var(--main-color);
bottom: 0;
left: -100%;
transition: var(--main-transition);
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
}
.header .container .main-nav>li>a:hover {
color: var(--main-color);
background-color: #fafafa;
}
.header .container .main-nav>li>a:hover::before {
left: 0;
}
/* Start MegaMenu */
.header .container ul li .mega-menu {
background-color: white;
position: absolute;
width: 100%;
left: 0;
padding: 30px;
border-bottom: 3px solid var(--main-color);
z-index: -1;
display: flex;
gap: 30px;
top: 200%;
opacity: 0;
transition: top var(--main-transition), opacity var(--main-transition);
-webkit-transition: top var(--main-transition), opacity var(--main-transition);
-moz-transition: top var(--main-transition), opacity var(--main-transition);
-ms-transition: top var(--main-transition), opacity var(--main-transition);
-o-transition: top var(--main-transition), opacity var(--main-transition);
}
@media (max-width: 767px) {
.header .container ul li .mega-menu {
flex-direction: column;
gap: 0;
padding: 5px;
}
}
.header .container ul li .mega-menu .image img {
max-width: 100%;
}
@media (max-width: 991px) {
.header .container ul li .mega-menu .image {
display: none;
}
}
.header .container .main-nav li .mega-menu .links {
min-width: 250px;
flex: 1;
}
.header .container .main-nav li .mega-menu .links li {
position: relative;
}
.header .container .main-nav li .mega-menu .links li:not(:last-child) {
border-bottom: 1px solid #e9e6e6;
}
@media (max-width: 767px) {
.header .container .main-nav li .mega-menu .links:first-of-type li:last-child {
border-bottom: 1px solid #e9e6e6;
}
}
.header .container .main-nav li .mega-menu .links li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #fafafa;
z-index: -1;
transition: var(--main-transition);
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
}
.header .container .main-nav li .mega-menu .links li:hover:before {
width: 100%;
}
.header .container .main-nav li .mega-menu .links li a {
color: var(--main-color);
padding: 15px;
display: block;
font-size: 18px;
font-weight: bold;
}
.header .container .main-nav li .mega-menu .links li a i {
margin-right: 10px;
}
/* End MegaMenu */
/* End Header */
/* Start Landing */
.landing {
position: relative;
}
.landing::before {
content: "";
position: absolute;
left: 0;
top: -30px;
width: 100%;
height: 100%;
background-color: #ececec;
z-index: -1;
transform-origin: top left;
transform: skewY(-6deg);
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
-ms-transform: skewY(-6deg);
-o-transform: skewY(-6deg);
}
.landing .container {
min-height: calc(100vh - 72px);
display: flex;
align-items: center;
padding-bottom: 120px;
}
@media (max-width: 767px) {
.landing .container {
min-height: calc(100vh - 90px);
}
}
.landing .text {
flex: 1;
}
@media (max-width: 991px) {
.landing .text {
text-align: center;
}
}
.landing .text h1 {
font-size: 40px;
margin: 0;
letter-spacing: -2px;
}
@media (max-width: 767px) {
.landing .text h1 {
font-size: 30px;
}
}
.landing .text p {
font-size: 24px;
line-height: 1.7;
margin: 5px 0 0;
color: #666;
max-width: 500px;
}
@media (max-width: 991px) {
.landing .text p {
margin: 10px auto auto;
}
}
@media (max-width: 767px) {
.landing .text p {
font-size: 15px;
}
}
.landing .image img {
position: relative;
width: 600px;
animation: up-and-down 5s linear infinite;
-webkit-animation: up-and-down 5s linear infinite;
}
@media (max-width: 991px) {
.landing .image img {
display: none;
}
}
.landing .go-down {
color: var(--main-color);
position: absolute;
bottom: 30px;
left: 50%;
transition: var(--main-transition);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
}
.landing .go-down i {
animation: bouncing 1.5s infinite;
-webkit-animation: bouncing 1.5s infinite;
}
.landing .go-down:hover {
color: var(--main-color-alt);
}
/* End Landing */
/* Start Article */
.article {
padding-top: var(--main-padding);
padding-bottom: var(--main-padding);
}
.article .container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 40px;
}
.article .container .box {
box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
background-color: white;
overflow: hidden;
border-radius: 5px;
transition: transform var(--main-transition), box-shadow var(--main-transition);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transition: transform var(--main-transition), box-shadow var(--main-transition);
-moz-transition: transform var(--main-transition), box-shadow var(--main-transition);
-ms-transition: transform var(--main-transition), box-shadow var(--main-transition);
-o-transition: transform var(--main-transition), box-shadow var(--main-transition);
}
.article .container .box:hover {
transform: translateY(-10px);
box-shadow: 0 2px 15px rgb(0 0 0 / 20%);
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
}
.article .container .box img {
max-width: 100%;
}
.article .container .box .content {
padding: 20px;
}
.article .container .box .content h3 {
margin: 0;
}
.article .container .box .content p {
margin: 10px 0 0;
line-height: 1.5;
color: #777;
}
.article .container .box .info {
padding: 20px;
border-top: 1px solid #e6e6e7;
display: flex;
justify-content: space-between;
align-items: center;
}
.article .container .box .info a {
color: var(--main-color);
font-weight: bold;
}
.article .container .box .info i {
color: var(--main-color);
}
.article .container .box:hover .info i {
animation: arrow-move 0.5s linear infinite;
-webkit-animation: arrow-move 0.5s linear infinite;
}
/* End Article */
/* Start Gallery */
.gallery {
padding-top: var(--main-padding);
padding-bottom: var(--main-padding);
position: relative;
background-color: var(--section-background-color);
}
.gallery .container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 40px;
}
.gallery .container .box {
padding: 15px;
background-color: white;
box-shadow: 0px 20px 20px 0px rgb(0 0 0 / 13%), 0px 2px 4px 0px rgb(0 0 0 / 12%);
}
.gallery .container .box .image {
position: relative;
}
.gallery .container .box .image::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: red;
width: 10px;
height: 10px;
/* opacity: 0; */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.gallery .container .box img {
max-width: 100%;
}
/* End Gallery */
/* Start Animation */
@keyframes up-and-down {
0%,
100% {
top: 0;
}
50% {
top: -50px;
}
}
@keyframes bouncing {
0%,
10%,
20%,
50%,
80%,
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
40%,
60% {
transform: translateY(-15px);
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
}
}
@keyframes left-move {
50% {
left: 0;
width: 15px;
height: 15px;
}
100% {
width: 50%;
height: 100%;
left: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
}
}
@keyframes right-move {
50% {
right: 0;
width: 15px;
height: 15px;
}
100% {
width: 50%;
height: 100%;
right: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
}
}
@keyframes arrow-move {
100% {
transform: translateX(10px);
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-o-transform: translateX(10px);
}
}
/* End Animation */
我发现了这个问题,我必须将 -img- 标签放入 class="image" 的 div 中,并从 -img- 标签中删除 class="image"。