… 120deg); animation:bgcnca 15s linear 0s infinite; } .i2bgcnc{ position:relative; padding:0.6em; color:white; text-shadow:1px 1px 0px black; } ネオンのよう？それとも立体的な折り紙のよう？ コード <style>@keyframes bgcnca{0%{transform:rotate(0deg);}100%{transform:rot…

…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){b…

…w:hidden; animation:ltrspca 10s linear 0s infinite; } Little Strange Software コード <style>@keyframes ltrspca{0%,50%,100%{letter-spacing:0.1em;}60%,80%{letter-spacing:-0.3em;}70%{letter-spacing:40em;}90%{letter-spacing:1em;}}.ltrspc{height:2e…

…想の画像サイズ*/ animation:cncglda 10s linear infinite alternate;/*cncgldaというキーフレームを10秒かけてlinear再生。繰り返し回数inginite（無限）、一回再生後はalternate（逆再生）*/ } conic-gradientbackground-positionアニメーション どうも！LSSです！！ とりあえず試しに、conic-gradientをアニメーション化してみました。 コード <style>…

…20px 50%; animation:rtxta 10s linear infinite; } CSS面白いです^^ overflow:hidden; で、こんな効果も！ コード <style>@keyframes rtxta{0%,30%{transform:rotate(180deg);}40%,60%{transform:rotate(0deg);}70%,100%{transform:rotate(-180deg);}}.rtxtout{position:relat…

… .anmfkt1{animation:anmfkt1a 5s linear 0s infinite;} 今度はマウスカーソル関係なく、延々と「５秒周期でコントラストが異様に高くなる」のを繰り返すサンプルです。 transitionではなく、@keyframesとanimationを使用しています。 コード <style>@keyframes anmfkt1a{0%,50%,100%{filter:contrast(100%);}80%{filter:contrast(300…

…メーション コード animation-timing-functionの「steps」 ちなみに… カチコチ動くアニメーション @keyframes anmstpa{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } .anmstp{ display:inline-block; transform-origin:100% 50%; animation:anmstpa 60s steps(60,end) …

コード imax=15; txt='\n@keyframes moyaa{\n'; for(i=0;i\n'; txt+='\n'; gamen.innerHTML=txt; codexxx.innerHTML=txt.replace(/&/g,'&').replace(//g,'>').replace(/\n/g,''); どうも！LSSです！！ ブログの下書きには、「書き始めたけどうまくまとめられなかった記事」や「作ってみたけど説明が困難な記事」、「書いたけど意味が分から…

…0px 40px; animation:dotkeia 8s linear 0s infinite; } コード <style>@keyframes dotkeia{0%,80%{background-position:20px 0px,60px 0px;}85%{background-position:20px 0px,20px -10px;}90%{background-position:20px 0px,-20px 0px;}95%{background-positio…

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

…ize:200%; animation:bkhta 5s linear 0s infinite; } 爆発しますよ コード <style>@keyframes bkhta{0%,70%{text-shadow:none;}71%,100%{text-shadow:0px 0px 0px yellow,0px 0px 0px yellow,0px 0px 2px red;}85%{text-shadow:0px 0px 30px orange,0px 0px 30px oran…

…: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…

クリックで開始します // '+ans.substr(0,csr)+''+ans.substr(csr,1)+''+ans.substr(csr+1)+'';} function rw(){rireki.innerHTML='文字数:'+mjc+'一文字あたりの秒数:'+Math.floor(1000*ttls/mjc)/1000+''+rtxt;} function nextans(){ans=tng[Math.floor(tng.length*Math.random())…

…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(…