今回はBootstrapVueのCardにCSSアニメーションをつける方法(filterエフェクト)をご紹介。filterプロパティ(blur saturate contrast)でエフェクトがついてます。簡単です。動きます。オシャレなカードを作れます。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのアニメーション/エフェクトのコードはすべて完全オリジナルなのでコピペ大歓迎です。
この記事の目次
BootstrapVueのCardにCSSアニメーションをつける方法(マテリアルデザイン)
目次
1. 【徹底解説】height calcで滑らかなCSS画像アニメーションを実装する方法
まずはBootstrapVueの導入方法から説明していきます。
すでにインストール済みの方はアニメーション動作の確認からご覧ください
BootstrapVueの導入
BootstrapVueの導入がまだの方のために導入方法を説明します
とりあえず下記をコピペして環境を整えてください
main.js
import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.use(BootstrapVue)
ターミナル
npm install vue bootstrap-vue bootstrap
以上でBootstrapVueの導入は完了です
アニメーション動作の確認
動きは下の画像のような感じになります
実際の動きはこちら
コードの確認
<div class="container py-1">
<div class="row pb-8 mb-8">
<!-- 要素の配置大きさ -->
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<!-- カードの枠組み -->
<div class="card rounded shadow-sm border-1">
<div class="card-body p-8"><img src="https://source.unsplash.com/1000x800" alt="" class="img-fluid d-block mx-auto mb-4">
<h5>What is it ?</h5>
<p class="small text-muted font-italic">
This Photo Is Displayed Randomly.<br>Is This Cool ?<br>What Do you Think ?
</p>
</div>
</div>
</div>
</div>
</div>
/* 画像のスタイル指定 */
img {
/* hover前のぼやけ度合い・彩度・コントラストの調整 */
filter: blur(3px) saturate(100%) contrast(100%);
/* アニメーションの速度調整 */
transition: .5s;
}
/* hover後の画像のスタイル指定 */
img:hover {
/* hover前のぼやけ度合い・彩度・コントラストの調整 */
filter: blur(0) saturate(120%) contrast(120%);
/* アニメーションの速度調整 */
transition: .5s;
}
ここがポイント!
- BootstrapVueの公式サイトからカードのコードをコピペ
- 配置やサイズなどを調整
- imgタグに対してhover前後のスタイルを指定
- hover前後のfilter: blur() saturate() contrast()でぼやけ度合い・彩度・コントラストの調整
- transitionで滑らかなアニメーションを実現
参考
そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!
完全無料で一人前のエンジニアになれるプログラミングスクールあります