【CSS3】 アニメーション(ゆらゆらバナー)
ECサイト設置用 CSS3のアニメーションバナー
ECサイト設置用にCSS3のアニメーションバナー、
作りました。 ※以下はDemo用ダミーです。
以下、サンプル用のソースを共有します。
<style> /* 基本設定 */ html, body { margin: 0; padding: 0; } body { font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size:16px; -webkit-text-size-adjust: 100%; } img{ border-width:0px; } .article{ font-size:16px; line-height:170%; } /*記事・カテゴリ中の画像調整*/ img.slide_arrow { max-width:100%; height:auto !important; } /* レイアウト設定 */ #arrowbutton { float: left; box-sizing: border-box; background-color:#fff; border-radius: 4px; margin-bottom: 30px; } .clear{ clear:both; } /*** ゆらゆらアニメーションバナー設定 ***/ @-moz-keyframes skew_button { 0% { -moz-transform: skewX(9deg); } 10% { -moz-transform: skewX(-8deg); } 20% { -moz-transform: skewX(7deg); } 30% { -moz-transform: skewX(-6deg); } 40% { -moz-transform: skewX(5deg); } 50% { -moz-transform: skewX(-4deg); } 60% { -moz-transform: skewX(3deg); } 70% { -moz-transform: skewX(-2deg); } 80% { -moz-transform: skewX(1deg); } 90% { -moz-transform: skewX(0deg); } 100% { -moz-transform: skewX(0deg); } } @-o-keyframes skew_button { 0% { -o-transform: skewX(9deg); } 10% { -o-transform: skewX(-8deg); } 20% { -o-transform: skewX(7deg); } 30% { -o-transform: skewX(-6deg); } 40% { -o-transform: skewX(5deg); } 50% { -o-transform: skewX(-4deg); } 60% { -o-transform: skewX(3deg); } 70% { -o-transform: skewX(-2deg); } 80% { -o-transform: skewX(1deg); } 90% { -o-transform: skewX(0deg); } 100% { -o-transform: skewX(0deg); } } @-webkit-keyframes skew_button { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } 20% { -webkit-transform: skewX(7deg); } 30% { -webkit-transform: skewX(-6deg); } 40% { -webkit-transform: skewX(5deg); } 50% { -webkit-transform: skewX(-4deg); } 60% { -webkit-transform: skewX(3deg); } 70% { -webkit-transform: skewX(-2deg); } 80% { -webkit-transform: skewX(1deg); } 90% { -webkit-transform: skewX(0deg); } 100% { -webkit-transform: skewX(0deg); } } @-moz-keyframes skew_arrow { 0% { -moz-transform: translateX(0px); } 45% { -moz-transform: translateX(20px); } 50% { -moz-transform: translateX(25px); } 55% { -moz-transform: translateX(20px); } 95% { -moz-transform: translateX(0px); } 100% { -moz-transform: translateX(0px); } } @-o-keyframes skew_arrow { 0% { -o-transform: translateX(0px); } 45% { -o-transform: translateX(20px); } 50% { -o-transform: translateX(25px); } 55% { -o-transform: translateX(20px); } 95% { -o-transform: translateX(0px); } 100% { -o-transform: translateX(0px); } } @-webkit-keyframes skew_arrow { 0% { -webkit-transform: translateX(0px); } 45% { -webkit-transform: translateX(20px); } 50% { -webkit-transform: translateX(25px); } 55% { -webkit-transform: translateX(20px); } 95% { -webkit-transform: translateX(0px); } 100% { -webkit-transform: translateX(0px); } } .a-btn { position: relative; display:block; width:100%; max-width:600px; padding:10px; padding-left:10%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-left:auto; margin-right:auto; } .shake { -webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-duration:2s; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; margin-left:auto; margin-right:auto; z-index: 8; -webkit-animation-name: skew_button; -moz-animation-name: skew_button; -o-animation-name: skew_button; animation-name: skew_button; width:90%; } .slide_arrow { position: absolute; top:30%; left:-5px; -webkit-animation-duration:1s; -moz-animation-duration:1s; -ms-animation-duration:1s; -o-animation-duration:1s; animation-duration:1s; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: skew_arrow; -moz-animation-name: skew_arrow; -o-animation-name: skew_arrow; animation-name: skew_arrow; z-index: 9; width:20%; max-width:100px; } .a-btn:hover img{ opacity:1; } p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } </style>
<div id="arrowbutton"> <p><a class="a-btn" href="#" target="_blank" rel="nofollow"><img class="slide_arrow" src="画像ファイル01" alt="" width="100"><img class="shake aligncenter" src="画像ファイル02[f:id:sntkk3:20170406231359p:plain]" alt="" width="500" height="120"></a></p> </div><!--#arrowbutton-->
バナーデザイン 参考サイト
ついでにと言っては何ですが、
以下、バナーデザインの参考になるサイトです。
バナーデザイン・サンプルデータベース|ホームページ作成 AKAIRO株式会社(アカイロ) :
http://aka-design.sub.jp/bd/