Wouter1993
Gebruiker
- Lid geworden
- 16 mrt 2015
- Berichten
- 47
Hallo,
Voor een schoolproject willen we een SVG effect toevoegen in onze html/css, namelijk een soort "sparkle-effect".
De svg werkt prima, maar nu willen we deze dupliceren, zodat je om en om de sparkle te zien krijgt op verschillende locaties.
Zelf hebben we geen ervaring met SVG-effecten en hebben we dit effect ook op internet gevonden.
De html-code:
De CSS Code:
Hopelijk kan iemand ons helpen met dit probleem!
Alvast bedankt!
Groeten,
Leon & Wouter.
Voor een schoolproject willen we een SVG effect toevoegen in onze html/css, namelijk een soort "sparkle-effect".
De svg werkt prima, maar nu willen we deze dupliceren, zodat je om en om de sparkle te zien krijgt op verschillende locaties.
Zelf hebben we geen ervaring met SVG-effecten en hebben we dit effect ook op internet gevonden.
De html-code:
HTML:
<svg width="100" height="100" viewBox="0 0 100 100">
<g class="group" opacity="0.8">
<g class="large">
<path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45, 41.25 L75,42.5 L45,43.75
L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z " fill="white" />
</g>
<g class="large-2" transform="rotate(45)">
<use xlink:href="#large" />
</g>
<g class="small">
<path id="small" d="M41.25,40 L42.5,25 L43.75,40 L45,41.25 L60,42.5 L45,43.75
L43.75,45 L42.5,60 L41.25,45 L40,43.75 L25,42.5 L40,41.25z" fill="white" />
</g>
</g>
</svg>
De CSS Code:
Code:
/* Sparkle */
svg {
position: absolute;
-webkit-transform: translate(135%, 430%);
transform: translate(135%, 430%);
}
.group {
-webkit-transform: translate(42.5px,42.5px);
-moz-transform: translate(42.5px,42.5px);
transform: translate(42.5px, 42.5px);
}
path {
-webkit-transform: translate(-42.50px,-42.50px);
-moz-transform: translate(-42.50px,-42.50px);
transform: translate(-42.50px,-42.50px);
}
.large {
-webkit-animation: large 2.5s infinite;
-moz-animation: large 2.5s infinite;
}
.large-2 {
-webkit-animation: large-2 2.5s infinite;
-moz-animation: large-2 2.5s infinite;
}
.small {
-webkit-animation: small 2.5s infinite;
-moz-animation: small 2.5s infinite;
}
@-webkit-keyframes large {
0% {
opacity: 0;
-webkit-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
}
}
@-moz-keyframes large {
0% {
opacity: 0;
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(360deg) scale(1.5);
}
}
@-webkit-keyframes large-2 {
0% {
opacity: 0;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: rotate(405deg) scale(1.1);
transform: rotate(405deg) scale(1.1);
}
}
@-moz-keyframes large-2 {
0% {
opacity: 0;
transform: rotate(45deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(405deg) scale(1.1);
}
}
@-webkit-keyframes small {
0% {
opacity: 0;
-webkit-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: rotate(-360deg) scale(1);
transform: rotate(-360deg) scale(1.5);
}
}
@-moz-keyframes small {
0% {
opacity: 0;
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(-360deg) scale(1.5);
}
}
Hopelijk kan iemand ons helpen met dit probleem!
Alvast bedankt!
Groeten,
Leon & Wouter.