…c 120deg);animation:bgcnca 15s linear 0s infinite;}.i2bgcnc{position:relative;padding:0.6em;color:white;text-shadow:1px 1px 0px black;}</style><div class="bgcnc"><div class="ibgcnc"> </div><div class="i2bgcnc">ここに文章を書く</div></div> 強引に実現した方法…

…ound-color:#880000;width:100%;height:100%;animation:hlwna 30s ease 10s 1;}</style><div class="hlwn"> </div> なんだか、ひどいものが出来てしまいました^^; サンプルとして置くのもやめておきますし、使用も決してオススメはしませんが、このコードからどういう事が起こるかを推理してみるのはいいかもですね？ｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…:relative;animation:pdwa linear infinite alternate;display:inline-block;width:12px;height:12px;}.pdws:nth-child(4n+1){background-image:radial-gradient(circle at 50% 50%,#ff666640 0%,#ff6666ff 50%,#ff666600 51%);}.pdws:nth-child(4n+2){backgr…

…ow:hidden;animation:ltrspca 10s linear 0s infinite;}</style><div class="ltrspc">Little Strange Software</div> コードをコピペしてから、赤文字部分を好きな言葉に変えて使う事ができます^^ ただ演出の都合上、「はみ出した部分は表示しない」overflow:hidden;を使用しているため、画面幅の狭いスマホ環境では横がはみ出した部分は表示されないため、スマホでも見られるよ…

…仮想の画像サイズ*/animation:cncglda 10s linear infinite alternate;/*cncgldaというキーフレームを10秒かけてlinear再生。繰り返し回数inginite（無限）、一回再生後はalternate（逆再生）*/}</style><div class="cncgld">conic-gradient<br />background-positionアニメーション</div> 青文字はコメント部分で、削除しても動作に支障ありま…

…-20px 50%;animation:rtxta 10s linear infinite;}</style><div class="rtxtout"><span class="rtxtin">CSS面白いです^^</span></div><div class="rtxtout"><span class="rtxtin">overflow:hidden;</span></div><div class="rtxtout"><span class="rtxtin">で、こんな効果…

…keyframesとanimationを使用しています。 コード <style>@keyframes anmfkt1a{0%,50%,100%{filter:contrast(100%);}80%{filter:contrast(300%);}}.anmfkt1{animation:anmfkt1a 5s linear 0s infinite;}</style><p><img src="画像ファイルのURL" alt="中略" width="中略" height="中略" l…

…メーション コード animation-timing-functionの「steps」 ちなみに… カチコチ動くアニメーション 60秒で一周します。 コード <style>@keyframes anmstpa{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.anmstp{display:inline-block;transform-origin:100% 50%;animation:anmstpa 60s…

コード どうも！LSSです！！ ブログの下書きには、「書き始めたけどうまくまとめられなかった記事」や「作ってみたけど説明が困難な記事」、「書いたけど意味が分からないもの」などが残りがちですよね？ｗ そんな下書きの中から、ひとつ拾いあげてきました。 …謎の物体（？）がうにょうにょと うごめいていますｗそしてそのアニメーションを書いたCSSコードも同時に出てきていますが、コードのほとんどが「一見、でたらめに見える数字と%がいっぱい」入っていますね。 実はこれ、「一見、でたらめ」ど…

…80px 40px;animation:dotkeia 8s linear 0s infinite;}</style><div class="dotkei"> </div> 使い方と仕組み コード全文を、使用したいWebページやブログ記事にコピー＆ペースト。 そして最後の一行、 <div class="dotkei"> </div> を、この飾り罫を仕込みたいところに移動します。 <style>から</style>が書かれたページ内であれば、この最後の一行はいくつでも配置でき…

どうも！LSSです！！ 今日は、ちょっと目的があって三宮をぶらついてきました。 まずは腹ごしらえ！ 続いて向かうは さんセンタープラザ 調査開始！ 初iPhone！ 触ってみた感想 ブログの動作確認 まずは腹ごしらえ！ まずは昼食です。 ランチメニュー「大盛焼肉定食」！と、写真の撮り方が下手で伝わらないかもですが、結構ボリュームあります。なお、写真右に見切れていますがポテサラがついていますｗ ランチタイム以外は食べ放題がメインのお店ですが、ランチ時のこれもボリュームは十分あっ…

…size:200%;animation:bkhta 5s linear 0s infinite;}</style><p><span class="bkht">爆発</span>しますよ</p> keyframesアニメーションも慣れてくると この程度のものなら即興で書けるようになってきましたｗ ↓何度か解説っぽい事をしていますので、詳しく知りたい方は参考にしてください^^ 【CSS】再び！キーフレームアニメーションについて CSSでkeyframesのanimationをやっ…

…:100% 50%;animation:bfrnda1 8s linear 0s infinite;}.bfrnd2{display:inline-block;transform-origin:50% 50%;animation:bfrnda2 8s linear 0s infinite;}.bfrnd3{display:inline-block;transform-origin:0% 50%;animation:bfrnda3 8s linear 0s infinite;}…

…in:0% 50%;animation:bfrnda 8s linear 0s infinite;}--></style><p class="bfrnd">文の頭につけたマークが渦を巻いて回転するアニメーション</p> コード解説 .bfrnd:before{content:"＊";display:inline-block;transform-origin:0% 50%;animation:bfrnda 8s linear 0s infinite;} 「bfrnd」と名付けた…

…:relative;animation:txtanm1a 8s ease 0s infinite;}.txtanm1 p{transition:3s;position:relative;transform-origin:0% 0%;}.txtanm1 p:nth-child(odd){opacity:var(--txtanm1op1);transform:rotate(var(--txtanm1y1));}.txtanm1 p:nth-child(even){opacity:…

…ow:hidden;animation: tbds 16s linear 0s infinite;}.sptxt{position:absolute;width:90%;height:90%;top:5%;left:5%;opacity: var(--txtop);top:30%;text-align:center;z-index:1;color:white;text-shadow:1px 1px 0px black;transition:0.5s;}--></style><…

…: hidden; animation: tbds 8s linear 0s infinite; padding: 1em;"><img src="画像ファイルのURL" width="100%" /></div></div> やった事と言えば… 中身を画像にしたり、背景色を消したり、サイズを調節したりもしましたが、最大の違いはアニメーションの内容ですね。 0%{top:-20%;left:100%;}30%{top:5%;left:2%;}31%{top:5%;left:8…

…ghtgreen; animation: tbds 5s linear 0s infinite; padding: 1em;">呼ばれて飛び出てじゃじゃじゃじゃーん</div></div> 外側のdivについて divタグを入れ子にしています。（divタグをdivタグで囲んでいる、の意） そして外側のdivタグに、 width: 100%; padding-bottom: 75%; を設定しています。 widthは幅。100%はその親要素（この記事の例の場合、記事の表示部分）…

…ansparent;animation:goldanm 10s ease-in-out 0s alternate infinite;}--></style><p class="golda">きんきらきんのきーん</p> filter:drop-shadow というものを使用しました。 値の指定方法は filter:drop-shadow(右にずらす距離 下にずらす距離 ぼかしのサイズ 色); と、text-shadowの書き方とほぼ同じです。 数値や色を変える事で、また様々な…

…xt-shadowとanimationを使えば、文字がまとったオーラが動く様子が表現できるのでは？」 と、試してみました^^ text-shadowが霧散するサンプル コード ちょびっとコード解説 text-shadowが霧散するサンプル さぁ、夏のあつさを、ふきとばそう！ コード <style><!--@keyframes txtshda{0%{text-shadow:0px 0px 10px #ff0000;}70%{text-shadow:0px 0px 10px #f…

…in:0% 50%;animation:katakata3d 5s linear 0s infinite normal;}.midashi3:hover::before{animation:katakata3d 5s linear 0s infinite normal,knanm2 0.5s linear 0s 1 normal;}--></style><div class="midashi3"><p>こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します！…

…eY(20deg);animation:knanm 0.5s linear 0s 1;}--></style><div class="frmk">ふりむきカーン</div> コード解説 <div class="frmk">ふりむきカーン</div> が振り向く要素です。 赤文字部分を好きな言葉に変えて使用できます。 .frmk{transform: perspective(100px) translateZ(-30px) rotateY(-8deg);transform-or…

…ansparent;animation:snrtanm 10s linear 0s infinite;}--></style><p><span class="snrta">戦慄！</span></p> あとがき この「戦慄！」はグラデーションを２つ使っていますが、すんなりアニメーションしてくれていますね^^ 動きもちょっとだけ凝ってみました。 0%{background-position:0px 0px;}60%{background-position:120px -270p…

…ansparent;animation:goldanm 10s ease-in-out 0s alternate infinite;}--></style><p style="background-color: gray; text-align: center;"><span class="golda">きんきらきんのきーん</span></p> 元ネタ 【CSS】テキスト装飾によく使うプロパティ おさらいとサンプル集 その更に元ネタ（グラデーション文字についての解説つき）は…

…nsition」と「animation」の２通りあります。 「transition」は「変化した時に、時間をかけてゆっくり変化するように間を補完する」もの、「animation」は「指定した時間経過に応じて変化させ、その間を補完する」というもの。 「勝手に変化する」のは「animation」のほうで、「transition」の方は「変化」自体を別の方法で発生させる必要があります。変化させる方法としてCSSで実現可能なのがクリックやホバー（マウスカーソルをあわせる）などのマウス…

…aseline','animation','animation-delay','animation-direction','animation-duration','animation-fill-mode','animation-iteration-count','animation-name','animation-play-state','animation-timing-function','backface-visibility','background','back…

クリックで開始します どうも！LSSです！！ ちと変わったタイピングゲームを作ってみました。 タイピングゲーム…なのですが、打つ単語が全て「CSSのプロパティ」ですｗ 遊び方 こういう方に特におすすめ！ あとがき 遊び方 「クリックで開始します」をクリックすると、CSSのプロパティがランダムでひとつ、出てきます。 キーボードでそれをタイプします。 大文字・小文字は区別しません。ハイフンも打つ必要があります。 一単語ごとに「最初の文字を打ってから、最後の文字を打つまでにかかった…

…no-repeat;animation:scha 40s linear 0s infinite;}--></style><div class="sch">隠された文字</div> 設定変更 --schc1:#ffff00ff;--schc2:#ffff0000;--schsz1:50%;--schsz2:60%; 変更しやすい要素を、CSS変数で一か所にまとめました。 一番上の --schc1 はサーチライトの色で、#ffff00（黄色）を不透過度 ff（全く透明でない）とし…

…ightgreen;animation:nobi 3s linear 0s infinite;}--></style><div class="test">テスト中…</div> <style>タグ内、「.test」へのCSS指定の中に、 animation:nobi 3s linear 0s infinite; という一行を書きました。 と同時に、width:100px;という指定はキーフレームに任せる事になるので、「.test」のほうでは削除しています。 これでもう、動いて…

…no-repeat;animation:dblsqa 10s linear 0s infinite;}--></style><div class="dblsq2">ボックスの中身</div> 他にも改変のやりようはあります 例えば線の太さを変えるなら、 background-size:3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px,3px calc(…