|
|
Zeile 3: |
Zeile 3: |
| <style> | | <style> |
|
| |
|
| #alien-container {
| |
| width:3em; height:auto;
| |
| position:absolute;
| |
| right:0;
| |
|
| |
| -webkit-animation: alienMove 10s linear infinite; /* Chrome, Safari 5 */
| |
| -moz-animation: alienMove 10s linear infinite; /* Firefox 5-15 */
| |
| -o-animation: alienMove 10s linear infinite; /* Opera 12+ */
| |
| animation: fadeIn 6s linear 1, alienMove 10s ease-in-out 1; /* Chrome, Firefox 16+,
| |
| IE 10+, Safari 5 */
| |
| animation-delay: 6s;
| |
| animation-fill-mode: both;
| |
| }
| |
|
| |
| @-webkit-keyframes alienMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-8em) translateY(-8em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @-moz-keyframes alienMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @-o-keyframes alienMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @keyframes alienMove {
| |
| 0% { filter:opacity(0%); }
| |
| 49%% { filter:opacity(100%); }
| |
| 50% { transform: translateX(0) translateY(0); }
| |
|
| |
| 100% { transform:translateX(-21em) translateY(0); }
| |
| }
| |
|
| |
| @keyframes fadeIn {
| |
| 99% {
| |
| visibility: hidden;
| |
| }
| |
| 100% {
| |
| visibility: visible;
| |
| }
| |
| }
| |
|
| |
|
| |
| #alien-img {
| |
| object-fit:cover;
| |
| width: 100%;
| |
| height:auto;
| |
| }
| |
|
| |
| #spacer {
| |
| width:11em; height:11em;
| |
| }
| |
|
| |
|
| |
| .cat-caption {
| |
| font-size: 1em !important;
| |
| -webkit-text-stroke-width: 1px !important;
| |
| -webkit-text-stroke-color: lightblue !important;
| |
| }
| |
|
| |
|
| |
| #sun {
| |
| position:absolute;
| |
| right:0;
| |
| width: 5em;
| |
| height:auto;
| |
| opacity:60%;
| |
| overflow:hidden;
| |
| }
| |
|
| |
| #sun-container {
| |
| -webkit-animation: sunMove 35s linear infinite; /* Chrome, Safari 5 */
| |
| -moz-animation: sunMove 35s linear infinite; /* Firefox 5-15 */
| |
| -o-animation: sunMove 35s linear infinite; /* Opera 12+ */
| |
| animation: sunMove 35s linear infinite; /* Chrome, Firefox 16+,
| |
| IE 10+, Safari 5 */
| |
|
| |
|
| |
| }
| |
|
| |
| @-webkit-keyframes sunMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @-moz-keyframes sunMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @-o-keyframes sunMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @keyframes sunMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| #schweif {
| |
| width:100%;
| |
| height: auto;
| |
| overflow:hidden;
| |
| -webkit-animation: mySchweif 20s linear infinite; /* Chrome, Safari 5 */
| |
| -moz-animation: mySchweif 20s linear infinite; /* Firefox 5-15 */
| |
| -o-animation: mySchweif 20s linear infinite; /* Opera 12+ */
| |
| animation: mySchweif 20s linear infinite; /* 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);
| |
| }
| |
| }
| |
|
| |
|
| |
| .schweif-container {
| |
| width: 3em;
| |
|
| |
| margin:0.5em;
| |
|
| |
|
| |
| position:relative;
| |
| 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 20s linear infinite; /* 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) ; }
| |
| }
| |
|
| |
| #sprichwort {
| |
| text-align: center;
| |
| font-size: 1.2em;
| |
| background-color: hsla(114, 62%, 45%, 40%);
| |
| width:100%;
| |
| color: hsla(218, 93%, 23%, 100%);
| |
| margin-top: 70px;
| |
|
| |
| }
| |
|
| |
| .belohnungsbild {
| |
| width:10em;
| |
| height:10em;
| |
| object-fit:cover;
| |
| border: 6px solid blue; box-shadow: 1px 3px 4px 0px #888;
| |
| -webkit-box-shadow: 1px 3px 4px 0px #888;
| |
| -moz-box-shadow: 1px 3px 4px 0px #888;
| |
| border-radius: 600px;
| |
|
| |
|
| |
| }
| |
|
| |
| .slider .caption {
| |
| position: absolute;
| |
| bottom: 0;
| |
| left: 0;
| |
| width:93%;
| |
| background-color: rgba(0, 0, 0, 0.5);
| |
| color: #fff;
| |
| font-size: 18px;
| |
| padding: 10px;
| |
| text-align: center;
| |
| }
| |
|
| |
|
| |
|
| |
| .slider ul {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| position:relative;
| |
| }
| |
|
| |
| .slider li {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| opacity: 0;
| |
| transition: opacity 1s ease-in-out;
| |
| }
| |
|
| |
| .slide-img {
| |
| height: 16em;
| |
| width: 16em;
| |
| object-fit:cover;
| |
| box-shadow:5px 5px 8px 3px rgb(226, 226, 226);
| |
| }
| |
|
| |
| .slider li.active {
| |
| opacity: 1;
| |
| }
| |
|
| |
| .slider2 .caption {
| |
| position: absolute;
| |
| bottom: 0;
| |
| left: 0;
| |
| width:93%;
| |
| color: #fff;
| |
| font-size: 18px;
| |
| padding: 10px;
| |
| text-align: center;
| |
| }
| |
|
| |
|
| |
|
| |
| .slider2 ul {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| position:relative;
| |
| }
| |
|
| |
| .slider2 li {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 11em;
| |
| opacity: 0;
| |
| transition: opacity 1s ease-in-out;
| |
| }
| |
|
| |
|
| |
|
| |
| .slider2 li.active {
| |
| opacity: 1;
| |
| }
| |
|
| |
|
|
| |
|
Zeile 403: |
Zeile 18: |
| .list-todo > ul > li { | | .list-todo > ul > li { |
| list-style: "\2192\00A0"; | | list-style: "\2192\00A0"; |
| }
| |
|
| |
|
| |
| #geschafft {
| |
| display: none;
| |
| } | | } |
|
| |
|
Zeile 465: |
Zeile 75: |
|
| |
|
|
| |
|
| .belohnungsbild {
| | |
| width:50vw;
| |
| height:50vw;
| |
| }
| |
| }
| |
|
| |
|
| .my-form { | | .my-form { |