css3のシンプルスクロールスタイル第一例 anime_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

css3のシンプルスクロールスタイル第一例 anime_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

w3cschool で CSS3 アニメーションの文法マニュアルを調べたところ、ホームページの「css3 アニメーション」欄にローリング div アニメーションの事例があったので、それを真似して自分で書いてみました。大丈夫だと感じました O( ∩_∩)おはは~

元のアドレスを表示

以下のコードを入力してください:

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>test</title><style>.box {    position: relative;    margin-top: 50px;    height: 60px;}.test {    position: absolute;    top: 0;    left: 0;    width: 100px;    height: 50px;    font:14px/50px Microsoft YaHei;    text-align: center;    color: #fff;    border-radius: 5px;    background-color: #eb5C7e;    -webkit-animation-name: gogogo;    -webkit-animation-duration: 6s;    -webkit-animation-timing-function:ease;    -webkit-animation-iteration-count: infinite;    animation-name: gogogo;    animation-duration: 6s;    animation-timing-function:ease;    animation-iteration-count: infinite;}@-webkit-keyframes gogogo{    0% {         background-color: #eb5C7e;        -webkit-transform: rotate(0);    }    10% {        background-color: #eb5C7e;        -webkit-transform: rotate(0);        }    30%{        background-color: #1b9e55;        left: 0;         -webkit-transform: rotate(30deg);            }    50%{        left: 400px;        background-color: #2a7df8;        -webkit-transform: rotate(0);    }    70%{        left: 400px;        background-color: #2a7df8;        -webkit-transform: rotate(0);    }        100%{         left:0;        background-color: #eb5C7e;        -webkit-transform: rotate(-360deg);    }}@keyframes gogogo{    0% {         background-color: #eb5C7e;        transform: rotate(0);        }    10% {        background-color: #eb5C7e;        transform: rotate(0);        }    30%{        background-color: #1b9e55;        left: 0;         transform: rotate(30deg);            }    50%{        left: 400px;        background-color: #2a7df8;        transform: rotate(0);    }    70%{        left: 400px;        background-color: #2a7df8;        transform: rotate(0);    }        100%{         left:0;        background-color: #eb5C7e;        transform: rotate(-360deg);    }}</style></head><body>    <div class="box">        <div class="test">            翻滚吧        </div>    </div></body></html>

ログイン後にコピー

それでは、効果が見られないかもしれません?ブラウザをアップグレードする時期です ~~~

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。