WV10 done

e9ba21e9 · AB0410 · 53b0440f · e9ba21e9 · e9ba21e9 · e9ba21e9
Commit e9ba21e9 authored 2 years ago by AB0410
--- a/WV10/2.css
+++ b/WV10/2.css
+.a {
+    animation: tahti 2s ease-in-out 0s infinite;
+}
+
+@keyframes tahti {
+    0%{
+        fill: violet;
+    }
+    25%{
+        scale: 90%;
+    }
+    50%{
+        fill: blue;
+    }
+    75%{
+        scale: 70%;
+    }
+    100%{
+        scale: 50%;
+    }
+}
+
+.c{
+    animation: palikka 2s ease-in-out infinite;
+}
+
+@keyframes palikka {
+    from{
+        transform: rotate(20deg);
+    }
+    to{
+        transform: rotate(360deg);
+        fill: aliceblue;
+    }
+}
+
+.d{
+    animation: ympyra 1s ease-in infinite;
+}
+
+@keyframes ympyra {
+    0%{
+        fill: blueviolet;
+    }
+    70%{
+        fill: black;
+    }
+    20%{
+        fill: aqua;
+    }
+    100%{
+        fill: blueviolet;
+    }
+}
\ No newline at end of file
--- a/WV10/2.html
+++ b/WV10/2.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WV10.2</title>
+    <link rel="stylesheet" href="2.css">
+</head>
+<body>
+    <a href="index.html" style="text-decoration: none; font-size: 2rem;">Back to WV10.1</a>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.37 548.76">
+        <defs>
+            <style>
+                .a{fill:#f4e16e;}
+                .b{fill:#fff;}
+                .c{fill:#4a82dd;}
+                .d{fill:#db4b4b;}
+            </style>
+        </defs>
+        <title>Animaatioharkka, toinen osa</title>
+        <polygon class="a" 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" 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" x="379.87" y="99.26" width="186" height="186"/>
+        <path class="b" d="M648,169V354H463V169H648m1-1H462V355H649V168Z" transform="translate(-82.63 -69.24)"/>
+        <circle class="d" cx="200.37" cy="437.76" r="110.5"/>
+        <path class="b" 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
--- a/WV10/index.html
+++ b/WV10/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WV10</title>
+    <link rel="stylesheet" href="main.css">
+</head>
+<body>
+    <a href="2.html" style="text-decoration: none; font-size: 2rem;">WV10.2</a>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376 376">
+        <defs>
+            <style>
+                .a{fill:#aa3030;}
+                .b{fill:#661414;}
+                .c{fill:#bc3131;}
+                .d{fill:#ffcfcf;}
+            </style>
+        </defs>
+        <title>button</title>
+        <circle class="a" cx="188" cy="188" r="188"/>
+        <circle class="b" cx="188" cy="188" r="163"/>
+        <circle class="c" cx="188" cy="188" r="150"/>
+        <ellipse class="d" cx="888.23" cy="455.5" rx="16.86" ry="42.18" transform="translate(-683.63 373.13) rotate(-42.23)"/>
+    </svg>
+</body>
+</html>
\ No newline at end of file
--- a/WV10/main.css
+++ b/WV10/main.css
+circle, ellipse{
+    transition: 0.15s;
+}
+
+circle.c:hover, ellipse.d:hover{
+    cursor: pointer;
+}
+
+circle.c:active {
+    scale: 99.55%;
+    fill: #932a2a;
+}
+
+.c:active + ellipse.d{
+    fill: #dcb2b2;
+}
\ No newline at end of file