光るCSS
最終更新日時 :
1人が閲覧中
光るCSS
画像の左上から右下に向かって白線加工が2秒おきに通る
HTML
| 箱（キラリ） ・画像「○○.png」 ・箱（白線） | <div class="キラリ"> <img src="〇〇.png" alt=""> <div class="白線"></div> </div> |
CSS
| 箱（キラリ）は 子要素の位置基準 インラインブロックにする はみ出した子要素を見えなくする | .キラリ { position: relative; display: inline-block; overflow: hidden; } |
| 箱（キラリ）の画像の 横 300px 縦 自動 | .キラリ img { width: 300px; height: auto; } |
| 箱（白線）の 位置は上に-100% 左に-50% 幅 50px 高さ 200% 背景色 白色 透明度30% 45度回転 ２秒間動きを繰り返す | .白線 { position: absolute; top: -100%; left : -50%; width: 50px; height: 200%; background: rgba(255, 255, 255, 0.3); transform: rotate(45deg); animation: 動き 2s infinite; } |
| 動き 位置は上に-100% 左に-50%から 下に100% 右に50%へ | @keyframes 動き { 0% { top: -100%; left : -50%; } 100% { top: 100%; left : 150%; } } |
コメント (光るCSS)
この記事を作った人
編集者紹介
未登録
