Erstellen Sie einen Hintergrundeffekt mit CSS und JS [geschlossen] ⇐ HTML

[Anonymous]

Ich bin von einem Hintergrundeffekt der Website inspiriert und möchte ihn wirklich für meine HTML-Website erstellen. Die Website basiert auf WordPress und verwendet Owl-Carousel nach meinem Wissen. Wie kann ich den gleichen Effekt im HTML -CSS -Code oder wenn es eine Bibliothek gibt, die ich verwenden könnte? Im Folgenden finden Sie die verwendete Website. Ich habe jedoch ein paar Codierungsstücke gemacht, aber ich bin nirgendwo in der Nähe. class = "Snippet-Code-CSS Lang-CSS PrettyPrint-Override">

Code: Select all

.technology-item {
padding: 20px;
border: 1px solid #eeeeee;/* Light grey border */
border-radius: 8px; /* Rounded corners */
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 160px; /* Ensure consistent height */
box-sizing: border-box;
}

.tech-icon {
margin-bottom: 15px;
overflow: hidden;
}

.tech-icon img {
max-width: 50px; /* Smaller icon size */
max-height: 50px; /* Smaller icon size */
transition: transform 0.3s ease-in-out;
display: block;
margin: 0 auto;
}

.technology-item:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.technology-item:hover .tech-icon img {
transform: scale(1.15); /* Zoom effect on icon */
}

.tech-name {
font-size: 14px;
color: #333333;
margin-top: auto; /* Pushes name to bottom */
text-align: center;
}

/* Designing Success Section Styles */
.designing-success-area {
position: relative; /* Needed for pseudo-element background */
background-color: #f8f9fa; /* Light grey background as fallback or base */
}

.designing-success-area::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 40%; /* Adjust width of the map background */
background-image: url('../img/bg/world-map-dots.png'); /* Path to your dotted world map image */
background-repeat: no-repeat;
background-position: center right;
background-size: contain; /* Or cover, depending on the map image */
opacity: 0.5; /* Adjust opacity as needed */
z-index: 1;
}

.designing-success-area .container {
position: relative; /* Ensure container content is above the pseudo-element */
z-index: 2;
}

.stat-item {
background-color: #ffffff;
padding: 30px 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease-in-out;
height: 100%; /* Ensure all items have the same height */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.stat-item .stat-icon-wrapper {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #e9f5ff; /* Light blue background for icon */
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #007bff;
}

.stat-item .stat-number {
font-size: 36px;
font-weight: 700;
color: #1a294d;
margin-bottom: 5px;
}

.stat-item .stat-label {
font-size: 16px;
color: #555;
margin-bottom: 0;
}

.stat-item:hover,
.stat-item.highlighted {
background-color: #ffffff;
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid #dee2e6;
}

.stat-item.highlighted .stat-icon-wrapper {
background-color: #d4ebff;
}

.abc {
position: relative;
overflow: hidden;
background-color: red;
color: lime;
padding: 50px;
text-align: center;
min-height: 300px;

mask-image: linear-gradient(to right,
transparent 0%,
transparent 49.9%,
black 50%,
black 100%);
/* Forcing rgba for full clarity */
/* mask-image: linear-gradient(to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 49.9%,
rgba(0,0,0,1) 50%,
rgba(0,0,0,1) 100%);  */

/* Ensure no old mask properties interfere */
mask-repeat: no-repeat;
/* Default is fine, but explicit */
mask-position: initial;
/* Default is fine */

z-index: 1;
}

.abc::before,
.abc::after {
content: '';
position: absolute;
top: 50%;
width: 80px;
height: 80px;
opacity: 1;
filter: none;
z-index: 0;
transform: translateY(-50%);
animation: none;
}

.abc::before {
background: blue;
left: 25%;
}

.abc::after {
background: yellow;
left: 75%;
transform: translate(-100%, -50%);
}

@keyframes flowLights1 {}
@keyframes flowLights2 {}
@keyframes rotateLights1 {}
@keyframes rotateLights2 {}< /code>





Animated Background Section
This section has an animated gradient background.