C
CuzImKalli
New member
- Beiträge
- 2
- Punkte Reaktionen
- 0
Hallo an Alle!
ich habe eine Frage. Ich habe mit CSS und HTML angefangen und stehe jetzt vor einem Problem. Ich habe mir ein Template zu Ideensammlung gedownloadet und möchte nun eine Wave Animation die im Template mit Farben gemacht wurden mit einem Bild füllen. Ich schicke anbei die Style.css und das Bild, dass ich einfügen möchte. Könnte mir einer erklären, wie ich das Bild einfüge anstatt der grauen Wave Animation.
´
ich habe eine Frage. Ich habe mit CSS und HTML angefangen und stehe jetzt vor einem Problem. Ich habe mir ein Template zu Ideensammlung gedownloadet und möchte nun eine Wave Animation die im Template mit Farben gemacht wurden mit einem Bild füllen. Ich schicke anbei die Style.css und das Bild, dass ich einfügen möchte. Könnte mir einer erklären, wie ich das Bild einfüge anstatt der grauen Wave Animation.
Code:
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
width: 100%;
overflow: hidden;
position: relative;
background: linear-gradient(0deg, rgb(42, 44, 57) 0%, rgb(51, 54, 74) 100%);
padding: 0;
}
#hero .carousel-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
position: relative;
height: 70vh;
padding-top: 60px;
}
#hero h2 {
color: #fff;
margin-bottom: 30px;
font-size: 48px;
font-weight: 700;
}
#hero p {
width: 80%;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
margin: 0 auto 30px auto;
color: #fff;
}
#hero .carousel-control-prev,
#hero .carousel-control-next {
width: 10%;
}
#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
background: none;
font-size: 48px;
line-height: 1;
width: auto;
height: auto;
}
#hero .btn-get-started {
font-family: "Raleway", sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 32px;
border-radius: 50px;
transition: 0.5s;
line-height: 1;
margin: 10px;
color: #fff;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
border: 2px solid #ef6603;
}
#hero .btn-get-started:hover {
background: #ef6603;
color: #fff;
text-decoration: none;
}
@media (min-width: 1024px) {
#hero p {
width: 60%;
}
#hero .carousel-control-prev,
#hero .carousel-control-next {
width: 5%;
}
}
@media (max-width: 768px) {
#hero .carousel-container {
height: 90vh;
}
#hero h2 {
font-size: 28px;
}
}
.hero-waves {
display: block;
width: 100%;
height: 60px;
position: relative;
}
.wave1 use {
-webkit-animation: move-forever1 10s linear infinite;
animation: move-forever1 10s linear infinite;
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.wave2 use {
-webkit-animation: move-forever2 8s linear infinite;
animation: move-forever2 8s linear infinite;
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.wave3 use {
-webkit-animation: move-forever3 6s linear infinite;
animation: move-forever3 6s linear infinite;
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
@-webkit-keyframes move-forever1 {
0% {
transform: translate(85px, 0%);
}
100% {
transform: translate(-90px, 0%);
}
}
@keyframes move-forever1 {
0% {
transform: translate(85px, 0%);
}
100% {
transform: translate(-90px, 0%);
}
}
@-webkit-keyframes move-forever2 {
0% {
transform: translate(-90px, 0%);
}
100% {
transform: translate(85px, 0%);
}
}
@keyframes move-forever2 {
0% {
transform: translate(-90px, 0%);
}
100% {
transform: translate(85px, 0%);
}
}
@-webkit-keyframes move-forever3 {
0% {
transform: translate(-90px, 0%);
}
100% {
transform: translate(85px, 0%);
}
}
@keyframes move-forever3 {
0% {
transform: translate(-90px, 0%);
}
100% {
transform: translate(85px, 0%);
}
}Anhänge
Zuletzt bearbeitet: