CSS3アニメーション第二種組み合わせanimation_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3アニメーション第二種組み合わせanimation_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

最初の動きの後に高度な動きを実行し、いくつかの組み合わせアニメーションを追加します。プロット、アニメーションなどはすべて、純粋に 2D、3D、トランジションなどの CSS3 コードの記述方法に慣れるためのものです。効果は下の図に示されています:

コードは次のとおりです (少し長いので折りたたんでください):

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <title>test</title>    <style>        ul,ol,li {            list-style: none;            margin: 0;            padding: 0;        }        .box {            position: relative;            margin-top: 50px;            height: 135px;        }        .talkBox {            position: absolute;            overflow: hidden;        }        .talkBox ul {            position: absolute;            left: 0;            width: 100%;        }        .talkBox ul li{            margin: 0;            padding: 0;            font:12px/22px Microsoft YaHei;            text-align: left;        }        .ufoBox {            position: absolute;            top: 0;            left: 0;            width: 100px;            height: 40px;            text-align: center;            color: #fff;            -webkit-animation-name: gogogo;            -webkit-animation-duration: 6s;            -webkit-animation-delay: 9.5s;            -webkit-animation-timing-function: ease;            -webkit-animation-iteration-count: 2;            animation-name: gogogo;            animation-duration: 6s;            animation-delay: 9.5s;            animation-timing-function:ease;            animation-iteration-count: 2;        }        .talkBox01 {            position: absolute;            top: 0;            left: 115px;            width: 150px;            height: 22px;        }        .talkBox01 ul {            top: 22px;            -webkit-animation-name: talk01;            -webkit-animation-duration: 9.5s;            -webkit-animation-delay: 0.5s;            -webkit-animation-timing-function: ease;            -webkit-animation-fill-mode: forwards;            animation-name: talk01;            animation-duration: 9.5s;            animation-delay: 0.5s;            animation-timing-function: ease;            animation-fill-mode: forwards;        }        .talkBox01 ul li{            color: #6978e6;        }        .ufoBox .ufoTop {            margin: 0 auto;            width: 35px;            height: 15px;            border-radius: 13px 13px 0 0;            background-color: #b37de6;        }        .ufoBox .ufoBody {            width: 100px;            height: 25px;            margin-top: -2px;            font:13px/25px Microsoft YaHei;            border-radius: 50%;            background-color: #eb5C7e;        }        @-webkit-keyframes talk01        {            0% {                top: 22px;            }            15% {                top: 0;            }            30% {                top: -22px;            }            45% {                top: -44px;            }            60%,85% {                top: -66px;            }            95% {                top: -88px;            }            100% {                top: -110px;            }        }        @keyframes talk01        {            0% {                top: 22px;            }            15% {                top: 0;            }            30% {                top: -22px;            }            45% {                top: -44px;            }            60% {                top: -66px;            }            90%, 95% {                top: -88px;            }            100% {                top: -110px;            }        }        @-webkit-keyframes gogogo        {            0%,10% {                 -webkit-transform: rotate(0);            }            30%{                left: 0;                top: 0;                 -webkit-transform: rotate(30deg);                    }            50%{                left: 400px;                top: 55px;                -webkit-transform: rotate(0);            }            70%{                left: 400px;                -webkit-transform: rotate(0);            }                100%{                 left:0;                -webkit-transform: rotate(-360deg);            }        }        @keyframes gogogo        {            0%,10 {                 transform: rotate(0);            }            30%{                left: 0;                top: 0;                 transform: rotate(30deg);                    }            50%{                left: 400px;                top: 55px;                transform: rotate(0);            }            70%{                left: 400px;                transform: rotate(0);            }                100%{                 left:0;                transform: rotate(-360deg);            }        }        .box02 {            position: relative;            height: 72px;            border-bottom: 1px solid #ccc;        }        .box02 .hill {            position: absolute;            left: 300px;            bottom: 0;            width: 0;            height: 0;            border-style: solid;            border-color: transparent #ccc #ccc transparent;            border-width: 35px 60px;        }        .carBox {            position: absolute;            left: 0;            bottom: 0;            width: 122px;            height: 60px;            -webkit-animation-name: boxGo;            -webkit-animation-duration: 5s;            -webkit-animation-delay: 8.5s;            -webkit-animation-timing-function: ease-in;            -webkit-animation-fill-mode: forwards;            animation-name: boxGo;            animation-duration: 5s;            animation-delay: 8.5s;            animation-timing-function: ease-in;            animation-fill-mode: forwards;        }        .carBox .carBody {            position: relative;            width: 120px;            height: 40px;            background-color: #59c4e6;            border: 1px solid #2094aa;            border-radius: 16px 40px 2px 2px;        }        .carBody .carDoorBox {            position: absolute;            top: 10px;            left: 37px;            width: 37px;            height: 22px;            background-color: #000;        }        .carBody .carDoor {            position: absolute;            left: 0;            top: 0;            display: inline-block;            width: 35px;            height: 20px;            border: 1px solid #2094aa;            background-color: #59c4e6;            -webkit-animation-name: doorGo;            -webkit-animation-duration: 0.5s;            -webkit-animation-delay: 12.5s;            -webkit-animation-timing-function: ease-in;            -webkit-animation-fill-mode: forwards;            animation-name: doorGo;            animation-duration: 0.5s;            animation-delay: 12.5s;            animation-timing-function: ease-in;            animation-fill-mode: forwards;        }        .carBox .carWheel {            position: absolute;            bottom: 0;            display: inline-block;            width: 22px;            height: 22px;            font: 14px/22px Simsun;            color: #2094aa;            text-align: center;            border: 1px solid #2094aa;            border-radius: 50%;            -webkit-animation-name: wheelGo;            -webkit-animation-duration: 2.5s;            -webkit-animation-delay: 8.5s;             -webkit-animation-timing-function: ease-in;            -webkit-animation-iteration-count: 3;            animation-name: wheelGo;            animation-duration: 2.5s;            animation-delay: 8.5s;             animation-timing-function: ease-in;            animation-iteration-count: 3;        }        .carBox .front { left: 11px; }        .carBox .back {    right: 18px; }        .talkBox02 {            top: -10px;            left: 115px;            width: 240px;            height: 22px;            color: #1f9fbe;        }        .talkBox02 ul {            left: 240px;            height: 22px;            width: 9999px;            -webkit-animation-name: talk02;            -webkit-animation-duration: 8s;            -webkit-animation-delay: 2s;             -webkit-animation-timing-function: ease-in;            -webkit-animation-fill-mode: forwards;            animation-name: talk02;            animation-duration: 8s;            animation-delay: 2s;             animation-timing-function: ease-in;            animation-fill-mode: forwards;        }        .talkBox02 ul li {            float: left;            width: 220px;            margin-right: 20px;        }        .talkBox03 {            top: -10px;            width: 150px;            height: 44px;            left: 785px;            overflow: visible;            opacity: 0;            -webkit-animation-name: talk03;            -webkit-animation-duration: 4s;            -webkit-animation-delay: 14s;             -webkit-animation-timing-function: ease-in;            -webkit-animation-fill-mode: forwards;            animation-name: talk03;            animation-duration: 4s;            animation-delay: 14s;             animation-timing-function: ease-in;            animation-fill-mode: forwards;        }        .talkBox03 ul li {            color: #f30;            font-weight: 800;            white-space: nowrap;        }        .talkBox03 ul li:first-child {            -webkit-transform: rotate(-17deg);            -webkit-transform-origin: 10% 50%;            transform: rotate(-17deg);            transform-origin: 10% 50%;        }        .talkBox03 ul li:last-child {            -webkit-transform: rotate(17deg);            -webkit-transform-origin: 10% 50%;            transform-origin: 10% 50%;            transform: rotate(17deg);        }        @-webkit-keyframes talk02 {            0% {                left: 240px;            }            5%, 25% {                left: 0;            }            30%, 50% {                left: -240px;            }            55%, 75% {                left: -480px;            }            80%,100% {                left: -720px;            }        }        @keyframes talk02 {            0% {                left: 240px;            }            5%, 25% {                left: 0;            }            30%, 50% {                left: -240px;            }            55%, 75% {                left: -480px;            }            80%,100% {                left: -720px;            }        }        @-webkit-keyframes talk03 {            0% {                opacity: 0;            }            30%,70% {                opacity: 1;            }            100% {                opacity: 0;            }        }        @keyframes talk03 {            0% {                opacity: 0;            }            30%,70% {                opacity: 1;            }            100% {                opacity: 0;            }        }        @-webkit-keyframes boxGo {            0% {                -webkit-transform: rotate(0);            }            30% {                left: 205px;                bottom: 0;                -webkit-transform: rotate(0);            }            40% {                left: 240px;                bottom: 12px;                -webkit-transform: rotate(-20deg);            }            45% {                -webkit-transform: rotate(-28deg);                -webkit-transform-origin: 55% 20%;            }            52% {                -webkit-transform: rotate(-28deg);            }            60% {                bottom: 68px;                left: 350px;                -webkit-transform: rotate(-28deg);                -webkit-transform-origin: 52% 50%;            }            70% {                left: 450px;                -webkit-transform: rotate(90deg);            }            78% {                left: 520px;                bottom: 0;                -webkit-transform: rotate(180deg);            }            82% {                bottom: 18px;                -webkit-transform: rotate(200deg);            }            100% {                left: 650px;                bottom: 0;                -webkit-transform: rotate(180deg);            }            }        @keyframes boxGo {            0% {                transform: rotate(0);            }            30% {                left: 205px;                bottom: 0;                transform: rotate(0);            }            40% {                left: 240px;                bottom: 12px;                transform: rotate(-20deg);            }            45% {                transform: rotate(-28deg);                transform-origin: 55% 20%;            }            52% {                transform: rotate(-28deg);            }            60% {                bottom: 68px;                left: 350px;                transform: rotate(-28deg);                transform-origin: 52% 50%;            }            70% {                left: 450px;                transform: rotate(90deg);            }            78% {                left: 520px;                bottom: 0;                transform: rotate(180deg);            }            82% {                bottom: 18px;                transform: rotate(200deg);            }            100% {                left: 650px;                bottom: 0;                transform: rotate(180deg);            }            }        @-webkit-keyframes wheelGo {            0% {                -webkit-transform: rotate(0deg);                }            100% {                -webkit-transform: rotate(360deg);            }            }        @keyframes wheelGo {            0% {                transform: rotate(0deg);                }            100% {                transform: rotate(360deg);            }            }        @-webkit-keyframes doorGo {            0% {                top: 0;                -webkit-transform: rotate(0deg);                }            80% {                top:3px;            }            100% {                top: 3px;                left: 18px;                width: 17px;                height: 20px;                -webkit-transform: skew(0,-20deg);            }            }        @keyframes doorGo {            0% {                top: 0;                transform: rotate(0deg);                }            80% {                top:3px;            }            100% {                top: 3px;                left: 18px;                width: 17px;                height: 20px;                transform: skew(0,-20deg);            }            }    </style></head><body>    <div class="box">        <div class="talkBox talkBox01">            <ul>                <li>马：看见下面那辆车了吗？</li>                <li>黄：看见了，老大。</li>                <li>马：等会飞过去，撞他！</li>                <li>黄：遵命，老大!</li>                <li>黄.马：go！</li>            </ul>        </div>        <div class="ufoBox">            <div class="ufoTop"></div>            <div class="ufoBody">灰机</div>        </div>    </div>    <div class="box02">        <div class="hill">        </div>        <div class="talkBox talkBox02">            <ul>                <li>董：今天我们学习如何飞跃凤凰山哈！</li>                <li>陈：嗯好哒！</li>                <li>陈.董：油门飚起来~~~</li>            </ul>        </div>        <div class="talkBox talkBox03">            <ul>                <li>董：啊！！！雅蠛蝶~~~</li>                <li>陈：救命！救命！</li>            </ul>        </div>        <div class="carBox">            <div class="carBody">                <div class="carDoorBox"><span class="carDoor"></span></div>            </div>            <span class="carWheel front">+</span>            <span class="carWheel back">+</span>        </div>    </div></body></html>

主流のブラウザのみをサポートし、IE の低バージョンは使用しないでください。地獄へ~~~

声明

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

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。