マフラーのせいでCSSコードは少し長めですが、特に難しい事はしていませんので簡単にカスタマイズできると思います。 マフラーで使っているチェック柄については以下の記事で紹介しています。 CSS | いろいろなチェック柄背景のサンプル集 | ONE NOTES .container { width: 100%; height: 260px; background: #000; } .snowman { position: relative; top: 0; left: 50%; width: 0; height: 100%; transform: scale(1); } .head { position: absolute; top: 75px; width: 115px; height: 110px; background: #FFF; border-radius: 50%; transfo

特に難しい事はしていませんので簡単にカスタマイズできると思います。 太陽光「.sunset」は中央に配置、描画部分は疑似要素にして離した場所に設置して元を回転さる事で本体の周りを一周させています。 この方法は以下の記事が参考になると思います。（テキストなので疑似要素は不要ですが。） CSS | 円形に沿ったテキストを表示する方法 | ONE NOTES .container { width: 100%; height: 260px; background: #000; } .sun { position: relative; top: 0; left: 50%; width: 0; height: 100%; transform: scale(1); } .body { position: absolute; top: 130px; width: 110px; height: 110px;

それぞれ適当に透過させたりしています。 特に難しい事はしていませんので簡単にカスタマイズできると思います。 .container { width: 100%; height: 260px; background: #000; } .fried-egg { position: relative; top: 0; left: 50%; width: 0; height: 100%; transform: scale(1); } .white { position: absolute; top: 130px; width: 260px; height: 170px; background: #d3d3d3; border-radius: 50% 50% 50% 70%/50% 50% 70% 60%; transform: translate(-50%, -50%); } .white::bef

CSSのアニメーションを利用した徐々に要素の背景色を徐々に変化していくサンプルコードです。 2色バージョンと5色バージョンで紹介しています。 徐々に背景色を変更するCSSアニメーション（2色）背景色を変更させるCSSアニメーションのサンプルコードの2色バージョンです。 See the Pen CSS gradually change background color animation 2 by yochans (@yochans) on CodePen. <div class="container"></div>animationプロパティには20秒（アニメーション時間）、linear（開始から完了まで一定のアニメーション速度）、infinite（アニメーションを繰り返す）を指定しています。 @keyframesではbackground-colorにて背景色を変更、2色目を50％に指定し

CSSでテキストを左から流れるように表示するアニメーションを作成する方法を紹介しています。 言葉のチョイスの問題ですが、もし「流れるテキスト」という意味合いでこのページにアクセスしてしまった場合は以下の記事が目的のものかもしれません。 流れるようにテキストを表示するSee the Pen CSS | Slice Text by yochans (@yochans) on CodePen. HTMLにはテキストを表示する為のpタグを設置しています。 <p class="flowing">HELLO WORLD</p>今回のCSSアニメーションは横幅を可変させて左側から順に表示するようにしています。 横幅がテキストの幅より短い時にデフォルトでは折り返してしまいますので「white-space: nowrap」を指定して折り返さないようにしています。 合わせてはみ出す部分を「overflow:

弧を描きながら移動するCSSアニメーションを作成する方法を紹介しています。 transformのtranslateだけでXY移動させようとすると斜めの直線移動になってしまいます。 検索からこのページにアクセスした方はおそらくそこで困っているのではないでしょうか。 弧を描いて移動するCSSアニメーションCSSのみで弧を描いて移動するアニメーションの動作サンプルとサンプルコードです。 動作サンプルでは半円に沿って弧を描くCSSアニメーションを各方向別に4種類設置しました。 各方向セットなのとアニメーションの終了後に逆再生を付けていますので、正直ちょっと弧を描いている感が伝わりにくいサンプルになったと反省、ひとつひとつを見ると弧を描いて移動している事がわかります。 See the Pen CSS Slide animation (basic) by yochans (@yochans) on C

円に沿って移動するCSSアニメーション円の縁に沿って周りながら移動するCSSアニメーションサンプルになります。 円も描画していますが、要素の移動に必要なものではありませんので、無くても大丈夫です。 See the Pen CSS | Arc move animation by yochans (@yochans) on CodePen. HTML HTMLにはコンテナとして親要素class名「.container」を作成、その中に円の枠になる「.circle」と回転する要素「.item」を設置しています。 <div class="container"> <div class="circle"></div> <div class="item"></div> </div>円、要素ともにpositionプロパティを使って絶対値で配置しています。 また、ともに起点は円の中心点になっています。 円の

矢印が伸びるCSSアニメーションCSSだけで作成する矢印が画面外、あるいは要素の外側から伸びてくるアニメーションデザインの実装サンプルとサンプルコードになります。 伸びる矢印アニメーション。 これまた需要があるのかわからないモノを作りましたが、いつもの事ですか。 4方向分セットで記述していますので、わかりにくいかもですが下部にて個別にも紹介しています。 See the Pen CSS | Arc move animation by yochans (@yochans) on CodePen. HTML部分にはコンテナとなる親要素「.container」をdivで作成しています。 矢印はクラス名「.arrow」を作成し、4方向分の追加クラス名を付けています。 <div class="container"> <div class="arrow left-to-right"></div> <di

要素を斜め移動させるCSSアニメーションHTML要素を斜めに移動させるアニメーションのシンプルなCSSコードサンプルです。 See the Pen CSS | Afterimage animation by yochans (@yochans) on CodePen. HTMLには親要素とする「.container」と、その中に移動させたい要素「.item」を設置しています。 <div class="container"> <div class="item"></div> </div>要素を移動させるCSSコードは、主には top や left を操作する方法と、transform を操作する方法の2タイプがあります。 サンプルでは transform の translate を使って要素を移動させています。 translate(0, 0) から translate(150px, 150p

CSSだけでマウスホバー時に画像などのHTML要素がクルッと裏返るフリップアニメーションのサンプルを紹介しています。 マウスホバーで裏返るCSSアニメーションフリップアニメーションを出来るだけシンプルに作成した動作サンプルとサンプルコードになります。 サンプルでは、要素にカーソルを合わせると180度回転して裏返ります。 See the Pen CSS | Mouse hover VS Display none ROUND 1 by yochans (@yochans) on CodePen. HTMLには裏返すアイテムとなる「.item」、その中に前面になる「.front」、背面になる「.back」を設置しています。 前面と背面のdivにてカスタマイズは簡単におこなう事が可能です。 <div class="item"> <div class="front"><p>FRONT</p></di

CSSで簡単に立方体（正六面体、キューブ）を作成する方法を紹介しています。 See the Pen CSS | Rotating cube by yochans (@yochans) on CodePen. 立方体を作成する方法CSSの「transform-style」に「preserve-3d」を指定すると、その子要素は立体的な配置が可能となります。 See the Pen CSS | cube by yochans (@yochans) on CodePen. CSSにて立方体を作成するのに、最低限必要なHTMLとCSSコードになります。（色指定など視覚的に必要なものも含まれます。） HTMLでは、本体となる要素と各面にあたる子要素を6つ作成します。 各面にテキストやアイコンを入れる場合はこの子要素の中に追加します。 <div class="cube"> <div></div> <di

CSSのpreserve-3dを使って、3Dな円柱を作成する方法を紹介しています。 See the Pen CSS | Cylinder by yochans (@yochans) on CodePen. 円柱の作り方（3D）この記事のサンプルではCSSの「transform-style」に「preserve-3d」を指定した立体的な円柱の作成となります。 コンテナの作成最初にコンテナとなる本体を作成します。 <div class="cylinder"> </div>.cylinder { margin: 30px; width: 200px; /* コンテナサイズ */ height: 200px; /* コンテナサイズ */ position: relative; transform-style: preserve-3d; transform: rotateX(-25deg) rota

CSSのpreserve-3dを使って、3Dなピラミッド型を作成する方法を紹介しています。 See the Pen CSS | っっｘ by yochans (@yochans) on CodePen. ピラミッド型の作り方（3D）この記事のサンプルではCSSの「transform-style」に「preserve-3d」を指定した立体的なピラミッド型の作成となります。 3D型より需要がありそうな断面図的な階層ピラミッド型のサンプルコードも作成しようとは考えています。 ピラミッド型に必要な要素です。 本体（コンテナ）底面側面×4HTML構造<div class="pyramid"> <div class="bottom"></div> <div class="wall front"></div> <div class="wall back"></div> <div class="wall

CSSでtransform-styleのpreserve-3dを使って、3Dなサイコロを作成する方法を紹介しています。 See the Pen CSS | 3D Dice by yochans (@yochans) on CodePen. 主にダイスの目の設定などについて書いています。 角丸にしたり、隙間をあけたりと多少サイコロっぽく（努力は）していますが、サイコロデザインの元としている立方体の作成方法と殆ど同じです。 立方体の作り方は別記事で紹介しています。 3Dサイコロの作り方この記事はCSSの「transform-style」に「preserve-3d」を指定した立体的なサイコロの作成手順となります。 本体（コンテナ）側面×6サイコロの出目本体と側面については省略しますが、CSS | 3Dな立方体の作り方 | ONE NOTESにて書いていますので、宜しければ見てあげて下さい。 HT

CSSで円に影を付けて立体的な球体を作成する方法です。 See the Pen CSS | 3D Sphere 2 by yochans (@yochans) on CodePen. transform-styleのpreserve-3dを使った3D球体の作り方は以下記事でも紹介していますので宜しければ。 立体的な球体を作成する方法HTML構造<div class="sphere"></div>円を作成する正方形サイズの要素をborder-radiusで丸めてシンプルな円を作成します。 背景色は白色を指定していますので、影を付けていない状態では確認する事ができません。 .sphere { width: 150px; height: 150px; margin: 50px 30px; border-radius: 50%; position: relative; background: #F

CSSで立体感のある地球儀を作成する方法を紹介しています。 See the Pen CSS | Globe by yochans (@yochans) on CodePen. シンプルな球体の作り方について、以下記事でも紹介しています。 地球儀の作り方 HTML構造動作サンプルで紹介している地球儀に使っているHTML構造です。 <div class="globe"></div>円と地図円を作成して、背景に世界地図の画像ファイルを指定、地図の画像は2つ分繋げています。 background-sizeで「auto 100%」と指定して要素サイズに画像の高さを合わせます。 .globe { width: 150px; height: 150px; margin: 30px; border-radius: 50%; position: relative; background: url('http

CSSで立体感のあるサッカーボールを作成してクルクル回す方法を紹介しています。 See the Pen CSS | Soccer ball by yochans (@yochans) on CodePen. （エセ）球体の作り方について以下の記事で紹介しています。 立体的なサッカーボールを作成する方法立体的なサッカーボールを作成してCSSアニメーションで回転させるサンプルコードです。 3D、立体と記述していますが、サッカーボール柄を移動させてそれっぽく見せているだけです。 <div class="soccer-ball"></div>テクスチャ画像として適当に作ったシームレスなサッカーボール柄を利用しています。 background: urlで画像ファイルのパスとrepeatを指定する事で繰り返し描画に設定します。 background-sizeで画像の表示サイズを調節しています。 .so

要素を移動させた時に残像が残る感じにしたCSSアニメーションのサンプルコードになります。 要素がテキストや画像だとそのままでは使えませんし、このページに検索からアクセスされた方は、おそらくはこれ以外の方法を探している方だと思われーー 残像はGoogle翻訳で「Afterimage」ですが、そのあたりで検索しても良い情報は見つからず。 もっと良い英単語があるのか、いや、そもそも「残像」という言葉の類義語があって、実は皆その言葉を私の知らないところでヒソヒソ楽しんでいるのかい？ @keyframesをめちゃくちゃ細かく設定すれば、ひとつのHTML要素でも一瞬戻したりして残像を演出できそうでしたけど、もうJavaScript使いますよねってレベルで、、、今回はこれで^^ 要素の移動時に残像が残るCSSアニメーションSee the Pen CSS | Move along a circle ani

ピュアなCSSのみで雪を降らせてみたアニメーションサンプルです。 以前作成して紹介している雨が降るの雪バージョンになります。 雪が降るCSSアニメーションサンプルCSSのanimationプロパティを使って出来るだけランダムな感じで雪が降るアニメーションを作成してみた動作サンプルとサンプルコードになります。 See the Pen CSS | Alternately change colors in Table by yochans (@yochans) on CodePen. HTMLには雪の他、必要に応じて背景画像やテキストを入れれるように親要素 .container を配置しています。 今回は画像、テキストともに適当ですがサンプルとして入れてあります。 <div class="container"> <img src="https://1-notes.com/images/ishid