Do it yourself: CSS für Profil und Blog

@du_selbst

Nimm direkt das hier::)

PS: Habs nochmal korrigiert.



a:hover {
animation-name:myfirst;
animation-duration:2s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

-moz-animation-name:myfirst;
-moz-animation-duration:2s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;

-webkit-animation-name:myfirst;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;

-o-animation-name:myfirst;
-o-animation-duration:2s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;

-ms-animation-name:myfirst;
-ms-animation-duration:2s;
-ms-animation-timing-function:linear;
-ms-animation-delay:2s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:alternate;
-ms-animation-play-state:running;

}


@-moz-keyframes myfirst
{
0% {-moz-transform: scale(1, 1)}
25% {-moz-transform: scale(1, 0.5)}
50% {-moz-transform: scale(1, 0)}
75% {-moz-transform: scale(1, -0.5)}
100% {-moz-transform: scale(1, -1)}
}

@-webkit-keyframes myfirst
{
0% {-webkit-transform: scale(1, 1)}
25% {-webkit-transform: scale(1, 0.5)}
50% {-webkit-transform: scale(1, 0)}
75% {-webkit-transform: scale(1, -0.5)}
100% {-webkit-transform: scale(1, -1)}
}

@-o-keyframes myfirst
{
0% {-o-transform: scale(1, 1)}
25% {-o-transform: scale(1, 0.5)}
50% {-o-transform: scale(1, 0)}
75% {-o-transform: scale(1, -0.5)}
100% {-o-transform: scale(1, -1)}
}

@-ms-keyframes myfirst
{
0% {-ms-transform: scale(1, 1)}
25% {-ms-transform: scale(1, 0.5)}
50% {-ms-transform: scale(1, 0)}
75% {-ms-transform: scale(1, -0.5)}
100% {-ms-transform: scale(1, -1)}
}

@keyframes myfirst
{
0% {transform: scale(1, 1)}
25% {transform: scale(1, 0.5)}
50% {transform: scale(1, 0)}
75% {transform: scale(1, -0.5)}
100% {transform: scale(1, -1)}
}

Sowas lernt man nicht. Es ist einfach irgendwann plötzlich da.

setz animation-delay auf 0

okay, =) ja ich hab alles doppelt und dreifach xD mom



@----




.a:hover {

-webkit-transition:All 1.2306s linear;
-moz-transition:All 1.2306s linear;
-o-transition:All 1.2306s linear;
-webkit-transform: rotate(-4deg) scale(1) skew(-5deg) translate(0px);
-moz-transform: rotate(-4deg) scale(1) skew(-5deg) translate(0px);
-o-transform: rotate(-4deg) scale(1) skew(-5deg) translate(0px); }


.body{background-color:#000000;}a{color:#transparent;text-decoration:none;text-align:justify;font-size:1em;}a:hover{color:#fff;}a:hover{

-webkit-transition:All 1.2306s linear;
-moz-transition:All 1.2306s linear;
-o-transition:All 1.2306s linear;
-webkit-transform: rotate(-4deg) scale(1) skew(-5deg) translate(0px);
-moz-transform: rotate(-4deg) scale(1) skew(-5deg) translate(0px);
-o-transform: rotate(-4deg) scale(1) skew(-5deg) translate(0px); }


.inactive{background:#000000;color:#888888;font-family:times;font-size:2em;font-weight:bold;text-align:justify;height:80%;width:90%;border:10px;}
.active{background:#000000;color:#333333; height:80%; width:80%; border:0px; wrap=soft}

.p{text-align:justify;padding-left:50px;padding-right:50px;}
.div{text-align:justify;padding-left:50px;padding-right:50px;}
.span class="gad-head" style="font-size:5.0em;font-weight:bold;}
</style>



.userfunction {display: none; font-size: 10px; padding-bottom: 4px; text-align: right; width: 700px;}



.profile_info {display: none;}
.profile_links
</style>



.body

.small
.header {background: none; background-color: transparent;}
img.heart {visibility: hidden;}
a.attitel
.topnav
.topnav a
chat_count
.sufu
.tabnav
.tabnav a {background: none; background-color: transparent;}
.a.a_more
.moreMenu

.main
.head_links
.head_links a
.profile_links
.profile_links a
.profile_links a img
.profile_info {display: none;}

.infoleiste {visibility: transparent;}
.mcell_status {display: none;}
.msg {visibility: hidden;}
.mcell_inhalt
.mcell_inhalt a
a.at_in
a.at
.ben_o
a.at_bold
.mcell2
.mcell_inhalt2



</style>




a, a.man, a:link, a:visited{color:#ffffff} a:active, a:hover{color:#transparent}td, table, tr, span, li, p, div, textarea, DIV {color:#ffffff; background-color:transparent} td, li, p, div, a.navbar:link{#transparent}

div.mcell, div.mcell2, div.mcell_inhalt2 {visibility:hidden;}

div.infoleiste, div.mcell_inhalt, div.header {background-color:transparent;}

div.tabnav a {background-color:transparent;}

div.userfunction, div.header, div.tabnav a {background-image:none;}

.sufu, .sufu:focus {margin-left:-10; color:#999999; background-color:#111111;}.gb_post_text img, .gb_post_text_np img { display: none; }div.gb_post_text img[src^="https://www.allmystery.de/static/upics/f8ab62_tod.jpg"] { display:true; }h2 { display: inline; font-size: 14px; margin-left: 100px; /* nach Bedarf verschieben */ } ul#gb_posts { display: block; list-style-position: outside; list-style-type: none; margin: 0 auto; padding: 0; width: 650px; } #gb_post_wrap { height: 90px; margin: 0 auto; position: relative; width: 650px; }

</style>







body{background-color:#000000;border:none;color:#000000;font-family:none;font-size:16px;color:#ffffff;}



.footer {display: none;}

</style>






und dann das noch lol



<body bgcolor="000000">
<link rel="stylesheet" type="text/css" href="http://nospace.ch/files/style.css (Archiv-Version vom 23.07.2012)">

oh xD das letzte hats direkt übersetzt hihi... hab ich mir alles so bischen zusammengebastelt merkt man wahrscheinlich ;-)

samal? Kauf dir ne Putzfrau.

xD das war vorher noch schlimmer ;-) @----

Sorry. Abgelehnt. Bring Ordnung rein. Entfern alles unnötige, verschmelz doppelte Einträge oder lösch sie und bring Struktur rein. Dann bastel ich dir die Animation rein. So nicht.

okay dokay meld mich in einer woche nochmal danke trotzdem =) @----

Das hier funktioniert. Test es und bieg es dir zurecht.
.main {
animation-name:myfirst;
animation-duration:2s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

-moz-animation-name:myfirst;
-moz-animation-duration:2s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;

-webkit-animation-name:myfirst;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;

-o-animation-name:myfirst;
-o-animation-duration:2s;
-o-animation-timing-function:linear;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;

-ms-animation-name:myfirst;
-ms-animation-duration:2s;
-ms-animation-timing-function:linear;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:alternate;
-ms-animation-play-state:running;

}










@-moz-keyframes myfirst
{
0% {-moz-transform: scale(1, 1)}
25% {-moz-transform: scale(1, 0.5)}
50% {-moz-transform: scale(1, 0)}
75% {-moz-transform: scale(1, -0.5)}
100% {-moz-transform: scale(1, -1)}
}

@-webkit-keyframes myfirst
{
0% {-webkit-transform: scale(1, 1)}
25% {-webkit-transform: scale(1, 0.5)}
50% {-webkit-transform: scale(1, 0)}
75% {-webkit-transform: scale(1, -0.5)}
100% {-webkit-transform: scale(1, -1)}
}

@-o-keyframes myfirst
{
0% {-o-transform: scale(1, 1)}
25% {-o-transform: scale(1, 0.5)}
50% {-o-transform: scale(1, 0)}
75% {-o-transform: scale(1, -0.5)}
100% {-o-transform: scale(1, -1)}
}

@-ms-keyframes myfirst
{
0% {-ms-transform: scale(1, 1)}
25% {-ms-transform: scale(1, 0.5)}
50% {-ms-transform: scale(1, 0)}
75% {-ms-transform: scale(1, -0.5)}
100% {-ms-transform: scale(1, -1)}
}

@keyframes myfirst
{
0% {transform: scale(1, 1)}
25% {transform: scale(1, 0.5)}
50% {transform: scale(1, 0)}
75% {transform: scale(1, -0.5)}
100% {transform: scale(1, -1)}
}

@----
da werd ich noch bischen üben müssen,


das Ding funktioniert zwar, aber verdreht oben mit unten statt links rechts, und bleibt nicht stehen,


ich werd mich mal ans aufräumen machen, und überlege nochmal was es genau sein soll.

Wolltest du nicht vertikale Drehung?

Spiegelschrift so wie bei mirror6 auf dem Profil und bei hover umdrehen ähnlich wie bei darkdeep auf dem profil, sone Mischung sollte es werden. @----

was ist hiermit anstelle des oberen?:
.main {
animation-name:myfirst;
animation-duration:2s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

-moz-animation-name:myfirst;
-moz-animation-duration:2s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;

-webkit-animation-name:myfirst;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;

-o-animation-name:myfirst;
-o-animation-duration:2s;
-o-animation-timing-function:linear;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;

-ms-animation-name:myfirst;
-ms-animation-duration:2s;
-ms-animation-timing-function:linear;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:alternate;
-ms-animation-play-state:running;

}




@-moz-keyframes myfirst
{
0% {-moz-transform: scale(1, 1)}
25% {-moz-transform: scale(0,5, 1)}
50% {-moz-transform: scale(0, 1)}
75% {-moz-transform: scale(-0,5, 1)}
100% {-moz-transform: scale(-1, -1)}
}

@-webkit-keyframes myfirst
{
0% {-webkit-transform: scale(1, 1)}
25% {-webkit-transform: scale(0,5, 1)}
50% {-webkit-transform: scale(0, 1)}
75% {-webkit-transform: scale(-0,5, 1)}
100% {-webkit-transform: scale(-1, -1)}
}

@-o-keyframes myfirst
{
0% {-o-transform: scale(1, 1)}
25% {-o-transform: scale(0,5, 1)}
50% {-o-transform: scale(0, 1)}
75% {-o-transform: scale(-0,5, 1)}
100% {-o-transform: scale(-1, -1)}
}

ui es wird langsam =) das geht in die richtige richtung =) nur sollte es jetzt noch stehenbleiben ...

Das hier ist strikt bei hover. Wenn das ganze am kippen ist und keinen Kontakt zum Cursor hat stoppt es da es keine "feste Animation" ist:

Spiegelschrift:

a {
-moz-transform:scale(1,-1)
-webkit-transform:scale(1,-1)
-o-transform:scale(1,-1)
-ms-transform:scale(1,-1)
transform:scale(1,-1)

-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
-ms-transition: all 2s;
transition: all 2s;
}

umdrehen bei hover innerhalb 2 sekunden:

a:hover {
-moz-transform:scale(1,1)
-webkit-transform:scale(1,1)
-o-transform:scale(1,1)
-ms-transform:scale(1,1)
transform:scale(1,1)

-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
-ms-transition: all 2s;
transition: all 2s;

}

Drehen nur bei hover:

.main:hover {
animation-name:myfirst;
animation-duration:2s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

-moz-animation-name:myfirst;
-moz-animation-duration:2s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;

-webkit-animation-name:myfirst;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;

-o-animation-name:myfirst;
-o-animation-duration:2s;
-o-animation-timing-function:linear;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;

-ms-animation-name:myfirst;
-ms-animation-duration:2s;
-ms-animation-timing-function:linear;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:alternate;
-ms-animation-play-state:running;

}




@-moz-keyframes myfirst
{
0% {-moz-transform: scale(1, 1)}
25% {-moz-transform: scale(0,5, 1)}
50% {-moz-transform: scale(0, 1)}
75% {-moz-transform: scale(-0,5, 1)}
100% {-moz-transform: scale(-1, -1)}
}

@-webkit-keyframes myfirst
{
0% {-webkit-transform: scale(1, 1)}
25% {-webkit-transform: scale(0,5, 1)}
50% {-webkit-transform: scale(0, 1)}
75% {-webkit-transform: scale(-0,5, 1)}
100% {-webkit-transform: scale(-1, -1)}
}

@-o-keyframes myfirst
{
0% {-o-transform: scale(1, 1)}
25% {-o-transform: scale(0,5, 1)}
50% {-o-transform: scale(0, 1)}
75% {-o-transform: scale(-0,5, 1)}
100% {-o-transform: scale(-1, -1)}
}

Es dreht jetzt zwar moment ich versuch noch das andere.

@----

titel drehen nur bei hover:
komisch, also der Anfang ist richtig, bis es verschwindet, aber dann sollte es weiterdrehen bis spiegelverkehrt und dann stehenbleiben ... weisst du wie ich meine?

Warte.