C
CuzImKalli
New member
- Beiträge
- 2
- Punkte Reaktionen
- 0
Hallo an Alle!
ich habe gerade angefangen HTML und CSS zu lernen. Nun habe ich mir ein Template heruntergeladen um mir Design information zu holen. Ich habe ein Template mit einer Wave Animation gefunden, möchte diese jedoch nicht mit Farben, sondern mit einem .gif füllen. Wie ist dies möglich?
Anbei schicke ich das gif und die Style.css Datei!
Vielen Dank im voraus!
ich habe gerade angefangen HTML und CSS zu lernen. Nun habe ich mir ein Template heruntergeladen um mir Design information zu holen. Ich habe ein Template mit einer Wave Animation gefunden, möchte diese jedoch nicht mit Farben, sondern mit einem .gif füllen. Wie ist dies möglich?
Anbei schicke ich das gif und die Style.css Datei!
Vielen Dank im voraus!
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
