…d:#ddaaaa;animation:brbr 6s ease-in-out infinite;}.waku>div>div:nth-child(1){left:0;transform-origin:0 50%;animation-direction:alternate;}.waku>div>div:nth-child(2){right:0;transform-origin:100% 50%;animation-direction:alternate-reverse;}</…

…ァイルのURL');animation:1.5s infinite alternate;}.ozg div:nth-child(1){background-size:100% 400%;height:100px;background-position:0 0;animation-name:ozgb;}.ozg div:nth-child(2){background-size:100% 200%;background-position:0 50%;animation-name:…

…ition:0 0;animation:testb 1s linear infinite alternate;}.test div:nth-child(2){background-position:0 100%;animation:testa 1s linear infinite alternate,testb 1s linear infinite alternate;}</style><div class="test"><div> </div><div> </div></d…

…solid red;animation:testb 1s infinite alternate;}.test div:nth-child(2){border:1px solid blue;animation:testa 1s infinite alternate,testb 1s infinite alternate;}</style><div class="test"><div> </div><div> </div></div> 結局のところ、高さも縦位置も動作指定が必要？…

…loat:left;animation:bnda 3s linear infinite;}</style><div class="bnd"> </div><p>文章</p><p>文章</p><p>文章</p><p>文章</p> 色々… コード中、 height:100px; の数値を変更すると、「ボールが跳ねる範囲となっている見えない枠の高さ」が変わります。 コードの終わりの <p>文章</p> は、あってもなくても、多くても少なくてもOKですが、ボールの右側に回り込む事にな…

…no-repeat;animation:nazorzma 1.6s linear infinite;}</style><div class="nazorzm"> </div> なんなんでしょうね？これ スライム、というとしっくりくるでしょうか？ｗ コード中で、 width:280px;height:280px; の部分で横幅、高さが変更できます。 また、 background-image:radial-gradient(farthest-side,#ccccff 99%,#c…

…します。三本締めのリズムですねｗ（三本じゃ済まないですが） ↑こうすると…波線の形からもお分かりいただけるかと思いますが「三々七拍子」になります。 再生速度 今回のツールでは全体の再生速度設定はつけていません。 が、生成されたコード中に animation:rzma 10s linear infinite; という箇所があるので、この「10s」の数値を小さくすると速く、大きくすると遅い動きに変更できます。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…gn:center;animation:rzma 4s linear infinite;}</style><div class="rzm">たんたたたんたん、たんたん♪</div> 要となるのは%指定部分 リズムの要となるのは%の指定部分で、上記コード上の赤太字部分です。 実際に与える効果を指定しているのは青太字部分のtransformプロパティです。 変化させたいプロパティの値を２種類、用意できれば、青太字部分を書き換えると、「たんたたたんたん、たんたん♪」のリズムで変化し…

…000% 100%;animation:rbwa 15s ease infinite;}</style><div class="rbw"> </div> さほど目新しいものはないサンプルですが^^; 以前の little-strange.hatenablog.com に近い見た目で、動く区切り線です。 記事構造は定型文ですが、コードについては新PCで手打ち。 ここまで書いたところで感じた事を列挙してみます。 キーボード、もっと使いにくいかと覚悟していた割には、結構普通に打てて…

…no-repeat;animation:hrcrka 15s linear infinite;}</style><div class="hrcrk"> </div> コード概要 コードの大部分がkeyframes定義（アニメーションの動きを設定）になります。 動いてる玉を描いているのは「radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%),」の部分で、５つとも同じように描いていますが、それぞれ…

…var(--sz);animation:stardragonx 3.5s ease-in-out var(--d) infinite alternate,stardragony 1.07s ease-in-out var(--d) infinite alternate;}.stardragon div:nth-child(1){--d:0.1s;--sz:60px;}.stardragon div:nth-child(2){--d:0.2s;--sz:56px;}.stard…

…c4) 100%);animation:d3dzx var(--t) ease-in-out calc(var(--t) / 2) infinite alternate,d3dzy var(--t) ease-in-out infinite alternate;}.d3dz div:nth-child(2){--i:30%;--z:1;--s:10px;--t:4s;--c1:#888844;--c2:#cc8844;--c3:#ffff00;--c4:#ffff0000;}…

…100% 300%;animation:shtstra 1.4s linear infinite,shtstrb 7s linear infinite;}</style><div class="shtstr"> </div> 仕組み 二種類のグラデーションを重ねて表示し、下のグラデーションは上から下に、上のグラデーションは右に行ったり左に行ったり、を動作タイミングが重ならないようにしています。 上のグラデーションには透過色のスリットが入っており、そのスリットから下のグラデーシ…

…no-repeat;animation:d3dzx 5s ease-in-out 2.5s infinite alternate,d3dzy 5s ease-in-out infinite alternate;}.d3dz div:nth-child(2){background:radial-gradient(farthest-side,#ffffff 49%,#ffcc00 50%,#ffcc0000 100%) 50% 50%/80px 80px no-repeat;z-…

…no-repeat;animation:d3dax 2s ease-in-out infinite alternate,d3day 1.8s ease-in-out infinite alternate;}</style><div class="d3d"> </div> 遅延の指定を無くし、「横の動き」を2s（２秒）、「縦の動き＋サイズ変更」を1.8s（1.8秒）にしてみました。 1周ごとに0.2秒（alternateによる往復で0.4秒）づつずれ、10周で一周分のズレになる…

…no-repeat;animation:d3dax 5s ease-in-out 2.5s infinite alternate,d3day 5s ease-in-out infinite alternate;}</style><div class="d3d"> </div> ２つのkeyframesで「横の動き」と「縦の動き＋サイズ変更」を分けています。 赤文字の5sがアニメーションの再生時間（5秒）です。alternateをつけているので、実際に一周するのには倍の10秒か…

…,#000000);animation:stardusta 20s linear infinite;padding:10px;color:white;}</style><div class="stardust">流星群をCSSで作ってみました。</div> あとがき その昔（HTML4.0の時代）に、JavaScriptを使って流星群を作ってみた事がありましたが、「CSSだけでそれっぽい事ができないかな？」と試みたのが今回のコードです。 仕掛けとしては、 little-str…

…keyframesとanimationを使ったCSSアニメーションを色々試みてきました。 とっつきにくいながらも、分かってくると面白いkeyframesですが、LSSだけ分かっていても他の方が置いてけぼりだと「コードを少し変えて使いたい」時などに手をつけられない、というのがありそうです。 今回はこれまでに自分が理解してきたkeyframesアニメーションを、keyframes定義の内容に絞って、簡単なものから徐々に手を加えていく様子を記事にしてみました。 その１ シンプルに落…

…important;animation:trwavea 15s linear infinite;}</style> 赤太字で書いた「25% 75%」は波紋の中心位置（横・縦）です。 0～100%の間で自由に設定できますが、３か所の設定を合わせる必要があります。 #ffeebbが波紋の色で、こちらもお好きな色に変更可能です^^ と、なにげなく仕込んだコードを晒してみましたｗ はてなブログの「編集 見たまま」で設定できる「大見出し」はh3、「中見出し」はh4、「小見出し」はh5で…

どうも！LSSです！！ つい先日、おかえりモッキンバードという記事にて、７月７日に移転オープンした喫茶店の記事を書きました。 調査漏れの事項があったため、「まぁまたそのうち次回行った時に確認しよう」と思っていたのですが…思いのほか、そのタイミングが早くやってきましたｗ というのも、本日、高校時代からの友人から連絡があり、神戸に帰ってくるとの事で「じゃあ昼飯でも」という話になったんですね。 お昼はLSSが良く行くラーメン屋さんに案内する事にして（常連にトッピング無料サービス有、…

…no-repeat;animation:trwavea 3s linear infinite;}</style><div class="trwave"> </div> 赤太字部分が「横位置 縦位置」を指定しています。３か所の数字を合わせておく必要があります。 元コードには無かった「at」指定を追加しています ２つのradial-gradient内にそれぞれ「at 0% 50%」を追加しています。 元のコードにはatを指定していませんでしたが、指定を省略した場合には「at 50…

…no-repeat;animation:trwavea 3s linear infinite;}</style><div class="trwave"> </div> 【CSS】（トリッキーな方法で）透過波紋！ - Little Strange Software からの追加・変更箇所を赤太字にしています。 コード改変の流れ まず、元の「透過波紋」は、 「下敷きグラデーション」と「部分透過した波紋グラデーション」の２枚を重ねて表示。 「部分透過した波紋グラデーション」だけをアニ…

…no-repeat;animation:trwavea 3s linear infinite;}</style><div class="trwave"> </div> コード中、青太字で書いた１０カ所の#8888ffが「水面の色」に当たる色になります。 違う色に変更する場合、１０カ所とも同じカラーコードに合わせる事になります。 トリッキーな方法 今回、どんな方法を使ったか、を解説します。 まず、背景background-imageに２つのradial-gradientを使用し…

どうも！LSSです！！ 「雨降りCSSコード生成ツール」完成しました！ 雨降りCSSコード生成ツール 使い方 雨降りCSSコード生成ツール 速度:秒（雨枠１つ分、横に移動するのにかかる時間）雨の色:雨の太さ:px雨の角度:deg雨の横位置:px（雨の長さにも影響）雨枠の幅:px雨枠の高さpx雨２の横ズレ:px雨２の縦ズレ:px雨３の横ズレ:px雨３の縦ズレ:px背景色グラデーション: コード 使い方 雨が降っているアニメーション、調整用コントロール、コード、があります。 調整…

…100% 100%;animation:rainya 1s linear infinite;}</style><div class="rainy"> </div> この「137」とか「69」といった数値が難点で…^^; 算出するのに三角関数を使用します。 アニメーションをスムーズにするのに、「雨ひとつあたりの入る枠の幅」を50px、雨の角度を110度、と決めた場合、「その雨の筋の方向にまっすぐ進むような動きで、なおかつアニメ１回再生後と再生開始時の雨の配置が同じになる」ように…

どうも！LSSです！！ little-strange.hatenablog.com は、実は書き始めた時は全く違うネタだったのが、書いてるうちにああなりました。 数日前から考えてるCSSネタがあるものの、どうにも煮詰まらなくて、結局違う形になっちゃったりしてますｗ とりあえず、その「煮詰まらない」ネタを暴露しちゃいます。 これ、どんな形に見えます？ コード（答え） ずらすのをアニメーションしてみるとよく分かります これ、どんな形に見えます？ …「辺の窪んだ菱形」、ですね。 こ…

…ack 48px);animation:twstara 40s linear infinite;color:white;font-weight:bold;font-size:150%;padding:10px;}</style><div class="twstar">瞬く星空</div> コード中２か所でてくる「300px」は、この「瞬く星空」の高さです。変更可能ですが、数値は合わせておいたほうが良いです。 オレンジ太字部分は星空の動きと関係のない、余白や文字に関する指定です…

…rent 90%);animation:testa 3s infinite alternate;}</style><div class="test">呼吸してるみたい</div> アニメ化できましたね！ クラス名とかテキトーですが^^;。 gradient系の ( ) の内容はアニメーションにならないですが、それ以外の指定部分は結構 融通が利くようです。 他にもborder-imageで色々試してはいるのですが…「複数の画像を重ねられない」「gradient系のサイズを固定で…

…no-repeat;animation:suimena 3s linear infinite;}</style><div class="suimen"> </div> コード解説 赤太字部分が追記・または書き換えた部分、取り消し線部分は削除してもOKな箇所（削除しなくても動作に支障ありません）です。 まず、background-imageプロパティが、 background-image:radial-gradient(中略),radial-gradient(中略),radia…

…no-repeat;animation:suimena 3s linear infinite;}</style><div class="suimen"> </div> radial-gradientが４つ並んでいますが ４つとも、 radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%) で内容は同じものをコピペしています。 これが１行＝１つの輪となりますが、サイズ違いで表示されてい…