cssだけで背景画像を右から左へループさせる
24.09.20
まずはhtml
1 2 3 4 5 6 7 8 9 10 11 |
<div class="jp_slide_img_wrapper"> <div class="jp_slide_img_overlay"> <div class="main_catch"> <div class="logo"> <img src="img/logo.png" alt="logo"> </div> <h1>メインキャッチを入れたりして</h1> </div> </div> </div> <!-- /.jp_slide_img_wrapper --> |
次にcss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.jp_slide_img_wrapper { position: relative; width: 100%; height: 100vh; background-image: url('../img/main-bg.jpg'); background-repeat: repeat-x; background-size: cover; background-position: 0 0; animation-name: slide_img; animation-duration: 200s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes slide_img { 100% { background-position: -10000px 0; } } .jp_slide_img_overlay{ position: absolute; top: 0%; right: 0%; left: 0%; bottom: 0%; width: 100%; height: 100%; background-color: rgba(46, 36, 100, 0.4); } .main_catch { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); } .main_catch .logo { max-width: 250px; margin: 0 auto 15px; } .main_catch .logo img { max-width: 100%; height: auto; } |
お役に立てましたらadsenseクリックお願いします!
いかがでしたでしょうか?もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします!↓上手くいきますようにお祈りしておきます!
関連記事
-
2018.11.09 サクラサーバーで無料SSLを利用する方法
-
2020.08.28 css js【簡単】下からふわっと出てくるアニメーションの作り方
-
2021.11.17 カスタム投稿タイプ「CPTUI」で個別にテンプレートを作る方法
-
2024.06.28 デザインプロセスとワークフロー: 初心者Webデザイナー向けガイド
-
2024.06.28 HTML/CSSの基本: 初心者Webデザイナー向けガイド