CSS3 を使用してピカチュウのアニメーション壁紙を作成する例

CSS3 を使用してピカチュウのアニメーション壁紙を作成する例

文章

さて、次はレンダリングを見せましょう。画像を見て初めて理解することに興味が湧くでしょう。そうでなければ退屈で、見る気にもなれません。

PS: 私のアニメーションのサイズは比較的大きい (720 x 1280) ため、この GIF アニメーションを記録するために半分に縮小しました。しかし、実際には、元のサイズで表示する方が良いでしょう。そのためには、記事の最後に記載されているアドレスからダウンロードできます。

話を元に戻しましょう。実は、このアニメーション効果は難しくありません。構造が非常にシンプルで明確であることがわかります。シンプルですが、効果は非常に良いので、ぜひやってみたいと思います。

さて、とてもシンプルなので、私が実装した HTML 構造を見てみましょう。

<div class="pikachu_container">
    <div class="header">
        <div class="header_main">
            <span class="バッテリー"></span>
            <span class="clock" id="nowTime">09:00</span>
        </div>
    </div>
    <div class="time">
        <h1>09:00</h1>
        <p id="date">2015年9月3日</p>
        <p>ピカチュウのかわいい携帯壁紙</p>
    </div>
    <div class="body">
        <div class="目">
            <div class="leftEye"></div>
            <div class="rightEye"></div>
        </div>
        <div class="鼻"></div>
        <div class="頬">
            <div class="leftCheek"></div>
            <div class="rightCheek"></div>
        </div>
        <div class="口">
            <div class="口_メイン">
                <div class="舌"></div>
            </div>
        </div>
        <div class="hands">
            <div class="leftHand">
                <div class="leftHand_main">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <div class="leftshadow"></div>
                </div>
            </div>
            <div class="rightHand">
                <div class="rightHand_main">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <div class="rightshadow"></div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box_main">
                <div class="box_circle"></div>
            </div>
        </div>
    </div>
    <p class="author">@JR</p>
</div>

メインの構造は比較的明確で、上部に電池と時間、真ん中に時間と日付、そしてピカチュウの本体に分かれています。ピカチュウの体は目、鼻、口、ほっぺ、手、ボールに分かれています。

HTML 構造を構築したら、測定した画像の各部分のサイズに応じて CSS スタイルを記述します。

次に、各部分の CSS 実装コードを共有します。

まず初期化する

*{
    マージン:0;
    パディング:0;
}
体{
    フォント ファミリ:"Microsoft YaHei";
    色:#fff;
}
.pikachu_container{
    幅:720ピクセル;
    高さ:1280ピクセル;
    背景:rgb(251,205,60);
    位置:相対;
    オーバーフロー:非表示;
    マージン:0 自動;
}

バッテリーと時間のトップ

.pikachu_container .header{
    幅:100%;
    高さ:50px;
    行の高さ:50px;
    位置:相対;
    トップ:0;
    左:0;
}
.pikachu_container .header .header_main{
    幅:160ピクセル;
    高さ:100%;
    位置:絶対;
    右:0;
    トップ:0;
    フォントサイズ:30px;
    オーバーフロー:非表示;
}
.header .header_main .battery{
    表示:インラインブロック;
    幅:34px;
    高さ:18px;
    境界線:3px 実線 #fff;
    境界線の半径:5px;
    位置:絶対;
    上位:50%;
    左:23px;
    上マージン:-12px;
}
.header .header_main .battery:after{
    コンテンツ：'';
    表示:インラインブロック;
    幅:5px;
    高さ:14px;
    背景:#fff;
    位置: 絶対;
    上:2px;
    右:2px;
    -webkit-animation:charging 2s linear infinite;
    -moz-animation:charging 2s linear infinite;
    -o-アニメーション: 2 秒間の無限充電;
    -ms-animation:chargeng 2s linear infinite;
    アニメーション: 2 秒間無限に充電します。
}
@-webkit-keyframes 充電中
    0%{
        幅:5px;
    }
    100%{
        幅:30px;
    }
}
@-moz-keyframes 充電中
    0%{
        幅:5px;
    }
    100%{
        幅:30px;
    }
}
@-o-キーフレーム充電中{
    0%{
        幅:5px;
    }
    100%{
        幅:30px;
    }
}
@-ms-keyframes 充電中{
    0%{
        幅:5px;
    }
    100%{
        幅:30px;
    }
}
@keyframes 充電中{
    0%{
        幅:5px;
    }
    100%{
        幅:30px;
    }
}
.header .header_main .battery:before{
    コンテンツ：'';
    表示:ブロック;
    幅:3px;
    高さ:12px;
    背景:#fff;
    左上の境界線の半径:4px;
    左下の境界線の半径:4px;
    位置: 絶対;
    上:3px;
    左:-6px;
}
.header .header_main .clock{
    位置: 絶対;
    右:14px;
    トップ:0;
}

中央日時

.pikachu_container .time{
    幅:100%;
    高さ:250px;
    位置: 相対的;
    上:70px;
    左:0;
    テキスト配置:中央;
}
.pikachu_container .time h1{
    フォントサイズ:90px;
    文字間隔:8px;
    テキストシャドウ:-1px 2px 3px rgba(0,0,0,0.5);
}
.pikachu_container .time p:nth-of-type(1){
    フォントサイズ:30px;
    上マージン:10px;
}
.pikachu_container .time p:nth-of-type(2){
    フォントサイズ:26px;
    上マージン:8px;
    -webkit-animation:textShake 1s 無限;
    -moz-animation:textShake 1s 無限;
    -o-animation:textShake 1s 無限;
    -ms-animation:textShake 1s 無限;
    アニメーション:テキストシェイク 1 秒 無限;
}
@-webkit-keyframes テキストシェイク{
    0%、20%、40%、60%、80%、100%{
        -webkit-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%、15%、25%、35%、45%、55%、65%、75%、85%、95%{
        -webkit-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%、30%、50%、70%、90%{
        -webkit-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-moz-keyframes テキストシェイク{
    0%、20%、40%、60%、80%、100%{
        -moz-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%、15%、25%、35%、45%、55%、65%、75%、85%、95%{
        -moz-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%、30%、50%、70%、90%{
        -moz-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-o-keyframes テキストシェイク{
    0%、20%、40%、60%、80%、100%{
        -o-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%、15%、25%、35%、45%、55%、65%、75%、85%、95%{
        -o-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%、30%、50%、70%、90%{
        -o-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-ms-keyframes テキストシェイク{
    0%、20%、40%、60%、80%、100%{
        -ms-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%、15%、25%、35%、45%、55%、65%、75%、85%、95%{
        -ms-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%、30%、50%、70%、90%{
        -ms-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@keyframes テキストシェイク{
    0%、20%、40%、60%、80%、100%{
        変換:回転(1度)、3D変換(2px、-2px、0);
    }
    5%、15%、25%、35%、45%、55%、65%、75%、85%、95%{
        変換:回転(0度)、3D変換(0px,0px,0);
    }
    10%、30%、50%、70%、90%{
        変換:回転(-1度)、3D変換(-2px、2px、0);
    }
}

ピカチュウの目

.pikachu_container .body{
    幅:100%;
    高さ:940px;
    位置: 相対的;
    上:50px;
    左:0;
}
.体 .目{
    位置: 相対的;
}
.body .eyes .leftEye、.body .eyes .rightEye{
    幅:85px;
    高さ:85px;
    境界線:5px実線rgb(2,0,1);
    背景:rgb(51,51,51);
    境界線の半径:50%;
    位置: 絶対;
    上:40px;
}
.body .eyes .leftEye{
    左:150px;
}
.body .eyes .rightEye{
    右:150px;
}
.body .eyes .leftEye:after、.body .eyes .rightEye:after{
    コンテンツ：'';
    表示:ブロック;
    幅:40px;
    高さ:40px;
    背景:#fff;
    境界線:5px実線rgb(2,0,1);
    境界線の半径:50%;
    位置:絶対;
    上:2px;
    左:2px;
    -webkit-animation:eyeMove 3s 無限;
    -moz-animation:eyeMove 3s 無限;
    -o-animation:eyeMove 3s 無限;
    -ms-animation:eyeMove 3s 無限;
    アニメーション:eyeMove 3s 無限;
}
@-webkit-keyframes eyeMove{
    0%,100%{
        上:2px;
        左:2px;
    }
    30%、60%、70%{
        上:0px;
        左:17px;
    }
    40%
        上:0px;
        左:21px;
    }
    50%{
        上:0px;
        左:13px;
    }
    80%、90%{
        上:17px;
        左:17px;
    }
}
@-moz-keyframes eyeMove{
    0%,100%{
        上:2px;
        左:2px;
    }
    30%、60%、70%{
        上:0px;
        左:17px;
    }
    40%
        上:0px;
        左:21px;
    }
    50%{
        上:0px;
        左:13px;
    }
    80%、90%{
        上:17px;
        左:17px;
    }
}
@-o-keyframes eyeMove{
    0%,100%{
        上:2px;
        左:2px;
    }
    30%、60%、70%{
        上:0px;
        左:17px;
    }
    40%
        上:0px;
        左:21px;
    }
    50%{
        上:0px;
        左:13px;
    }
    80%、90%{
        上:17px;
        左:17px;
    }
}
@-ms-keyframes eyeMove{
    0%,100%{
        上:2px;
        左:2px;
    }
    30%、60%、70%{
        上:0px;
        左:17px;
    }
    40%
        上:0px;
        左:21px;
    }
    50%{
        上:0px;
        左:13px;
    }
    80%、90%{
        上:17px;
        左:17px;
    }
}
@keyframes eyeMove{
    0%,100%{
        上:2px;
        左:2px;
    }
    30%、60%、70%{
        上:0px;
        左:17px;
    }
    40%
        上:0px;
        左:21px;
    }
    50%{
        上:0px;
        左:13px;
    }
    80%、90%{
        上:17px;
        左:17px;
    }
}

ピカチュウの鼻

.body .nose{
    位置:絶対;
    幅:28px;
    高さ:18px;
    背景:rgb(51,51,51);
    境界線:4px実線rgb(2,0,1);
    境界線の半径:36px/26px;
    残り:50%;
    上:100ピクセル;
    左マージン:-18px;
    -webkit-animation:noseMove 3s 無限;
    -moz-animation:noseMove 3s 無限;
    -o-animation:noseMove 3s 無限;
    -ms-animation:noseMove 3s 無限;
    アニメーション:noseMove 3s infinite;
}
@-webkit-keyframes ノーズムーブ{
    0%、49%、51%、100%{
        幅:28px;
        高さ:18px;
        左マージン:-18px;
    }
    50%{
        幅:34px;
        高さ:20px;
        左マージン:-21px;
    }
}
@-moz-keyframes 鼻を動かす{
    0%、49%、51%、100%{
        幅:28px;
        高さ:18px;
        左マージン:-18px;
    }
    50%{
        幅:34px;
        高さ:20px;
        左マージン:-21px;
    }
}
@-o-keyframes noseMove{
    0%、49%、51%、100%{
        幅:28px;
        高さ:18px;
        左マージン:-18px;
    }
    50%{
        幅:34px;
        高さ:20px;
        左マージン:-21px;
    }
}
@-ms-keyframes 鼻を動かす{
    0%、49%、51%、100%{
        幅:28px;
        高さ:18px;
        左マージン:-18px;
    }
    50%{
        幅:34px;
        高さ:20px;
        左マージン:-21px;
    }
}
@keyframes 鼻を動かす{
    0%、49%、51%、100%{
        幅:28px;
        高さ:18px;
        左マージン:-18px;
    }
    50%{
        幅:34px;
        高さ:20px;
        左マージン:-21px;
    }
}

ピカチュウのほっぺ

.body .cheek{
    位置: 相対的;
}
.body .cheek .leftCheek、.body .cheek .rightCheek{
    幅:120ピクセル;
    高さ:120px;
    境界線:5px実線rgb(2,0,1);
    背景:rgb(231,74,57);
    境界線の半径:50%;
    位置: 絶対;
    上:170px;
    -webkit-animation:cheekMove 3s 無限;
    -moz-animation:cheekMove 3s 無限;
    -o-animation:cheekMove 3s 無限;
    -ms-animation:cheekMove 3s 無限;
    アニメーション:cheekMove 3s 無限;
}
@-webkit-keyframes cheekMove{
    0%、46%、54%、100%{
        幅:120ピクセル;
        高さ:120px;
        上:170px;
    }
    50%{
        幅:100ピクセル;
        高さ:100px;
        上:180ピクセル;
    }
}
@-moz-keyframes 頬移動{
    0%、46%、54%、100%{
        幅:120ピクセル;
        高さ:120px;
        上:170px;
    }
    50%{
        幅:100ピクセル;
        高さ:100px;
        上:180ピクセル;
    }
}
@-o-keyframes cheekMove{
    0%、46%、54%、100%{
        幅:120ピクセル;
        高さ:120px;
        上:170px;
    }
    50%{
        幅:100ピクセル;
        高さ:100px;
        上:180ピクセル;
    }
}
@-ms-keyframes 頬を動かす{
    0%、46%、54%、100%{
        幅:120ピクセル;
        高さ:120px;
        上:170px;
    }
    50%{
        幅:100ピクセル;
        高さ:100px;
        上:180ピクセル;
    }
}
@keyframes 頬を動かす{
    0%、46%、54%、100%{
        幅:120ピクセル;
        高さ:120px;
        上:170px;
    }
    50%{
        幅:100ピクセル;
        高さ:100px;
        上:180ピクセル;
    }
}
.body .cheek .leftCheek{
    左:60px;
}
.body .cheek .rightCheek{
    右:60px;
}

ピカチュウの口

.体 .口{
    位置: 相対的;
    幅:180ピクセル;
    高さ:220px;
    残り:50%;
    上:180ピクセル;
    左マージン:-90px;
}
.body .mouth .mouth_main{
    位置: 絶対;
    左:0;
    上:0px;
    幅:180ピクセル;
    高さ:220px;
    背景:rgb(132,37,41);
    境界線:4px実線rgb(2,0,1);
    右上の境界線の半径:15px 15px;
    左下の境界線の半径: 250px 570px;
    右下の境界線の半径: 250px 590px;
    オーバーフロー:非表示;
    -webkit-animation:mouthMove 3s 無限;
    -moz-animation:mouthMove 3s 無限;
    -o-animation:mouthMove 3s 無限;
    -ms-animation:mouthMove 3s 無限;
    アニメーション:口を3秒動かす無限;
}
@-webkit-keyframes 口を動かす{
    0%、46%、54%、100%{
        高さ:220px;
    }
    50%{
        高さ:20px;
    }
}
@-moz-keyframes 口を動かす{
    0%、46%、54%、100%{
        高さ:220px;
    }
    50%{
        高さ:20px;
    }
}
@-o-keyframes 口を動かす{
    0%、46%、54%、100%{
        高さ:220px;
    }
    50%{
        高さ:20px;
    }
}
@-ms-keyframes 口を動かす{
    0%、46%、54%、100%{
        高さ:220px;
    }
    50%{
        高さ:20px;
    }
}
@keyframes 口を動かす{
    0%、46%、54%、100%{
        高さ:220px;
    }
    50%{
        高さ:20px;
    }
}
.body .mouth:after、.body .mouth:before{
    コンテンツ：'';
    表示:ブロック;
    幅:112ピクセル;
    高さ:38px;
    背景:rgb(251,205,60);
    ボーダー下部:4px 実線 rgb(2,0,1);
    位置: 絶対;
    上:-13px;
    zインデックス:3;
}
.body .mouth:after{
    左境界線:4px 実線 rgb(2,0,1);
    左下の境界線の半径: 340px 180px;
    左:-30px;
    -webkit-transform:回転(-24度);
    -moz-transform:回転(-24度);
    -o-transform:回転(-24度);
    -ms-transform:回転(-24度);
    変換:回転(-24度);
}
.body .mouth:before{
    右ボーダー:4px 実線 rgb(2,0,1);
    右下の境界線の半径: 340px 180px;
    右:-30px;
    -webkit-transform:rotate(24度);
    -moz-transform:回転(24度);
    -o-transform:回転(24度);
    -ms-transform:回転(24度);
    変換:回転(24度);
}
.体 .口 .舌{
    幅:200px;
    高さ:200px;
    背景:rgb(221,102,106);
    上マージン:40px;
    左マージン:-10px;
    左上の境界線の半径: 380px;
    右上の境界線の半径: 420px 380px;
    オーバーフロー:非表示;
}

ピカチュウの口はまだ熟考する価値があり、最も重要なことは、この効果を実現するために border-radius を使用することです。この丸い角の機能は非常に強力ですが、どのように使用するかによって効果は大きく変わります。

ピカチュウのボール

.body .box{
    幅:82ピクセル;
    高さ:82px;
    境界線:3px 実線 #fff;
    境界線の半径:50%;
    位置: 相対的;
    ボックスの影:0 0 5px rgba(255,255,255,0.9);
    残り:50%;
    上:320ピクセル;
    左マージン:-44px;
    -webkit-animation:box-rotate 4s easy-in-out 無限交互;
    -moz-animation:box-rotate 4s イーズインアウト 無限 交互に;
    -o-animation:box-rotate 4s easy-in-out 無限交互;
    -ms-animation:box-rotate 4s easy-in-out 無限交互;
    アニメーション:box-rotate 4s easy-in-out 無限交互;
}
@-webkit-keyframes ボックス回転{
    0%、90%、100%{
        -webkit-transform:rotate(0度);
    }
    40%,50%{
        -webkit-transform:rotate(360度);
        ボックスの影:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-moz-keyframes ボックス回転{
    0%、90%、100%{
        -moz-transform:回転(0度);
    }
    40%,50%{
        -moz-transform:回転(360度);
        ボックスの影:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-o-keyframes ボックス回転{
    0%、90%、100%{
        -o-transform:回転(0度);
    }
    40%,50%{
        -o-transform:回転(360度);
        ボックスの影:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-ms-keyframes ボックス回転{
    0%、90%、100%{
        -ms-transform:回転(0度);
    }
    40%,50%{
        -ms-transform:回転(360度);
        ボックスの影:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@keyframes ボックス回転{
    0%、90%、100%{
        変換:回転(0度);
    }
    40%,50%{
        変換:回転(360度);
        ボックスの影:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
.body .box .box_main{
    幅:80ピクセル;
    高さ:80px;
    境界線の半径:50%;
    背景:rgb(236,2,3);
    境界線:1px 実線 #333;
    位置: 絶対;
    トップ:0;
    左:0;
    オーバーフロー:非表示;
}
.body .box .box_main:before{
    コンテンツ：'';
    表示:ブロック;
    幅:80ピクセル;
    高さ:40px;
    背景:#fff;
    位置:絶対;
    下:0;
    左:0;
}
.body .box .box_main:after{
    コンテンツ：'';
    表示:ブロック;
    幅:80ピクセル;
    高さ:12px;
    背景:rgb(59,53,67);
    位置:絶対;
    上位:50%;
    左:0;
    上マージン:-6px;
}
.body .box .box_main .box_circle{
    幅:24px;
    高さ:24px;
    境界線:8px実線rgb(59,53,67);
    境界線の半径:50%;
    背景:#fff;
    位置: 絶対;
    残り:50%;
    上位:50%;
    左マージン:-20px;
    上マージン:-20px;
    zインデックス:5;
}
.body .box .box_main .box_circle:after{
    コンテンツ：'';
    表示:ブロック;
    幅:16px;
    高さ:16px;
    境界線:1px実線rgb(59,53,67);
    境界線の半径:50%;
    位置:絶対;
    上位:50%;
    残り:50%;
    左マージン:-9px;
    上マージン:-9px;
    -webkit-animation:bg_change 4s 無限;
    -moz-animation:bg_change 4s 無限;
    -o-animation:bg_change 4s 無限;
    -ms-animation:bg_change 4s 無限;
    アニメーション:bg_change 4s 無限;
}
@-webkit-keyframes bg_c​​hange{
    0%、40%、60%、90%、100%{
        背景:なし;
    }
    50%{
        背景:rgb(236,2,3);
    }
}
@-moz-keyframes bg_c​​hange{
    0%、40%、60%、90%、100%{
        背景:なし;
    }
    50%{
        背景:rgb(236,2,3);
    }
}
@-o-keyframes bg_c​​hange{
    0%、40%、60%、90%、100%{
        背景:なし;
    }
    50%{
        背景:rgb(236,2,3);
    }
}
@-ms-keyframes bg_c​​hange{
    0%、40%、60%、90%、100%{
        背景:なし;
    }
    50%{
        背景:rgb(236,2,3);
    }
}
@keyframes bg_c​​hange{
    0%、40%、60%、90%、100%{
        背景:なし;
    }
    50%{
        背景:rgb(236,2,3);
    }
}

追記：手に関しては、事前にコードがたくさんあり、記事が少し長くなってしまったので、アップロードはしません。必要な場合は、私の github からダウンロードできます。

この場合のgithubダウンロードアドレス: https://github.com/JR93/pikachu

オリジナルリンク: https://www.cnblogs.com/jr1993/p/4779678.html

上記は、CSS3を使用してピカチュウのアニメーション壁紙を作成する例の詳細です。CSS3を使用してピカチュウの壁紙を作成する方法の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

<<:  clearfixとclearの例

>>:  LinuxシステムでのSystemC環境設定方法

推薦する

FileZilla を使用して FTP サーバーに接続するプロセスの図

最初にサーバー上に FTP サーバーをセットアップし始めたとき、接続できないことがわかったので、Fi...

HTML 再利用テクニック

HTML の再利用は、あまり話題に上らない言葉です。今日は、この問題を次のようにまとめたいと思います...

CentOS プラットフォーム上で LAMP 環境を素早く構築する方法

この記事では、例を使用して、CentOS プラットフォーム上で LAMP 環境を迅速に構築する方法に...

MySQL 8.0.17 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

JavaScript イベント委任の原則

目次1. イベント委任とは何ですか? 2. イベント委任の原則3. イベント委託の役割1. イベント...

CSS3で作られたレインボーボタンスタイル

結果： 実装コード: html <div class="buttons"&...

CSS最適化スキルの自己実践体験

1. CSS スプライトを使用します。利点は、CSS で使用される小さな画像を 1 つの大きな画像に...

Adobe Brackets の簡単な使い方のグラフィックチュートリアル

Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...

Vue の動的コンポーネントと非同期コンポーネントの詳細な理解

1. 動的コンポーネント <!DOCTYPE html> <html> &l...

Baidu サイト検索が https をサポートしていない問題の解決策 (テスト済み)

最近、携帯電話で https が有効になりました。緑色のロックを取得するには、次の問題を解決する必要...

Apache Webサーバーのインストールと設定方法

信頼性が高く、人気があり、簡単に構成できる Web サーバーである Apache で独自の Web ...

MySQL Null は 5 つの問題を引き起こす可能性があります (すべて致命的)

目次1. カウントデータが失われる解決2. 明確なデータ損失3.データ損失を選択解決4. Nullポ...

MySQLからデータをインポートする際の不正なフォーマット、インポートの遅延、データ損失などの問題を迅速に解決します。

遅い問題を完全に解決したい場合は、MySQL を MySQL 8.0 にアップグレードすることをお勧...

LinuxにPHP7をインストールする方法の詳細な説明

Linux に PHP7 をインストールするにはどうすればいいですか? 1. 依存パッケージをインス...

Ubuntu で apt-get を使用して mysql をインストールおよび完全にアンインストールする方法の詳細な説明

1. mysqlをインストールします。 udo apt-getでmysql-serverをインストー...