HTML5を使用したバナー作成例を共有する

バナー:

1. バナー広告はオンライン広告の一般的な形式であり、通常、ユーザーがこれらのバナー広告をクリックすると、対応する広告ページにリンクされます。

2. バナー広告をデザインするときは、シンプルかつ明確であるように努め、主要な中心テーマを反映し、主な広告の意図を明確かつ鮮明に表現できるようにしてください。

3. バナー広告は静的な画像でも動的な画像でも構いません。一般に、静的なバナー広告と比較して、動的なバナー広告はより目を引き、視聴者の注意を引くことができます

4. もちろん、これは適切で適切な場合に限ります (私はポップアップ広告やフローティング広告が嫌いです)。不適切な使用は予期せぬ結果を引き起こし、視聴者の嫌悪感の悪循環を引き起こし、広告本来の効果を大幅に低下させます

5. バナー広告をデザインする際、静的な形式にするか動的な形式にするかが決まります。このフォームは、表現すべき情報を正確かつ迅速に閲覧者に伝えることができます。

デザインプロセス:

(1) HTML5コードを書きます

1. バナーをクリックしたときにリンクするWebサイトを入力します

<a class="banner" href="www.php.cn">

2. バナーに画像とテキストを追加します。 class属性を使って要素を識別する

    <a class="banner" href="http://yamoo9.com">
        <img class="banner-logo lazy"  src="/static/imghwm/default1.png"  data-src="images/banner-logo.png"    alt="yamoo9.com"    style="max-width:90%"  style="max-width:90%" />
        <p class="banner-desc">开放知识讲座, 视频Cast!<br /> 分享设计心得的乐园!<br />
        <strong>- Yamoo9</strong></p>
    </a>

(2)CSS3スタイルシートを書く

1.本文スタイルを制御する

body {
    padding: 20px;
    background: #333;
}

2.Bannerスタイルを制御する

a.banner {
    display: block;
    width: 728px;
    height: 176px;
    border: 1px solid #555;
}

3.バナー広告のロゴを設定します。 ロゴ

.modern .banner-logo {
    position: absolute;
    top: 20px;
    left: 270px;
}

4. バナー上のテキストにフォントを適用します

.modern .banner-desc {
    font: 32px/1.1 "NanumPenWeb", "方正静蕾简体", "Nanum Pen Script";
}

HTML5 コードに Web フォント サービスを追加する必要もあります

<title>CSS3 Banner Design - 动画Banner设计</title>
<link href=&#39;api.mobilis.co.kr/webfonts/css/?fontface=NanumPenWeb&#39; rel=&#39;stylesheet&#39; />

5.バナーフォントの色

.modern .banner-desc {
    opacity: 0;
    position: absolute;
    top: 39px;
    left: 170px;
    font: 39px/1.1 "NanumPenWeb", "方正静蕾简体", "Nanum Pen Script";
    color: #4ec1cd;
}

rreee

6. 設定マウスポインタがバナー上のバナーに移動していません

.modern .banner-desc strong {
    font-size: 23px;
}

トランジション機能を使用して一連の画像移動操作を完了します

a.banner {
    position: relative;
    background: 
        url(../images/banner-arrow.png) no-repeat -100px 140px, 
        url(../images/banner-photo.png) no-repeat -40px 220px, 
        url(../images/banner-09.png) no-repeat -20px -380px,
        url(../images/banner-bg.png) no-repeat 0 0;

}
.modern a.banner:hover, a.banner:focus {
    background-position: 
        20px 140px, 
        -40px 20px, 
        -20px -90px,
        0 0;    
}

最後にJQueryを使用しますサウンドファイルを再生するには

a.banner {
    position: relative;
    background: 
        url(../images/banner-arrow.png) no-repeat -100px 140px, 
        url(../images/banner-photo.png) no-repeat -40px 220px, 
        url(../images/banner-09.png) no-repeat -20px -380px,
        url(../images/banner-bg.png) no-repeat 0 0;

    -webkit-transition: all .2s ease-in .2s;
    -moz-transition: all .2s ease-in .2s;
    -o-transition: all .2s ease-in .2s;
    -ms-transition: all .2s ease-in .2s;
    transition: all .2s ease-in .2s;
}
.modern a.banner:hover, a.banner:focus {
    background-position: 
        20px 140px, 
        -40px 20px, 
        -20px -90px,
        0 0;    
}
.modern .banner-logo {
    position: absolute;
    top: 20px;
    left: 270px;
    -webkit-transition: all .4s ease-out .3s;
    -moz-transition: all .4s ease-out .3s;
    -o-transition: all .4s ease-out .3s;
    -ms-transition: all .4s ease-out .3s;
    transition: all .4s ease-out .3s;
}
.modern a.banner:hover .banner-logo, 
.modern a.banner:focus .banner-logo {
        left: 540px;        
}
.modern .banner-desc {
    opacity: 0;
    position: absolute;
    top: 39px;
    left: 170px;
    font: 39px/1.1 "NanumPenWeb", "方正静蕾简体", "Nanum Pen Script";
    color: #4ec1cd;
    -webkit-transition: all .4s ease-out .3s;
    -moz-transition: all .4s ease-out .3s;
    -o-transition: all .4s ease-out .3s;
    -ms-transition: all .4s ease-out .3s;
    transition: all .4s ease-out .3s;
}

【関連する推奨事項】

1.

無料のh5オンラインビデオチュートリアル

2.

HTML5完全版マニュアル

3.

php.cnオリジナルのHTML5ビデオチュートリアル

4

H5 video タグが音声のみ再生できてビデオが再生できない問題の解決策

5

IIS の MIME が MP4 タイプを登録しないため、vidoe タグが認識できない問題が解決されました

以上がHTML5を使用したバナー作成例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。