この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

Architect_Programmer_Code農業ネットワーク»建築家 › フロントエンド設計とウェブ › HTML/CSS/JavaScript › CSS3写輪眼制作(アニメーション)
眺める： 14807|答える： 5

[CSS/DIV] CSS3写輪眼制作(アニメーション)

[リンクをコピー]
掲載地 2014/11/14 17:55:02 | | | |
[mw_shl_code=css、真]<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; パッド:0; }
.container{ width:750px; 高さ:200ピクセル; マージン:30px auto; オーバーフロー:隠し; 背景:#000; 位置:相対的; }
.eyesBoxs{width:130px; 高さ:70ピクセル; 位置:絶対; トップ:50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
        幅:130px;
        高さ:70ピクセル;
        背景:#fff;
        位置:絶対;
        top:0;
        left:0;
        オーバーフロー:隠し;
        border-radius:0 70px 0 50px;
}
.shadow{
        display:block;
        幅:130px;
        高さ:70ピクセル;
        位置:絶対;
        top:0;
        Z指数:5;
        border-radius:0 90px 0 60px;
        ボックスシャドウ:5px 12px 2px 5px RGBA(0,0,0,.25)インセット;
}
.skewLeft{
        transform:skewX(15deg);
        -webkit-transform:skewX(15deg);
        -o-変換:skewX(15deg);
}
.skewRight{
        transform:skewX(-15deg) スケール(-1,1);
        -webkit-transform:skewX(-15deg) スケール(-1,1);
        -o-変換:skewX(-15deg)スケール(-1,1);
}
.basic{
        幅:60px;
        高さ:60ピクセル;
        背景:#000;
        位置:絶対;
        トップ:50%;
        左:50%;
        Z指数:10;
        マージントップ:-30px;
        国境半径:60%;
}
.basic:before{
        内容:";
        display:block;
        幅:10px;
        高さ:11px;
        位置:絶対;
        左:15px;
        トップ:15px;
        Z指数:100;
        国境半径:60%;
        背景画像:radial-gradient(circle, rgb(225,225,225), rgb(225,225,225), rgba(225,225,225,0.9)、rgba(225,225,225,0.3));
        -webkit-background-image:radial-gradient(circle, rgb(225,225,225), rgb(225,225,225), rgba(225,225,225,0.9)、rgba(225,225,225,0.3));
        -o-背景画像:radial-gradient(circle, rgb(225,225,225), rgb(225,225,225), rgba(225,225,225,0.9)、rgba(225,225,225,0.3));
}
.pullLeft .basic{
        余白左:-33px;
}
.pullRight .basic{
        左端の余白:-27px;
}
.eyes{
        幅:55px;
        高さ:55ピクセル;
        背景:#ff0000;
        位置:絶対;
        トップ:8ピクセル;
        国境半径:60%;
        ボックスシャドウ:0 0 2px 4px #bd0000 インセット、0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
        幅:64%;
        身長:64%;
        背景:#ff0000;
        位置:絶対;
        右:0;
        left:0;
        トップ:10px;
        マージン:0 オート;
        国境半径:60%;
        ボックスシャドウ:0 0 2px 0 #b20000 インセット;
}
.eyes .line:before{
        内容:";
        display:block;
        幅:10px;
        高さ:11px;
        位置:絶対;
        左:3px;
        トップ:4px;
        Z指数:100;
        国境半径:60%;
        背景画像:radial-gradient(circle, rgb(225,225,225), rgb(225,225,225), rgba(225,225,225,0.7), rgba(225,225,225,0.3));
        -webkit-background-image:radial-gradient(circle, rgb(225,225,225), rgb(225,225,225), rgba(225,225,225,0.7), rgba(225,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,225,0.3));
}
.eyes .line:after{
        内容:";
        display:block;
        幅:10px;
        高さ:10ピクセル;
        位置:絶対;
        背景:#000;
        右:0;
        左:-1px;
        トップ:13px;
        Z指数:100;
        マージン:0 オート;
        国境半径:60%;
        トランスフォーム:ローテーション(150度);
        -webkit-transform:rotate(150度);
        -o変換:回転(150度);
        アニメーション:カラー20秒イーズイン無限;
        -webkit-animation:colour 20s イージーイン無限;
        -o-animation:カラー20秒イーズイン無限;
}
@keyframes色{
        0%{背景:#000; }
        35%{背景:#000; }
        40%{背景:#f00; }
        100%{背景:#f00; }
}
@-webkit-keyframes color{
        0%{背景:#000; }
        35%{背景:#000; }
        40%{背景:#f00; }
        100%{背景:#f00; }
}
@-o-キーフレーム カラー{
        0%{背景:#000; }
        35%{背景:#000; }
        40%{背景:#f00; }
        100%{背景:#f00; }
}
/*******三勾玉 开始*******/
.hook{
        幅:92%;
        身長:92%;
        位置:絶対;
        右:0;
        left:0;
        トップ:5%;
        マージン:0 オート;
        国境半径:60%;
}
.hook .bar{
        display:block;
        幅:100%;
        身長:100%;
        位置:絶対;
        left:0;
        top:0;
        国境半径:60%;
}
.hook .bar b{
        display:block;
        幅:8px;
        高さ:8ピクセル;
        背景:#000;
        位置:絶対;
        left:0;
        下:0;
        国境半径:60%;
}
.hook .bar b:after{
        内容:";
        幅:8px;
        高さ:8ピクセル;
        border-color:transparent transparent #000 transparent;
        border-style:solid;
        border-width:0 5px 0;
        位置:絶対;
        トップ:-1px;
        左:-3px;
        Z指数:100;
        国境半径:0 0 0 70%;
        トランスフォーム:回転(-75度);
        -webkit-transform:rotate(-75deg);
        -o変換:回転(-75度);
}
.hook .bar:nth-child(1){
        transform:rotate(10deg);
        -webkit-transform:rotate(10deg);
        -o変換:回転(10度);
}
.hook .bar:nth-child(2){
        トランスフォーム:ローテーション(130度);
        -webkit-transform:rotate(130度);
        -o変換:回転(130度);
}
.hook .bar:nth-child(3){
        トランスフォーム:ローテーション(250度);
        -webkit-transform:rotate(250度);
        -o変換:回転(250度);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
        幅:93%;
        身長:93%;
        位置:絶対;
        右:0;
        左:0px;
        トップ:2ペンス;
        マージン:0 オート;
        背景:#000;
        国境半径:60%;
}
.tube .bar{
        display:block;
        幅:10px;
        高さ:20ピクセル;
        border-style:solid;
        border-width:0 0 0 10px;
        border-color:透明で透明な黒;
        位置:絶対;
        境界半径:100% 0 0 0;
}
.tube .bar:nth-child(1){
        トップ:-10px;
        左:2px;
        transform:rotate(-10deg);
}
.tube .bar:nth-child(2){
        ボトム:0px;
        右:-10px;
        トランスフォーム:回転(105度);
        -webkit-transform:rotate(105度);
        -o-変換:回転(105度);
}
.tube .bar:nth-child(3){
        下部:-3px;
        左:-10px;
        トランスフォーム:回転(235度);
        -webkit-transform:rotate(235度);
        -o変換:回転(235度);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
        幅:130px;
        高さ:70ピクセル;
        位置:絶対;
        オーバーフロー:隠し;
        top:0;
        left:0;
        border-radius:0 70px 0 50px;
}
.trans .bar{
        display:block;
        幅:9px;
        身長:9px;
        背景:#000;
        位置:絶対;
        トップ:50%;
        Z指数:2;
        マージン:-4px 0 0 -4px;
        国境半径:60%;
}
.trans .bar:after{        
        内容:";
        display:block;
        幅:11px;
        高さ:12px;
        位置:絶対;
        トップ:-13ピクセル;
        左:-13px;
        Z指数:100;
        国境半径:60%;
        背景:RGBA(250,250,250,.85);
}
.pull左 .trans .bar{
        transform:skewX(-15deg);
        -webkit-transform:skewX(-15deg);
        -o-変換:skewX(-15deg);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
        transform:skewX(-15deg) スケール(-1,1);
        -webkit-transform:skewX(-15deg) スケール(-1,1);
        -o-変換:skewX(-15deg)スケール(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-狭い{
        アニメーション:アニ・ナロー20年代イーズアウト・インフィニット;
        -webkit-animation:ani-狭い20秒イーズアウト無限;
        -o-animation:ani-狭い20秒イーズアウト無限;
}
@keyframes ani-narrow{
        0%{不透明度:1; transform:scale(1); }
        5%{不透明度:1; transform:scale(1); }
        10%{opacity:0; transform:scale(0); }
        87%{不透明度:0; transform:scale(0); }
        90%{不透明度:1; transform:scale(1); }
        100%{opacity:1; transform:scale(1); }
}
@-webkit-keyframes ani-narrow{
        0%{不透明度:1; -webkit-transform:scale(1); }
        5%{不透明度:1; -webkit-transform:scale(1); }
        10%{opacity:0; -webkit-transform:scale(0); }
        87%{不透明度:0; -webkit-transform:scale(0); }
        90%{不透明度:1; -webkit-transform:scale(1); }
        100%{opacity:1; -webkit-transform:scale(1); }
}
@-o-keyframes ani-narrow{
        0%{不透明度:1; -o-変換:scale(1); }
        5%{不透明度:1; -o-変換:scale(1); }
        10%{opacity:0; -o-transform:scale(0); }
        87%{不透明度:0; -o-transform:scale(0); }
        90%{不透明度:1; -o-変換:scale(1); }
        100%{opacity:1; -o-変換:scale(1); }
}
.aniズーム{
        アニメーション:アニズーム20秒リニア無限;
        -webkit-animation:ani-zoom 20秒のリニア無限;
        -o-animation:ani-zoom 20秒 線形無限;
}
@keyframes ani-zoom{
        0%{不透明度:0; transform:scale(0); }
        5%{不透明度:0; transform:scale(0); }
        8%{不透明度:1; transform:scale(1); }
        60%{不透明度:1; transform:scale(1); }
        62%{不透明度:0; transform:scale(1.5); }
        100%{opacity:0; transform:scale(0); }
}
@-webkit-keyframes ani-zoom{
        0%{不透明度:0; -webkit-transform:scale(0); }
        5%{不透明度:0; -webkit-transform:scale(0); }
        8%{不透明度:1; -webkit-transform:scale(1); }
        60%{不透明度:1; -webkit-transform:scale(1); }
        62%{不透明度:0; -webkit-transform:scale(1.5); }
        100%{opacity:0; -webkit-transform:scale(0); }
}
@-o-keyframes ani-zoom{
        0%{不透明度:0; -o-transform:scale(0); }
        5%{不透明度:0; -o-transform:scale(0); }
        8%{不透明度:1; -o-変換:scale(1); }
        60%{不透明度:1; -o-変換:scale(1); }
        62%{不透明度:0; -o-変換:スケール(1.5); }
        100%{opacity:0; -o-transform:scale(0); }
}
.ani回転フック{
        アニメーション:ani-rotate フック20秒のイージーイン無限;
        -webkit-animation:ani-rotate フック20秒のイージーイン無限;
        -o-animation:ani-rotate フック20秒のイーズイン無限;
}
@keyframes ani-rotateHook{
        0%{不透明度:0; transform:scale(0) rotate(0); }
        9%{不透明度:0; transform:scale(0) rotate(0); }
        13%{不透明度:1; transform:scale(1) rotate(-360deg); }
        35%{不透明度:1; transform:scale(1) rotate(-360deg); }
        38%{opacity:0; transform:scale(1.8) rotate(-540度); }
        100%{opacity:0; transform:scale(0) rotate(0); }
}
@-webkit-keyframes ani-rotateHook{
        0%{不透明度:0; -webkit-transform:scale(0) rotate(0); }
        9%{不透明度:0; -webkit-transform:scale(0) rotate(0); }
        13%{不透明度:1; -webkit-transform:scale(1) rotate(-360deg); }
        35%{不透明度:1; -webkit-transform:scale(1) rotate(-360deg); }
        38%{opacity:0; -webkit-transform:scale(1.8) rotate(-540deg); }
        100%{opacity:0; -webkit-transform:scale(0) rotate(0); }
}
@-o-keyframes ani-rotateHook{
        0%{不透明度:0; -o-変換:scale(0) rotate(0); }
        9%{不透明度:0; -o-変換:scale(0) rotate(0); }
        13%{不透明度:1; -o-変換:scale(1) rotate(-360deg); }
        35%{不透明度:1; -o-変換:scale(1) rotate(-360deg); }
        38%{opacity:0; -o変換:スケール(1.8) 回転(-540度); }
        100%{opacity:0; -o-変換:scale(0) rotate(0); }
}
.ani-rotateTube{
        アニメーション:ani-rotateチューブ20秒のイーズインアウト無限;
        -webkit-animation:ani-rotateTube 20s イーズインアウト無限;
        -o-animation:ani-rotateチューブ20秒のイーズインアウト無限;
}
@keyframes ani-rotateTube{
        0%{不透明度:0; transform:scale(0) rotate(0); }
        35%{不透明度:0; transform:scale(0) rotate(0); }
        40%{不透明度:1; transform:scale(1) rotate(-360deg); }
        60%{不透明度:1; transform:scale(1) rotate(-360deg); }
        100%{opacity:1; transform:scale(1) rotate(-360deg); }
}
@-webkit-keyframes ani-rotateTube{
        0%{不透明度:0; -webkit-transform:scale(0) rotate(0); }
        35%{不透明度:0; -webkit-transform:scale(0) rotate(0); }
        40%{不透明度:1; -webkit-transform:scale(1) rotate(-360deg); }
        60%{不透明度:1; -webkit-transform:scale(1) rotate(-360deg); }
        100%{opacity:1; -webkit-transform:scale(1) rotate(-360deg); }
}
@-o-keyframes ani-rotateTube{
        0%{不透明度:0; -o-変換:scale(0) rotate(0); }
        35%{不透明度:0; -o-変換:scale(0) rotate(0); }
        40%{不透明度:1; -o-変換:scale(1) rotate(-360deg); }
        60%{不透明度:1; -o-変換:scale(1) rotate(-360deg); }
        100%{opacity:1; -o-変換:scale(1) rotate(-360deg); }
}
.ani影{
        アニメーション:ani-shadow 20s linear infinite;
        -webkit-animation:ani-shadow 20s linear infinite;
        -o-animation:ani-shadow 20s linear infinite;
}
@keyframes アニシャドウ{
        0%{不透明度:0; 箱影:なし; }
        58%{不透明度:0; 箱影:なし; }
        64%{不透明度:1; ボックスシャドウ:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        87%{不透明度:1; ボックスシャドウ:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        90%{opacity:0; 箱影:なし; }
        100%{opacity:0; 箱影:なし; }
}
@-webkit-keyframes ani-shadow{
        0%{不透明度:0; 箱影:なし; }
        58%{不透明度:0; 箱影:なし; }
        64%{不透明度:1; ボックスシャドウ:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        87%{不透明度:1; ボックスシャドウ:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        90%{opacity:0; 箱影:なし; }
        100%{opacity:0; 箱影:なし; }
}
@-o-keyframes ani-shadow{
        0%{不透明度:0; 箱影:なし; }
        58%{不透明度:0; 箱影:なし; }
        64%{不透明度:1; ボックスシャドウ:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        87%{不透明度:1; ボックスシャドウ:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 0 44px #a6a6a6,0 0 0 46px #000; }
        90%{opacity:0; 箱影:なし; }
        100%{opacity:0; 箱影:なし; }
}
.ani-狭く、.ani-ズーム、.ani-回転フック、
.ani-rotateチューブ、.ani-影、.eyes .line:after{
        animation-fill-mode:forwards;
        -webkit-animation-fill-mode:both;
        -o-animation-fill-mode:both;
}
</style>
</head>

<body>
<div class="container">
        <!-- 左目が始まる - >
    <div class="eyesBoxs pullLeft">
                <div class="profile skewLeft"></div>
        <div class="shadow skewLeft"></div>
        <div class="basic ani-narrow"></div>
        <div class="eyes ani-zoom">
            <div class="line">           
                <div class="hook ani-rotateHook">
                        <span class=「bar」><b></b></span>
                    <span class=「bar」><b></b></span>
                    <span class=「bar」><b></b></span>
                </div>
                <div class="tube ani-rotateTube">
                        <span クラス=「bar」></span>
                        <span クラス=「bar」></span>
                        <span クラス=「bar」></span>
                </div>
            </div>
        </div>
        <div class="trans skewLeft">
                <span class="bar ani-shadow"></span>
        </div>
    </div>
        左目の端<!-- - >
    右目が<!-- - >
    <div class="eyesBoxs pullRight">
                <div class="profile skewRight"></div>
        <div class="shadow skewRight"></div>
        <div class="basic ani-narrow"></div>
        <div class="eyes ani-zoom">
            <div class="line">           
                <div class="hook ani-rotateHook">
                        <span class=「bar」><b></b></span>
                    <span class=「bar」><b></b></span>
                    <span class=「bar」><b></b></span>
                </div>
                <div class="tube ani-rotateTube">
                        <span クラス=「bar」></span>
                        <span クラス=「bar」></span>
                        <span クラス=「bar」></span>
                </div>
            </div>
        </div>
        <div class="trans skewRight">
                <span class="bar ani-shadow"></span>
        </div>
    </div>
        <!--目の先端は>
</div>
</body>
[/</html>mw_shl_code]

スコア

参加者数1MB+1 貢献する+1 倒れる 理由
管理者 + 1 + 1 一つみたいに!

すべての評価を見る





先の：涙があふれました! Microsoftは2014年11月13日(北京時間)に.NETオープンソースを発表しました
次に：鼓動する電子時計
 地主| 掲載地 2014/11/14 17:57:04 |
この投稿は2014年11月14日18:00に天霞無双によって最後に編集されました。


掲載地 2014/11/14 17:58:15 |
最初に集めた良いもの
掲載地 2014/11/14 21:53:23 |
片目にこんなにコードが多すぎるの?
 地主| 掲載地 2014/11/14 22:12:26 |
北城織りの温度 22度 2014年11月14日 21:53に投稿
片目にこんなにコードが多すぎるの?

ただの目だけじゃない! 一度オンラインで実行すればわかります
掲載地 2014/11/14 22:23:43 |
すごいし、転生の目もある
免責事項：
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。
Mail To:help@itsvse.com