Skip to content
Snippets Groups Projects
Commit 591a9885 authored by AB7340's avatar AB7340
Browse files

Lisätty Exercise 9

parent 8244b7d1
No related branches found
No related tags found
No related merge requests found
Pipeline #752752 passed
Stage: deploy
    Hide whitespace changes
    Inline Side-by-side
    Exercise9/9.1_ButtonAndTransition/index.html 0 → 100644
    + 26
    − 0
    View file @ 591a9885
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated SVG Button</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="svg-button">
    <defs>
    <style>
    .a{fill:#aa3030;}
    .b{fill:#661414;}
    .c{fill:#bc3131;}
    .d{fill:#ffcfcf;}
    </style>
    </defs>
    <title>button</title>
    <circle class="a" cx="25" cy="25" r="25"/>
    <circle class="b" cx="25" cy="25" r="20"/>
    <circle class="c" cx="25" cy="25" r="17.5"/>
    <ellipse class="d" cx="23.5" cy="22.5" rx="2.5" ry="6" transform="rotate(-42.23 23.5 22.5)"/>
    </svg>
    </body>
    </html>
    Exercise9/9.1_ButtonAndTransition/styles.css 0 → 100644
    + 11
    − 0
    View file @ 591a9885
    .svg-button {
    transition: filter 0.3s ease, transform 0.3s ease;
    }
    .svg-button:hover {
    filter: brightness(50%);
    }
    .svg-button:active {
    transform: scale(0.10);
    }
    Exercise9/9.2_ElementsAndKeyframes/index.html 0 → 100644
    + 27
    − 0
    View file @ 591a9885
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animating SVG-elements with keyframes</title>
    <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="animated-svg">
    <defs>
    <style>
    .a{fill:#f4e16e;}
    .b{fill:#fff;}
    .c{fill:#4a82dd;}
    .d{fill:#db4b4b;}
    </style>
    </defs>
    <polygon class="a animated-element" points="86.06 169.4 1.02 167.88 53.96 101.31 29.13 19.97 108.79 49.74 178.48 0.99 174.79 85.96 242.69 137.17 160.73 159.91 133.01 240.31 86.06 169.4"/>
    <path class="b animated-element" d="M260.58,71.22l-3.65,83.69,0,.52.42.32,66.88,50.45-80.72,22.4-.51.14-.17.49-27.31,79.2-46.25-69.85-.29-.44h-.52l-83.76-1.5,52.14-65.57.32-.41-.15-.5L112.54,90,191,119.35l.49.19.43-.31,68.65-48m1.08-2-70.3,49.17L111,88.38l25,82.06-53.4,67.15,85.79,1.54,47.36,71.54,28-81.11,82.67-22.94L257.93,155l3.73-85.71Z" transform="translate(-82.63 -69.24)"/>
    <rect class="c animated-element" x="379.87" y="99.26" width="186" height="186"/>
    <path class="b animated-element" d="M648,169V354H463V169H648m1-1H462V355H649V168Z" transform="translate(-82.63 -69.24)"/>
    <circle class="d animated-element" cx="200.37" cy="437.76" r="110.5"/>
    <path class="b animated-element" d="M283,397a110,110,0,1,1-77.78,32.22A109.25,109.25,0,0,1,283,397m0-1A111,111,0,1,0,394,507,111,111,0,0,0,283,396Z" transform="translate(-82.63 -69.24)"/>
    </svg>
    </body>
    </html>
    \ No newline at end of file
    Exercise9/9.2_ElementsAndKeyframes/styles.css 0 → 100644
    + 22
    − 0
    View file @ 591a9885
    .animated-svg {
    max-width: 500px;
    animation: scaleColorRotate 6s infinite alternate;
    }
    @keyframes scaleColorRotate {
    0% {
    transform: scale(1) rotate(0deg);
    }
    25% {
    transform: scale(1.2) rotate(90deg);
    }
    50% {
    transform: scale(0.8) rotate(180deg);
    }
    75% {
    transform: scale(1.1) rotate(270deg);
    }
    100% {
    transform: scale(1) rotate(360deg);
    }
    }
    index.html
    + 1
    − 0
    View file @ 591a9885
    ......@@ -20,6 +20,7 @@
    <a class="exercise-link" href="https://student.labranet.jamk.fi/~AB7340/web-visualization/Exercise6/">Exercise 6</a>
    <a class="exercise-link" href="https://student.labranet.jamk.fi/~AB7340/web-visualization/Exercise7/">Exercise 7</a>
    <a class="exercise-link" href="https://student.labranet.jamk.fi/~AB7340/web-visualization/Exercise8/">Exercise 8</a>
    <a class="exercise-link" href="https://student.labranet.jamk.fi/~AB7340/web-visualization/Exercise9/">Exercise 9</a>
    </main>
    </body>
    </html>
    0% or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment