|
|
Zeile 5: |
Zeile 5: |
| <html> | | <html> |
| <style> | | <style> |
| #schweif {
| |
| width:100%;
| |
| height: auto;
| |
| overflow:hidden;
| |
| -webkit-animation: mySchweif 20s linear 1; /* Chrome, Safari 5 */
| |
| -moz-animation: mySchweif 20s linear 1; /* Firefox 5-15 */
| |
| -o-animation: mySchweif 20s linear 1; /* Opera 12+ */
| |
| animation: mySchweif 10s linear 1; /* Chrome, Firefox 16+,
| |
| IE 10+, Safari 5 */
| |
| }
| |
|
| |
| @-webkit-keyframes mySchweif {
| |
| 0% {
| |
| transform: rotate(80deg);
| |
| }
| |
| 40% {
| |
| transform: rotate(144deg);
| |
| }
| |
| 50% {
| |
| transform: rotate(134deg);
| |
| }
| |
| 60% {
| |
| transform: rotate(124deg);
| |
| }
| |
| 70% {
| |
| transform: rotate(114deg);
| |
| }
| |
| 80% {
| |
| transform: rotate(104deg);
| |
| }
| |
| 90% {
| |
| transform: rotate(94deg);
| |
| }
| |
| 100% {
| |
| transform: rotate(80deg);
| |
| }
| |
| }
| |
|
| |
| @-moz-keyframes mySchweif {
| |
| 0% {
| |
| transform: rotate(80deg);
| |
| }
| |
| 40% {
| |
| transform: rotate(144deg);
| |
| }
| |
| 50% {
| |
| transform: rotate(134deg);
| |
| }
| |
| 60% {
| |
| transform: rotate(124deg);
| |
| }
| |
| 70% {
| |
| transform: rotate(114deg);
| |
| }
| |
| 80% {
| |
| transform: rotate(104deg);
| |
| }
| |
| 90% {
| |
| transform: rotate(94deg);
| |
| }
| |
| 100% {
| |
| transform: rotate(80deg);
| |
| }
| |
| }
| |
|
| |
| @-o-keyframes mySchweif {
| |
| 0% {
| |
| transform: rotate(80deg);
| |
| }
| |
| 40% {
| |
| transform: rotate(144deg);
| |
| }
| |
| 50% {
| |
| transform: rotate(134deg);
| |
| }
| |
| 60% {
| |
| transform: rotate(124deg);
| |
| }
| |
| 70% {
| |
| transform: rotate(114deg);
| |
| }
| |
| 80% {
| |
| transform: rotate(104deg);
| |
| }
| |
| 90% {
| |
| transform: rotate(94deg);
| |
| }
| |
| 100% {
| |
| transform: rotate(80deg);
| |
| }
| |
| }
| |
|
| |
| @keyframes mySchweif {
| |
| 0% {
| |
| transform: rotate(80deg);
| |
| }
| |
| 40% {
| |
| transform: rotate(144deg);
| |
| }
| |
| 50% {
| |
| transform: rotate(134deg);
| |
| }
| |
| 60% {
| |
| transform: rotate(124deg);
| |
| }
| |
| 70% {
| |
| transform: rotate(114deg);
| |
| }
| |
| 80% {
| |
| transform: rotate(104deg);
| |
| }
| |
| 90% {
| |
| transform: rotate(94deg);
| |
| }
| |
| 100% {
| |
| transform: rotate(80deg);
| |
| }
| |
| }
| |
|
| |
| .show {
| |
| display:block;
| |
| }
| |
|
| |
| .schweif-container {
| |
| display:none;
| |
| width: 3em;
| |
|
| |
|
| margin:0.5em;
| |
|
| |
| right: 0;
| |
| position:absolute;
| |
| top:9em;
| |
| -webkit-animation: myOrbit 20s linear infinite; /* Chrome, Safari 5 */
| |
| -moz-animation: myOrbit 20s linear infinite; /* Firefox 5-15 */
| |
| -o-animation: myOrbit 20s linear infinite; /* Opera 12+ */
| |
| animation: myOrbit 10s linear 1; /* Chrome, Firefox 16+,
| |
| IE 10+, Safari 5 */
| |
| }
| |
|
| |
| @-webkit-keyframes myOrbit {
| |
| 0% { transform: rotate(0deg) translateX(10em); }
| |
|
| |
| 100% { transform: rotate(-360deg) translateX(10em) ; }
| |
| }
| |
|
| |
| @-moz-keyframes myOrbit {
| |
| 0% { transform: rotate(0deg) translateX(10em); }
| |
|
| |
| 100% { transform: rotate(-360deg) translateX(10em) ; }
| |
| }
| |
|
| |
| @-o-keyframes myOrbit {
| |
| 0% { transform: rotate(0deg) translateX(10em); }
| |
|
| |
| 100% { transform: rotate(-360deg) translateX(10em) ; }
| |
| }
| |
|
| |
| @keyframes myOrbit {
| |
| 0% { transform: rotate(0deg) translateX(10em); }
| |
|
| |
| 100% { transform: rotate(-360deg) translateX(10em) ; }
| |
| }
| |
| html { | | html { |
| font-size: 1.1em; | | font-size: 1.1em; |
Zeile 421: |
Zeile 260: |
| } | | } |
| </style> | | </style> |
| <!--
| |
| <img id="kometin-lg" style="position:absolute; opacity:20%;position: fixed;
| |
| src="/resources/assets/Kometin-icon2_alpha-135x135.png">
| |
| https://wiki.kometin.at/images/a/a5/Winter_kometin.jpg
| |
| https://wiki.kometin.at/images/f/f6/Kometinnenschweif.png
| |
| -->
| |
|
| |
|
| <div class="schweif-container">
| | |
| <img src="" alt="Schweif"
| | |
| id="schweif">
| |
| </div>
| |
| <img id="garten-img" src="https://wiki.kometin.at/images/a/a5/Winter_kometin.jpg" alt="Küche" > | | <img id="garten-img" src="https://wiki.kometin.at/images/a/a5/Winter_kometin.jpg" alt="Küche" > |
|
| |
|