Dieser Artikel ist ein Spiegelartikel der maschinellen Übersetzung, bitte klicken Sie hier, um zum Originalartikel zu springen.

Architect_Programmer_Code Landwirtschaftsnetzwerk»Architekt › Frontend-Design & Web › Html/CSS/JavaScript › CSS3 stellt Sharingan her (Animation)
Ansehen: 14807|Antwort: 5

[CSS/DIV] CSS3 stellt Sharingan her (Animation)

[Link kopieren]
Veröffentlicht am 14.11.2014 17:55:02 | | | |
[mw_shl_code=css, wahr] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{marg:0; Polsterung:0; }
.container{ width:750px; Größe: 200 px; Marge: 30 Pixel Auto; Überlauf: versteckt; Hintergrund: #000; Position: Verwandt; }
.eyesBoxs{width:130px; Größe: 70 Pixel; Position: absolut; top: 50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
        Breite: 130 px;
        Größe: 70 Pixel;
        Hintergrund: #fff;
        Position: absolut;
        Top:0;
        links:0;
        Überlauf: versteckt;
        Border-Radius: 0 70px 0 50px;
}
.shadow{
        anzeigen:blocken;
        Breite: 130 px;
        Größe: 70 Pixel;
        Position: absolut;
        Top:0;
        z-Index: 5;
        Randradius: 0 90px 0 60px;
        Box-Shadow: 5px 12px 2px 5px rgba(0,0,0,.25) eingelassen;
}
.skewLeft{
        transform:skewX(15°);
        -webkit-transform:skewX(15°);
        -o-transform:skewX(15°);
}
.skewRight{
        transformieren: skewX(-15°) Skala(-1,1);
        -webkit-transform:skewX(-15°) Skala(-1,1);
        -o-transform: skewX(-15°) Skala(-1,1);
}
.basic{
        Breite: 60 px;
        Größe: 60 Pixel;
        Hintergrund: #000;
        Position: absolut;
        oben: 50%;
        links: 50%;
        z-Index: 10;
        margin-top:-30px;
        Grenzradius: 60 %;
}
.basic:before{
        Inhalt:"";
        anzeigen:blocken;
        Breite: 10 px;
        Größe: 11 Pixel;
        Position: absolut;
        links: 15px;
        Oben: 15 Pixel;
        z-Index: 100;
        Grenzradius: 60 %;
        Hintergrundbild:radial-Gradient(Kreis,RGB(225,225,225),RGB(225,225,225),RGBA(225,225,225,0,9),RGBA(225,225,0.3));
        -webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,0.9),rgba(225,225,0.3));
        -o-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,0.9),rgba(225,225,0.3));
}
.pullLeft .basic{
        margin-links:-33px;
}
.pullRight .basic{
        margin-left:-27px;
}
.eyes{
        Breite: 55 px;
        Größe: 55 Pixel;
        Hintergrund: #ff0000;
        Position: absolut;
        Oben: 8px;
        Grenzradius: 60 %;
        box-shadow:0 0 2px 4px #bd0000 eingefügt,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
        Breite: 64%;
        Größe: 64 %;
        Hintergrund: #ff0000;
        Position: absolut;
        Richtig:0;
        links:0;
        Top: 10 Pixel;
        Marge:0 Auto;
        Grenzradius: 60 %;
        box-shadow:0 0 2px 0 #b20000 eingebaut;
}
.eyes .line:before{
        Inhalt:"";
        anzeigen:blocken;
        Breite: 10 px;
        Größe: 11 Pixel;
        Position: absolut;
        links: 3px;
        Top:4px;
        z-Index: 100;
        Grenzradius: 60 %;
        Hintergrundbild: radial-gradient(Circle,RGB(225,225,225),RGB(225,225,225),RGBA(225,225,225,0.7),RGBA(225,225,0.3));
        -webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,0.7),rgba(225,225,0.3));
        -o-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,0.3));
}
.eyes .line:after{
        Inhalt:"";
        anzeigen:blocken;
        Breite: 10 px;
        Größe: 10 Pixel;
        Position: absolut;
        Hintergrund: #000;
        Richtig:0;
        links: -1px;
        Oben: 13 Pixel;
        z-Index: 100;
        Marge:0 Auto;
        Grenzradius: 60 %;
        transformieren: drehen (150 °);
        -webkit-transform:rotate (150°);
        -o-transform:rotate (150°);
        Animation: Colour 20s Easy-In Infinite;
        -webkit-animation: colour 20s Easy-in unendlich;
        -O-Animation: Farb-20er-Langsam-Einstieg unendlich;
}
@keyframes Farbe{
        0%{background:#000; }
        35%{background:#000; }
        40%{background:#f00; }
        100%{hintergrund:#f00; }
}
@-webkit-keyframes colour{
        0%{background:#000; }
        35%{background:#000; }
        40%{background:#f00; }
        100%{hintergrund:#f00; }
}
@-o-keyframes colour{
        0%{background:#000; }
        35%{background:#000; }
        40%{background:#f00; }
        100%{hintergrund:#f00; }
}
/*******三勾玉 开始*******/
.hook{
        Breite: 92 %;
        Größe: 92 %;
        Position: absolut;
        Richtig:0;
        links:0;
        oben: 5%;
        Marge:0 Auto;
        Grenzradius: 60 %;
}
.hook .bar{
        anzeigen:blocken;
        Breite: 100%;
        Größe: 100%;
        Position: absolut;
        links:0;
        Top:0;
        Grenzradius: 60 %;
}
.hook .bar b{
        anzeigen:blocken;
        Breite: 8 px;
        Größe: 8 px;
        Hintergrund: #000;
        Position: absolut;
        links:0;
        Letzter:0;
        Grenzradius: 60 %;
}
.hook .bar b:after{
        Inhalt:"";
        Breite: 8 px;
        Größe: 8 px;
        Border-Color:transparent transparent #000 transparent;
        Randstil: fest;
        Border-width:0 0 5px 0;
        Position: absolut;
        top:-1px;
        links: -3px;
        z-Index: 100;
        Grenzradius: 0 0 0 70%;
        Transformieren: Drehen (-75°);
        -webkit-transform:rotate(-75°);
        -o-transform:rotate(-75°);
}
.hook .bar:nth-child(1){
        Transformieren: Drehen (10 Grad);
        -webkit-transform:rotate(10°);
        -o-transform:drehen (10 Grad);
}
.hook .bar:nth-child(2){
        transformieren: drehen (130°);
        -webkit-transform:rotate(130°);
        -o-transform:rotate (130°);
}
.hook .bar:nth-child(3){
        Transformieren: Drehen (250 Grad);
        -webkit-transform:rotate (250°);
        -o-transform:rotate (250°);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
        Breite: 93 %;
        Größe: 93 %;
        Position: absolut;
        Richtig:0;
        links: 0px;
        Top:2px;
        Marge:0 Auto;
        Hintergrund: #000;
        Grenzradius: 60 %;
}
.tube .bar{
        anzeigen:blocken;
        Breite: 10 px;
        Größe: 20 Pixel;
        Randstil: fest;
        Randbreite:0 0 0 10px;
        Randfarbe: transparent, transparent, transparent schwarz;
        Position: absolut;
        Grenzradius: 100% 0 0 0;
}
.tube .bar:nth-child(1){
        Top:-10px;
        links: 2px;
        transformieren: drehen (-10 Grad);
}
.tube .bar:nth-child(2){
        Bottom:0px;
        rechts: -10px;
        transformieren: drehen (105°);
        -webkit-transform:rotate (105°);
        -o-transform:drehen (105°);
}
.tube .bar:nth-child(3){
        Bottom:-3px;
        links:-10px;
        Transformieren: Drehen (235 Grad);
        -webkit-transform:rotate (235°);
        -o-transform:rotate (235°);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
        Breite: 130 px;
        Größe: 70 Pixel;
        Position: absolut;
        Überlauf: versteckt;
        Top:0;
        links:0;
        Border-Radius: 0 70px 0 50px;
}
.trans .bar{
        anzeigen:blocken;
        Breite: 9 px;
        Größe: 9 Pixel;
        Hintergrund: #000;
        Position: absolut;
        oben: 50%;
        z-Index: 2;
        Marge:-4px 0 0 -4px;
        Grenzradius: 60 %;
}
.trans .bar:after{        
        Inhalt:"";
        anzeigen:blocken;
        Breite: 11 px;
        Größe: 12 Pixel;
        Position: absolut;
        Top:-13px;
        links: -13px;
        z-Index: 100;
        Grenzradius: 60 %;
        Hintergrund: RGBA (250.250.250,.85);
}
.pullLeft .trans .bar{
        transformieren: skewX(-15°);
        -webkit-transform:skewX(-15°);
        -o-transform:skewX(-15°);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
        transformieren: skewX(-15°) Skala(-1,1);
        -webkit-transform:skewX(-15°) Skala(-1,1);
        -o-transform: skewX(-15°) Skala(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-schmal{
        Animation: ANI-schmal 20er Lock-Out Infinite;
        -Webkit-Animation: ANI-Narrow 20s Ease Out Infinite;
        -O-Animation: ANI-schmale 20er Ease Out unendlich;
}
@keyframes ani-narrow{
        0%{Opazität:1; transformieren:Skala(1); }
        5%{Opazität:1; transformieren:Skala(1); }
        10%{Opacity:0; transformieren:skala(0); }
        87%{Opazität:0; transformieren:skala(0); }
        90%{Opacity:1; transformieren:Skala(1); }
        100%{Opacity:1; transformieren:Skala(1); }
}
@-webkit-keyframes ani-narrow{
        0%{Opazität:1; -webkit-transform:scale(1); }
        5%{Opazität:1; -webkit-transform:scale(1); }
        10%{Opacity:0; -webkit-transform:scale(0); }
        87%{Opazität:0; -webkit-transform:scale(0); }
        90%{Opacity:1; -webkit-transform:scale(1); }
        100%{Opacity:1; -webkit-transform:scale(1); }
}
@-o-keyframes ani-narrow{
        0%{Opazität:1; -o-transform:scale(1); }
        5%{Opazität:1; -o-transform:scale(1); }
        10%{Opacity:0; -o-transform:scale(0); }
        87%{Opazität:0; -o-transform:scale(0); }
        90%{Opacity:1; -o-transform:scale(1); }
        100%{Opacity:1; -o-transform:scale(1); }
}
.ani-zoom{
        Animation: Ani-Zoom 20er Linear Infinite;
        -webkit-animation:ani-zoom 20s linear infinite;
        -o-animation: ani-zoom 20er lineare unendliche;
}
@keyframes ani-zoom{
        0%{Opazität:0; transformieren:skala(0); }
        5%{Opazität:0; transformieren:skala(0); }
        8%{Opazität:1; transformieren:Skala(1); }
        60%{Opacity:1; transformieren:Skala(1); }
        62%{Opazität:0; transformieren: Skala (1,5); }
        100%{Opazität:0; transformieren:skala(0); }
}
@-webkit-keyframes ani-zoom{
        0%{Opazität:0; -webkit-transform:scale(0); }
        5%{Opazität:0; -webkit-transform:scale(0); }
        8%{Opazität:1; -webkit-transform:scale(1); }
        60%{Opacity:1; -webkit-transform:scale(1); }
        62%{Opazität:0; -webkit-transform:scale(1,5); }
        100%{Opazität:0; -webkit-transform:scale(0); }
}
@-o-keyframes ani-zoom{
        0%{Opazität:0; -o-transform:scale(0); }
        5%{Opazität:0; -o-transform:scale(0); }
        8%{Opazität:1; -o-transform:scale(1); }
        60%{Opacity:1; -o-transform:scale(1); }
        62%{Opazität:0; -o-transform:scale(1.5); }
        100%{Opazität:0; -o-transform:scale(0); }
}
.ani-rotateHook{
        Animation: ani-rotateHook 20s Easy-in Infinite;
        -webkit-animation:ani-rotateHook 20s Easy-in unendlich;
        -o-animation:ani-rotateHaken 20s Lock-in unendlich;
}
@keyframes ani-rotateHook{
        0%{Opazität:0; transformieren: skalieren(0) drehen(0); }
        9%{Opazität:0; transformieren: skalieren(0) drehen(0); }
        13%{Opazität:1; Transformieren: Skalieren(1) Drehen (-360 Grad); }
        35%{Opacity:1; Transformieren: Skalieren(1) Drehen (-360 Grad); }
        38%{Opacity:0; transformieren: Skalieren(1,8) drehen (-540 Grad); }
        100%{Opazität:0; transformieren: skalieren(0) drehen(0); }
}
@-webkit-keyframes ani-rotateHook{
        0%{Opazität:0; -webkit-transform:skalieren(0) drehen(0); }
        9%{Opazität:0; -webkit-transform:skalieren(0) drehen(0); }
        13%{Opazität:1; -webkit-transform:skal(1) drehen(-360°); }
        35%{Opacity:1; -webkit-transform:skal(1) drehen(-360°); }
        38%{Opacity:0; -webkit-transform:skalieren(1,8) rotate(-540°); }
        100%{Opazität:0; -webkit-transform:skalieren(0) drehen(0); }
}
@-o-keyframes ani-rotateHook{
        0%{Opazität:0; -o-transform:skalieren(0) drehen(0); }
        9%{Opazität:0; -o-transform:skalieren(0) drehen(0); }
        13%{Opazität:1; -o-transform:skalieren(1) drehen(-360 Grad); }
        35%{Opacity:1; -o-transform:skalieren(1) drehen(-360 Grad); }
        38%{Opacity:0; -o-transform:skalieren(1,8) drehen(-540°); }
        100%{Opazität:0; -o-transform:skalieren(0) drehen(0); }
}
.ani-rotateTube{
        Animation: ani-rotateTube 20s Ease-In-Out Infinite;
        -webkit-animation:ani-rotateTube 20s Ease in-out infinite;
        -o-animation:ani-rotateTube 20s Ease in-out infinite;
}
@keyframes ani-rotateTube{
        0%{Opazität:0; transformieren: skalieren(0) drehen(0); }
        35%{Opazität:0; transformieren: skalieren(0) drehen(0); }
        40%{Opacity:1; Transformieren: Skalieren(1) Drehen (-360 Grad); }
        60%{Opacity:1; Transformieren: Skalieren(1) Drehen (-360 Grad); }
        100%{Opacity:1; Transformieren: Skalieren(1) Drehen (-360 Grad); }
}
@-webkit-keyframes ani-rotateTube{
        0%{Opazität:0; -webkit-transform:skalieren(0) drehen(0); }
        35%{Opazität:0; -webkit-transform:skalieren(0) drehen(0); }
        40%{Opacity:1; -webkit-transform:skal(1) drehen(-360°); }
        60%{Opacity:1; -webkit-transform:skal(1) drehen(-360°); }
        100%{Opacity:1; -webkit-transform:skal(1) drehen(-360°); }
}
@-o-keyframes ani-rotateTube{
        0%{Opazität:0; -o-transform:skalieren(0) drehen(0); }
        35%{Opazität:0; -o-transform:skalieren(0) drehen(0); }
        40%{Opacity:1; -o-transform:skalieren(1) drehen(-360 Grad); }
        60%{Opacity:1; -o-transform:skalieren(1) drehen(-360 Grad); }
        100%{Opacity:1; -o-transform:skalieren(1) drehen(-360 Grad); }
}
.ani-Schatten{
        Animation: Ani-Shadow 20er Linear Infinite;
        -Webkit-Animation:ani-Schatten 20er Linear Infinite;
        -O-Animation: Ani-Schatten 20er Linear Unendlich;
}
@keyframes ani-shadow{
        0%{Opazität:0; box-shadow: keine; }
        58%{Opazität:0; box-shadow: keine; }
        64%{Opazität:1; box-shadow:0 0 0 14px #46464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        87%{Opacity:1; box-shadow:0 0 0 14px #46464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        90%{Opazität:0; box-shadow: keine; }
        100%{Opazität:0; box-shadow: keine; }
}
@-webkit-keyframes ani-shadow{
        0%{Opazität:0; box-shadow: keine; }
        58%{Opazität:0; box-shadow: keine; }
        64%{Opazität:1; box-shadow:0 0 0 14px #46464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        87%{Opacity:1; box-shadow:0 0 0 14px #46464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        90%{Opazität:0; box-shadow: keine; }
        100%{Opazität:0; box-shadow: keine; }
}
@-o-keyframes ani-shadow{
        0%{Opazität:0; box-shadow: keine; }
        58%{Opazität:0; box-shadow: keine; }
        64%{Opazität:1; box-shadow:0 0 0 14px #46464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        87%{Opacity:1; box-shadow:0 0 0 14px #46464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        90%{Opazität:0; box-shadow: keine; }
        100%{Opazität:0; box-shadow: keine; }
}
.ani-schmal, .ani-zoomen, .ani-drehenHaken,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
        Animation-Fill-Modus: Vorwärts;
        -webkit-animation-fill-mode:beide;
        -o-animation-fill-mode: beide;
}
</style>
</head>

<body>
<div class="container">
        <!-- linkes Auge beginnt – >
    <div class="eyesBoxs pullLeft">
                <div class="profile skewLeft"></div>
        <Div-Klasse="Schatten-SchewLinks"></div>
        <div class="basic ani-narrow"></div>
        <div class="eyes ani-zoom">
            <div class="line">           
                <Div-Klasse="Hook ani-rotateHook">
                        <Klasse spann="Bar"><b></b></span>
                    <Klasse spann="Bar"><b></b></span>
                    <Klasse spann="Bar"><b></b></span>
                </div>
                <div class="tube ani-rotateTube">
                        <Klasse spann="Bar"></span>
                        <Klasse spann="Bar"></span>
                        <Klasse spann="Bar"></span>
                </div>
            </div>
        </div>
        <div class="trans skewLeft">
                <Klasse span="außer Ani-Schatten"></span>
        </div>
    </div>
        <!-- Ende des linken Auges – >
    <!-- das rechte Auge beginnt – >
    <div class="eyesBoxs pullRight">
                <div class="profile skewRight"></div>
        <Div-Klasse="Schatten-SkewRechts"></div>
        <div class="basic ani-narrow"></div>
        <div class="eyes ani-zoom">
            <div class="line">           
                <Div-Klasse="Hook ani-rotateHook">
                        <Klasse spann="Bar"><b></b></span>
                    <Klasse spann="Bar"><b></b></span>
                    <Klasse spann="Bar"><b></b></span>
                </div>
                <div class="tube ani-rotateTube">
                        <Klasse spann="Bar"></span>
                        <Klasse spann="Bar"></span>
                        <Klasse spann="Bar"></span>
                </div>
            </div>
        </div>
        <div class="trans skewRight">
                <Klasse span="außer Ani-Schatten"></span>
        </div>
    </div>
        <!-- rechte Augenenden - >
</div>
</body>
[/</html>mw_shl_code]

Punktzahl

Anzahl der Teilnehmer1MB+1 beitragen+1 Zusammenbruch Grund
Administrator + 1 + 1 Wie eine!

Alle Bewertungen sehen





Vorhergehend:Tränen flossen! Microsoft kündigte am 13. November 2014, Pekinger Zeit, .NET Open Source an
Nächster:Eine schlagende elektronische Uhr
 Vermieter| Veröffentlicht am 14.11.2014 17:57:04 |
Dieser Beitrag wurde zuletzt am 14.11.2014 um 18:00 Uhr von Tianxia Wushuang bearbeitet


Veröffentlicht am 14.11.2014 17:58:15 |
Gute Sachen, die ich zuerst gesammelt habe
Veröffentlicht am 14.11.2014 21:53:23 |
So viel Code für ein Auge?
 Vermieter| Veröffentlicht am 14.11.2014 22:12:26 |
Beicheng Webtemperatur 22 Grad Veröffentlicht am 14.11.2014 21:53
So viel Code für ein Auge?

Es ist nicht nur ein Auge! Wenn du es einmal online ausführst, wirst du es wissen.
Veröffentlicht am 14.11.2014 22:23:43 |
Es ist erstaunlich, und es gibt auch das Reinkarnationsauge
Verzichtserklärung:
Alle von Code Farmer Network veröffentlichten Software, Programmiermaterialien oder Artikel dienen ausschließlich Lern- und Forschungszwecken; Die oben genannten Inhalte dürfen nicht für kommerzielle oder illegale Zwecke verwendet werden, andernfalls tragen die Nutzer alle Konsequenzen. Die Informationen auf dieser Seite stammen aus dem Internet, und Urheberrechtsstreitigkeiten haben nichts mit dieser Seite zu tun. Sie müssen die oben genannten Inhalte innerhalb von 24 Stunden nach dem Download vollständig von Ihrem Computer löschen. Wenn Ihnen das Programm gefällt, unterstützen Sie bitte echte Software, kaufen Sie die Registrierung und erhalten Sie bessere echte Dienstleistungen. Falls es eine Verletzung gibt, kontaktieren Sie uns bitte per E-Mail.
Mail To:help@itsvse.com