20200531のCSSに関する記事は7件です。

投稿日：2020-05-31T21:25:21+09:00

【Vue】イメージをhoverすると扉が閉まるように背景が現れて文字が表示されるCSSアニメーション実装

Vueバージョン確認
npm list vue
まずは上記コマンドでバージョンの確認
twinzlabo@0.1.0 /Users/twinzlabo

── vue@2.6.11
イメージをhoverするとカッコよく文字が表示されるCSSアニメーション実装

すでに上の方で確認してもらったかと思いますが、

特に変哲もない画像にスタイル修正を行うことで

画像をhoverするとスーッと白い背景＋descriptionが現れるクールなアニメーション実装をしていきましょう

デフォルトの上の画像をhoverしたら下の画像のように背景と文章が現れるアニメーションをカスタマイズしていきます

この感じなかなかクールですよね

では早速コードをコピペしていきましょう
<template>
  <div class="container">
    <div class="bg-pic">
      <div class="pic" style="background-image : url('https://cdn.pixabay.com/photo/2017/01/17/23/05/valetta-1988455_1280.jpg');">
        <div class="screen-left"></div>
        <div class="screen-right"></div>
        <div class="fonts">
          <h1>Malta's capture</h1>
          <p>this is a photo in malta <br><br><br>Have A Good Time</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
body {
  background-color: #E43;
}

.container {
  width  : 960px;
  margin : 0 auto;
}

.container:after{
  clear   : both;
  display : table;
  content : '';
}

.bg-pic {
  width  : 640px;
  height : 500px;
  margin : 20px;
  background-color: white;
  float  : left;
  cursor : pointer;
  box-shadow : 3px 3px 5px 0px rgba(0,0,0,0.5);
}

.pic {
  width  : 640px;
  height : 500px;
  position: relative;
  overflow: hidden;
  background-color: #102B46;
}

.fonts {
  background-color : #ffffff;
  width            : 640px;
  height           : 500px;
  padding          : 10px;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #888888;
  opacity : 0;
  transition : opacity .8s;
}

.fonts h1 {
  margin-top: 100px;
  margin-bottom : 40px;
}

.fonts p {
  font-size : 14px;
  font-style: italic;
  text-align: center;
  line-height : 20px;
}

.pic:hover .fonts {
  opacity : 1;
  transition : opacity .2s .3s;
}

.pic div {
  position : absolute;
}


/* screen open and close */

.screen-right , .screen-left{
  width : 50%;
  height: inherit;
  background-color : #ffffff;
  top : 0;
  transition : all .3s;
}

.screen-right {
  left : 100%;
}

.screen-left {
  right : 100%;
}

.pic:hover .screen-right {
  transition : all .3s;
  left : 50%;
}

.pic:hover .screen-left {
  transition : all .3s;
  right : 50%;
}
</style>
いかがでしたでしょうか？

画像をhoverするとアニメーションが実行されましたか？

下の記事では別の応用的な画像のデザイン方法を掲載しているので是非挑戦してみてください

以上です

より応用的でお洒落な画像一覧画面を作りたい方にはこちらの記事がおすすめです
【Vue/画像一覧をコピペだけ】イメージをhoverすると背景が閉じるように変化し文字が現れるアニメーション

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-31T19:25:46+09:00

コンポーネント指向におけるCSS変数のベストプラクティス

ここ1年ほど、アトミックデザインやコンポーネント指向を用いたウェブ開発において、いかにしてスタイルを親コンポーネントから子コンポーネントへと伝播させていくかを考えていた。そして、ようやく結論が出たので共有する。
(私はAngularしか用いていないが、おそらくReactやVue.jsでも考え方は役に立つはず...)

1.はじめに(直感的なアイディア)

この問題は単純化していけば、子コンポーネントとそれを内包する親コンポーネントの2つのコンポーネントにおいて、どうすれば直感的かつシンプルに値を渡していけるかという問題である。
これについて、私ははじめに、各コンポーネントの高さや幅、色の値等をCSS変数としてHostに定義し、それを子に渡していく方式を考えた。
child.component.scss
:host {
  --width: 300px;
  --height: 200px;
  --base-color: red;
}

:host {
  display: flex;
  width: var(--width);
  height: var(--height);
  outline: 1px var(--base-color);
}
parent.component.scss
:host {
  --width: 1200px;
  --height: 200px;
  --base-color: blue;
}

:host {
  display: flex;
  width: var(--width);
  height: var(--height);
  outline: 1px var(--base-color);

  * {
    --width: calc(var(--width) / 2); // ERROR
    --height: var(--height); // ERROR
    --base-color: var(--base-color); // ERROR
  }

}
一見、直感的に値を子に渡していけるように見えるが、この書き方では--width: var(--width)のように、同じセレクタ内で同名のCSS変数を用いた変数定義を行ってしまっているため、意図したとおりには動作しない。

2.Component Name + CSS Variable Name

そこでCSS変数にコンポーネント名をプレフィックスすることにした。
child.component.scss
:host {
  --child-width: 300px;
  --child-height: 200px;
  --child-base-color: red;
}

:host {
  display: flex;
  width: var(--child-width);
  height: var(--child-height);
  outline: 1px var(--child-base-color);
}
parent.component.scss
:host {
  --parent-width: 1200px;
  --parent-height: 200px;
  --parent-base-color: blue;
}

:host {
  display: flex;
  width: var(--parent-width);
  height: var(--parent-height);
  outline: 1px var(--parent-base-color);

  * {
    --child-width: calc(var(--parent-width) / 2); // --child-width: 600px;
    --child-height: var(--parent-height); // --child-height: 200px;
    --child-base-color: var(--parent-base-color); // --child-base-color: blue;
  }

}
これで上手く親コンポーネントから子コンポーネントに値を渡すことができるようになったが、再利用性の高いコンポネント指向においては、自身の用意したコンポーネント名と外部から取得したコンポーネント名が被る可能性がある。

3.Component Name + Suffix + CSS Variable Name

そこで、ランダムなidを生成し[コンポーネント名]-[ランダム英数]-[変数名]という形をとることにした。
child.component.scss
:host {
  --child-5ds3-width: 300px;
  --child-5ds3-height: 200px;
  --child-5ds3-base-color: red;
}

:host {
  display: flex;
  width: var(--child-5ds3-width);
  height: var(--child-5ds3-height);
  outline: 1px var(--child-5ds3-base-color);
}
parent.component.scss
:host {
  --parent-94dm-width: 1200px;
  --parent-94dm-height: 200px;
  --parent-94dm-base-color: blue;
}

:host {
  display: flex;
  width: var(--parent-94dm-width);
  height: var(--parent-94dm-height);
  outline: 1px var(--parent-94dm-base-color);

  * {
    --child-5ds3-width: calc(var(--parent-94dm-width) / 2); // --child-width: 600px;
    --child-5ds3-height: var(--parent-94dm-height); // --child-height: 200px;
    --child-5ds3-base-color: var(--parent-94dm-base-color); // --child-base-color: blue;
  }

}
これでまずCSS変数の名称がかぶって予期しない動作が発生することはなくなる。しかしながら、親コンポネントが複数の子コンポネント達(下記では--child-5ds3と--child-us1p)をもつ場合、それぞれに対して変数を上書きしていくのは非常に手間がかかる。
parent.scss
:host {
//...
  * {
    --child-5ds3-width: calc(var(--parent-94dm-width) / 2); // --child-width: 600px;
    --child-5ds3-height: var(--parent-94dm-height); // --child-height: 200px;
    --child-5ds3-base-color: var(--parent-94dm-base-color); // --child-base-color: blue;
    --child-us1p-width: calc(var(--parent-94dm-width) / 2); // --child-width: 600px;
    --child-us1p-height: var(--parent-94dm-height); // --child-height: 200px;
    --child-us1p-base-color: var(--parent-94dm-base-color); // --child-base-color: blue;
  }
}
4.Host CSS Variable

そこで、一度、シンプルな変数名(ex:--width)を:hostで定義し、それを先程定義したCSS変数(ex:--child-5ds3-width)に渡すことで、より直感的に親から子へと値を渡せるようにした。この一連の動作によって定義されるCSS変数を本稿では「ホストCSS変数」と呼ぶ。
child.component.scss
:host {
  --width: 300px;
  --height: 200px;
  --base-color: red;

  --child-5ds3-width: var(--width);
  --child-5ds3-height: var(--height);
  --child-5ds3-base-color: var(--base-color);
}

:host {
  display: flex;
  width: var(--child-5ds3-width);
  height: var(--child-5ds3-height);
  outline: 1px var(--child-5ds3-base-color);
}
parent.component.scss
:host {
  --width: 1200px;
  --height: 200px;
  --base-color: blue;

  --parent-94dm-width: var(--width);
  --parent-94dm-height: var(--height);
  --parent-94dm-base-color: var(--base-color);
}

:host {
  display: flex;
  width: var(--parent-94dm-width);
  height: var(--parent-94dm-height);
  outline: 1px var(--parent-94dm-base-color);

  * {
    --width: calc(var(--parent-94dm-width) / 2); // --child-width: 600px;
    --height: var(--parent-94dm-height); // --child-height: 200px;
    --base-color: var(--parent-94dm-base-color); // --child-base-color: blue;
  }

}
これによって、より直感的に子コンポーネントに値を渡すことができるようになったが、流石に冗長すぎる。

5.Host CSS Variable by SCSS

そこで、この「ホストCSS変数」をより効率的に書くため、以下のSCSSファイルを用意した。
_host-variable.scss
@function trip-initial($str) {
  @return str-slice($str, 2);
}

$str: "0123456789abcdefghijklmnopqrstuvwxyz";
$chars: ();
@for $i from 1 through 36 {
    $char: str-slice($str, $i, $i);
    $chars: append($chars, $char);
}

@function random-char($n: 1) {
    $res: "";
    @for $i from 1 through $n{
        $c: nth($chars, random(36));
        $res: $res + $c;
    }
    @return $res;
}

@function host($name, $suffix: "@@@@", $len: 4) {
    @if $suffix == "@@@@" {
        $suffix: random_char($len);
    }
    @return "--" + $name + "-" + $suffix;
}

@mixin host-variable($args...) {
  $host: $host;
  $variable: false;
  $default: false;

  @if length($args) == 2 {
    $variable: nth($args, 1);
    $default: nth($args, 2);
  } @else if length($args) == 3 {
    $host: nth($args, 1);
    $variable: nth($args, 2);
    $default: nth($args, 3);
  } @else {
    @warn "length of host-var mixin $args must be 2 or 3!";
  }

  #{$variable}: $default;
  #{$host}#{$variable}: var(#{$variable});
}

@function host-variable($args...) {
  $host: $host;
  $variable: false;

  @if length($args) == 1 {
    $variable: nth($args, 1);
  } @else if length($args) == 2 {
    $host: nth($args, 1);
    $variable: nth($args, 2);
  } @else {
    @warn "length of host-var function $args must be 1 or 2!";
  }

  @return var(#{$host}#{trip-initial($variable)});
}


// Alias
@mixin host-var($args...) { @include host-variable($args...); }
@mixin hvar($args...) { @include host-variable($args...); }

@function host-var($args...) { @return host-variable($args...); }
@function hvar($args...) { @return host-variable($args...); }
ここで用意された@mixinと@functionを用いることで、先程のコードは非常にシンプルに書き直せる。
child.component.scss
@import 'host-variable';
$host: host('child');

:host {
  @include hvar(--width, 300px);
  @include hvar(--height, 200px);
  @include hvar(--base-color, red);
}

:host {
  display: flex;
  width: hvar(--width);
  height: hvar(--height);
  outline: 1px hvar(--base-color);
}
parent.component.scss
@import 'host-variable';
$host: host('parent');

:host {
  @include hvar(--width, 1200px);
  @include hvar(--height, 200px);
  @include hvar(--base-color, blue);
}

:host {
  display: flex;
  width: hvar(---width);
  height: hvar(---height);
  outline: 1px hvar(--base-color);

  * {
    // SCSS関数はcalc()の中ではインターポレーションを使う必要がある
    --width: calc(#{hvar(--width)} / 2); 
    --height: hvar(--height);
    --base-color: hvar(--base-color);
  }

}
これで冗長な部分はすべて隠蔽され、非常に直感的で実用に耐えうるものとなった。
しかしながら、ホストCSS変数をcalc()関数の中で呼ぶときのインターポレーション(#{})が非常に煩わしい。

この量なら問題ないと感じるかも知れないが、本気でアトミックデザインに「ホストCSS変数」を組み込もうとすると、骨が折れるものである。願わくば、var()と同じ感覚でhvar()を用いたい。

ただ、これが非常に難しい問題であった。

6.Host CSS Variable in Calc Function

結論からいえば、SCSSの機能ではどうにもならなかったので、webpackを用いてSCSSがコンパイルされる前にcalc()の中身を処理することにした。
詳細はこちらの記事に投げるが、かなりの力技である。

ただ、もちろん、パッケージ化してnpmで公開したので、読者の皆様は私と同じことをする必要はない。
npmからパッケージをインストールし、
$ npm i -D host-css-variable
webpack.config.jsにhost-css-valiable/loaderを追加してやれば良い。
webpack.config.js
module.exports = {
    //...... 
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // 'scss-loader'等の後に'host-css-valiable/loader'を追加する
          'host-css-variable/loader'
        ],
      }
    ],
  },
}
これでインターポレーションを用いることなく「ホストCSS変数」をcalc()関数内で使えるようになる。

7.結論

上記のパッケージを用いることで「ホストCSS変数」を親コンポーネントから子コンポーネントへと直感的かつシンプルに値を渡していくことができるようになった。これが私のたどり着いたコンポーネント指向のウェブ開発におけるCSS変数のベストプラクティスである。
child.component.scss
@import '~host-css-variable/host-variable';
$host: host('child');

:host {
  @include hvar(--width, 300px);
  @include hvar(--height, 200px);
  @include hvar(--base-color, red);
}

:host {
  display: flex;
  width: hvar(--width);
  height: hvar(--height);
  outline: 1px hvar(--base-color);
}
parent.component.scss
@import '~host-css-variable/host-variable';
$host: host('parent');

:host {
  @include hvar(--width, 1200px);
  @include hvar(--height, 200px);
  @include hvar(--base-color, blue);
}

:host {
  display: flex;
  width: hvar(---width);
  height: hvar(---height);
  outline: 1px hvar(--base-color);

  * {
    --width: calc(hvar(--width) / 2); 
    --height: hvar(--height);
    --base-color: hvar(--base-color);
  }

}

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-31T15:52:28+09:00

CSSアニメーションで「たべるんごのうた」を作った

CSSアニメーションで「たべるんごのうた」を作りました

はじめに

成果物はこちらから。

注意

最新のChromeもしくはそれに準ずるブラウザじゃないと動かない可能性が高いです。

リソースの読み込みの関係でチラチラすることがあります。

音がないです。

たべるんごのうた

みなさんご存知のことかと思いますが、ニコニコ動画でいま（2020/05/31現在）ブームが起きているです。
ご存じない方はこちらから御覧ください。

シンプルな動き、シンプルな歌、そして最後にBB素材。
圧倒的中毒性に様々な派生動画が作成され、動画の女の子「辻野あかり」は声を手に入れることに…

私自身は、アイマスに詳しくないのですが、中毒性にやられました。

CSSアニメーション+たべるんごのうた

動きがシンプルなのでかんたんに実装できてしまうのでは？と思い実装をはじめました。
CSSアニメーションの練習です。

transformというプロパティを使うのですが、複数の値の設定とanimationがここまでたくさんの値を設定することが想定されていないのでしょう。かんたんじゃなかったんご…。

調べてみると、CSS Houdiniという技術を使えば実装できそうということで、Firefox等のサポートを捨て実装しました。

仕様

若干動きが違う

再現難しい

再現疲れた

画面サイズに依存しないよう％多用した

テンポが違う

CSSなのでms単位で指定できるが算出するのがしんどかった

元動画を0.9倍速くらいでだいたい同じ

Svelteで実装してある

TaberungoNoUta.svelteをコピーしたら他で使えるかも

SCSSを使っているので要対応

実はブルーバックにする機能がある

けど今回は使ってない

ブルーバックに限らず、CSSの色なら何でも指定できる

もちろんグリーンバックも

リポジトリ: https://github.com/ssssota/taberungo-no-uta

おわりに

この一大ムーブメントに乗るんご！！！

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-31T10:28:54+09:00

Sassをgulpでコンパイルする方法をまとめてみた

npm init -y
package.json作成
npm install -D gulp gulp-sass
node_moduleができる

gulpfile.jsを作成してgulpfile.jsファイル内に以下のコードをコピペ
// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");

// style.scssをタスクを作成する
gulp.task("default", function() {
  // style.scssファイルを取得
  return (
    gulp
      .src("css/style.scss")
      // Sassのコンパイルを実行
      .pipe(sass())
      // cssフォルダー以下に保存
      .pipe(gulp.dest("css"))
  );
});
sassファイルをcss/style.scssを作成し、を記述
// ネストのテスト
div {
  p {
    font-weight: bold;
  }
}

// 変数のテスト
$fontColor: #525252;

h1 {
  color: $fontColor;
}
npx gulp
でコンパイル。
無事下記のようにcss/style.cssにcssがコンパイルされる
div p {
  font-weight: bold; }

h1 {
  color: #525252; }
こちらの記事がわかりやすい。
https://ics.media/entry/3290/

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-31T07:03:42+09:00

PHPと Vue.jsで簡易掲示板を作ろう〜その２( SCSS編)〜

初めに

前回にの
PHPと Vue.jsで簡易掲示板を作ろう〜その１(PHP編)〜
の続きです。
３つのパートに分けて
1.PHPでとりあえず動く掲示板を作る
２.SCSSで簡単なデザインを作る←今回はここ
３.Vue.jsで少しリッチな動きをつける

<div class="container">
        <h1 class="title">簡易掲示板へようこそ(XSS対策済み)</h1>

        <!-- 投稿ボタン -->
        <form method="post" class="text-form"><!-- 中の投稿ボタンが押されたらPOSTのリクエストを送る --> <!-- NEW class追加 -->
            <input class="text" type="text" name="text"> <!-- NEW class追加 -->
            <input class="submit" type="submit" value="投稿する"> <!-- NEW class追加 -->
        </form>

        <div class="frame"> <!-- NEW 追加 -->
            <table class="contents"> <!-- NEW class追加 -->
                <?php foreach((array)$all_data as $post_data) : ?>
                <tr>
                    <form method="post">
                        <td class="text"> <!-- $post_data[2]は$post_text(テキストデータ) --> <!-- NEW class追加 -->
                            <?php echo h($post_data[2]); ?>
                        </td>
                        <td class="date"> <!-- $post_data[1]は$date(日付) --> <!-- NEW class追加 -->
                            <?php echo $post_data[1]; ?>
                        </td>
                    </form>
                </tr>
                <?php endforeach; ?>
            </table>
        </div>
    </div>

SCSSの記述

style.scss

.container {
    border: 1px solid black;
    text-align: center;

    // 入力欄と投稿ボタン
    & .text-form {

        // text入力欄
        & .text {
            width: 70%; 
            padding: 11px 15px;
            font-size: 16px;
            border-radius: 3px;
            border: 2px solid #ddd; 
            box-sizing: border-box;

            // フォーカス時
            &:focus {
                border: 2px solid #ff9900; 
                z-index: 10; //前面に表示
                outline: 0; // 元からある線を消す
            }
        }

        // 投稿ボタン
        & .submit {
            border-radius : 5%;
            font-size: 16px;
            text-align: center;
            cursor: pointer;
            padding: 9px 15px;
            background    : #000066;
            color         : #ffffff;
            transition    : .3s;
            box-sizing: border-box;

            // ホバー時
            &:hover {
                border: 2px solid #000066;
                color: #000066;
                background: #ffffff;

              }
        }
    }



    // 枠線
    & .frame {
        margin-top: 15px;
        border: 13px solid #993300;

        // メッセージと日付
        & .contents {
            width: 100%;
            background: #009900;

                // メッセージ
                & .text {
                    font-size: normal;
                    border: 1px solid white;
                    border-radius: 5px;

                    // ホバー時
                    &:hover {
                        background: white;
                    }

                }

                // 日付
                & .date {
                    font-size: normal;
                    float: right;
                }

        }
    }
}

まとめ

今回のパートではSCSSで少しだけ見た目をつけました！なんの計画もなしにスタイルを作成するとデザインが壊滅することが分かりました?
次回はVue.jsでリッチな動きをつけます。
この記事を見てくださったあなたの成長を応援します！！
ーーーー
次のパート：coming soon

この記事もいかがですか？

・初心者に捧げる〜PHPを使って九九の表を作ろう〜
・Vue.jsで作る！自動保存するToDoリスト~その１~
・初心者に捧げるハンバーガーメニューの作り方

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-31T01:36:31+09:00

wordpress　�制作したwebをワードプレス化したらCSSがうまく当たらない場合

制作したプロジェクトをwordpress化する中で
contact7を使用箇所でなぜかCSSが１部分だけ外れてしまう

調べみるとコンタクト７の設定画面からコンパイルされる際に
解釈を付け加えて読み込みされる部分があるようです。

※3Dボタン作成のためinputbuttomタグを２箇所設置している特殊なケースです。
        <div class="form-submit submit">
          <span class="cubic-btn">
            <span class="hovering">
              [submit class:submit-btn "送信"] //inputタグをcontact7タグへ入れ替え
            </span>
            <span class="default">
              [submit class:submit-btn "送信"]　//inputタグをcontact7タグへ入れ替え
            </span>
          </span>
        </div>
上記のようなhtmlのインデントをそのままの状態で
コンタクト７のタグで入れ替えをすると

このように３DボタンのCSSが盛大に崩れました

原因はコンタクト７の中でインデントをつけた部分に
brタグが生成されていることでした。

デベロッパーツールで見てみると

このように見覚えのないbrタグが入っています。
右クリックでDeleteElementしていくと

このようにCSSが正しく当たっています。

どこでbrタグが入ったかというとcontact7の
プラグインの中でインデントするために改行している箇所が原因でした。

大体のCSSでは問題ないと思いますが
少し凝ったCSSの当て方をしていると
タグが
思わぬバグを生む可能性があるので注意が必要でした。
<div class="form-submit submit"><span class="cubic-btn"><span class="hovering">[submit class:submit-btn "送信"]</span><span class="default">[submit class:submit-btn "送信"]</span></span></div>
そのため可読性は最悪ですがcontact7内では上記のように書くと
タグは入りません。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-31T00:37:14+09:00

中二病CSS

かっこいいエフェクトをCSSアニメーションだけで作れないかなと色々模索したので
いくつか作ったサンプルを載せておきます。
Chromeで動作はしますが、ブラウザによっては動かないと思います。

過去にこんな記事も書きましたのでよかったらこちらもどうそ
イケてるアニメーションを研究してみる

カラー→セピア

画像を退廃的な感じに見せます。
ブラーのエフェクトとノイズ画像を重ねることで更に劣化の表現を増しています。

See the Pen sepia animation by teradonburi (@teradonburi) on CodePen.

カラー→グレー

画像をスチームパンク的な雰囲気にします。
セピア版のspeiaフィルターをgreyscaleフィルターに変更しただけです。

See the Pen greyscale animation by teradonburi (@teradonburi) on CodePen.

シルエット

画像をシルエットのみにします。PNGなどの透過画像にのみ有効です。
brightnessを0%にすると黒シルエット。その状態からさらにinvertすれば白シルエットになります。

See the Pen silhouette by teradonburi (@teradonburi) on CodePen.

ブラー→ブラーなし

こうゆうのは重い画像読み込みのlazyload時などの表現で使われることが多いのですが、
imgタグのsrcset属性やlazy属性で解像度が低い画像から高い画像に切り替わるような擬似的な表現をblurで行っています。

See the Pen blur animation by teradonburi (@teradonburi) on CodePen.

徐々に形が変わる出現・退出

clip-pathを使ったアニメーションです。
円形から矩形に変わります。
さらにclip-pathしたものに対してshadowをつけるには親要素側で指定してやります

See the Pen circle animation by teradonburi (@teradonburi) on CodePen.

光学迷彩

キ○グダムハーツの画面移動っぽいエフェクトだよ・・・ハハッ。
mask-imageでマスク画像で背景画像の切り取りをしています。

See the Pen optical-camouflage by teradonburi (@teradonburi) on CodePen.

グレー→カラー

あわせ技、グレー背景に色がついていく演出

See the Pen grey to color animation by teradonburi (@teradonburi) on CodePen.

フェードイン・フェードアウト

よくあるやつです。opacityをアニメーションしているだけです。

See the Pen fade-in fade-out by teradonburi (@teradonburi) on CodePen.

クロスフェード

複数の画像が時系列で切り替わります。
参考：Cross fading images

アルゴリズムは以下
n枚の画像があるとき
a=１枚の画像が表示する時間
b=クロスフェードする時間
累計のanimation-durationはt=(a+b)*n

animation-delay = t/n or = a+b

keyframesのパーセンテージとopacityの指定:
0% → opacity: 1
a/t*100% → opacity: 1
(a+b)/t*100% = 1/n*100% → opacity: 0
100%-(b/t*100%) → opacity: 0
100% → opacity: 1
なお、このアルゴリズムだとalternateは使いません

See the Pen crossfade by teradonburi (@teradonburi) on CodePen.

斬鉄剣

clip-pathで予め画像を２枚に分けておいてtransformで斬られたように見せる

See the Pen slash animation by teradonburi (@teradonburi) on CodePen.

文字背景アニメーション

background-clip:textとcolor: transparentで背景を文字で切り抜くことができます。
さらにgreyscaleで通常のグレー文字からレインボー文字にアニメーションしてみました。
何かの呪文とかヒエログリフぽい表現、ウェブフォントにも適応できます。

See the Pen clip-text animation by teradonburi (@teradonburi) on CodePen.

タイピング風に表示する

display: none状態だとanimationの初動が動作しないので使っていない。opacityを指定している。
このレベルになると生のCSSつらい

See the Pen letter animation by teradonburi (@teradonburi) on CodePen.

リストをかっこよく出す

シュッと横から出す

See the Pen list animation by teradonburi (@teradonburi) on CodePen.

おまけ

べ、別にあんたのために作ってあげたんじゃないんだからね！

See the Pen jump by teradonburi (@teradonburi) on CodePen.

　 Tweet
Qiitaで続きを読む

20200531のCSSに関する記事は7件です。

【Vue】イメージをhoverすると扉が閉まるように背景が現れて文字が表示されるCSSアニメーション実装

Vueバージョン確認

イメージをhoverするとカッコよく文字が表示されるCSSアニメーション実装

コンポーネント指向におけるCSS変数のベストプラクティス

1.はじめに(直感的なアイディア)

2.Component Name + CSS Variable Name

3.Component Name + Suffix + CSS Variable Name

4.Host CSS Variable

5.Host CSS Variable by SCSS

6.Host CSS Variable in Calc Function

7.結論

CSSアニメーションで「たべるんごのうた」を作った

CSSアニメーションで「たべるんごのうた」を作りました

はじめに

たべるんごのうた

CSSアニメーション+たべるんごのうた

仕様

おわりに

Sassをgulpでコンパイルする方法をまとめてみた

PHPと Vue.jsで簡易掲示板を作ろう〜その２( SCSS編)〜

初めに

目次

このパートでの完成イメージ

HTML部分の変更の記述

SCSSの記述

まとめ

この記事もいかがですか？

wordpress �制作したwebをワードプレス化したらCSSがうまく当たらない場合

中二病CSS

カラー→セピア

カラー→グレー

シルエット

ブラー→ブラーなし

徐々に形が変わる出現・退出

光学迷彩

グレー→カラー

フェードイン・フェードアウト

クロスフェード

斬鉄剣

文字背景アニメーション

タイピング風に表示する

リストをかっこよく出す

おまけ

日付別

タグ一覧

wordpress　�制作したwebをワードプレス化したらCSSがうまく当たらない場合