…9deg) 10%;animation: bgca 20s linear infinite;}</style><div class="bgc">こんな風になります。<br />よく見ると４つの辺の中でも明るさがグラデーション変化していますね。</div> outsetの場合 border:30px outset #ffff88;だと手軽に立体っぽく出来ますが…左上と右下に切れ目がないのが気になります。 コード <div style="width: 250px; height:…

…80px 70px;animation:sankakua linear 15s infinite;}</style><div class="sankaku"> </div> 三角形のサイズ 今回は「底辺40px、高さ35px」としています。 これは「 2 : √3 」に近い比率で、正三角形っぽくしたかったところからの設定です。 動かすのにあたり「斜めの移動」も、横位置と縦位置を入れておくとスムーズに移動してくれています…が、「白」が出てくるのが心残りで^^; 「左斜め下への移…

…no-repeat;animation:radialsx linear infinite,radialsy linear infinite,radialsz ease-in-out infinite;}.radials div:nth-child(1){background-image:radial-gradient(farthest-side,#ffffff 5%,#00ffff 90%,#000000 99%,#00000000 100%);animation-durat…

…no-repeat;animation:rtesta 5s linear infinite;}</style><div class="rtest"> </div> 解説 radial-gradientの場合、( ) 内の冒頭でサイズ指定する事ができます。例えば、background-image:radial-gradient(50px 50px,black 99%,transparent 100%);とした場合。（この場合、50pxは半径のサイズになります）↓ こんな円を描く…

…no-repeat;animation:15s curtaina linear infinite alternate;}</style><div class="curtain"><br />今、新しい時代の幕が開ける…！！</div> 赤太字部分は好きな言葉に書き換えて使用できます^^（<br/>は改行です。） 傾きについて コード中、最初の方に書いている、 0%,20%,80%,100%{background-size:100% 12000%,100% 12000%;}40…

…ffcc 51%);animation:gradienttesta 20s linear infinite;}</style><div class="gradienttest">linear-gradientの角度をアニメーション変化</div> 肝要なのは「角度を指定しない事」 linear-gradient の、角度を入れる部分に「to left top」を指定しました。 これは、角度に囚われずに「対角線」をとってくれる便利な指定で、要素サイズが不確定な場合などに「角から…

…t;}.test1{animation:test1a 1s linear infinite;}.test2{animation:test2a 1s linear infinite;}.test3{animation:test3a 1s linear infinite;}.test4{animation:test4a 1s linear infinite;}</style><div class="test1"> </div><div class="test2"> </div><…

…important;animation:divers 15s linear infinite;}</style> 使用画像 以下３つの画像を適当に描いて使用しました。（いずれも、横400px 縦400px）ダイバーの画像については、背景を透過しています。画像サイズに対してのダイバーのサイズによって、画面上に現れる密度が変わります。 表示サイズと移動量の話 まず、コード中のbackground-size:800px 800px,800px 800px,100% 400px!im…

…px;}.hbtk{animation:hbtk0 12s linear infinite;/*周回のアニメーション呼び出し*/}.hbtk div{position:relative;transform:rotateX(20deg);/*蝶を前傾姿勢に*/}.hbtk div div{position:absolute;transform-origin:100% 50%;background-image:radial-gradient(25px 25px at 25px 2…

…size:7% 9%,8% 10%,14% 7%,18% 9%,20% 10%,12% 9%,33% 4%,33% 17%,30% 30%,80% 45%,30% 30%,60% 20%,55% 40%; animation:maruinoa 6s linear infinite alternate;}</style><div class="maruino">まるいの（猫っぽいけど猫ではない）</div> ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】では、うっかりbackground-positionの%指定のクセを忘れて難儀してしまいました^^; が、それはそれで面白い動きだったので、その失敗バージョンを元に何か作れないかな？と思いついたのが今回のネタになります。 自動フォトギャラリー コード ただし、ちょっと難点が… 難点その１ 縦横比 難点その２ 汎用性 一応、その「ややこしい」keyframesの内容について説明 自動フ…

…000 100%);animation:cbig 5s linear infinite;background-repeat:no-repeat;padding:10px;color:#ffffff;}</style><div class="cbox">なんだかよく分からないものができました^^;</div> 当初やろうとしていた事 当初、やろうとしていた事は↓こんな感じ。 keyframesの内容を、 0%{background-size:0% 0%;background-p…

… 75 100 %;animation:kaitena ease ease-in-out linear ease-in 1 3 5 10 20 s infinite alternate ;}</style><div class="waku"><div class="nakami"><img src="画像URL" 中略/></div></div> 作成されたコード 使い方 ぐるぐる回転している写真と、黄色い枠（ところどころ項目選択可能になっている）、その下にグレーの枠がありま…

…in:50% 0%;animation:swinga ease-in-out 2s infinite alternate;}</style><div class="swingwaku"><div class="swing">ブランコ</div></div><p>←のように、ゆらゆら揺れます。</p><p>文章は普通に書くと、ブランコの右に並ぶ事になります。</p><p>これは「float:left;」をブランコに設定しているためで、その記述を削除すると文章はブランコの下に来る…

… 0% 100%);animation:hitohula linear 1.5s infinite;}.foop{position:absolute;top:0px;left:0px;width:100%;height:100%;background:radial-gradient(80px circle at 35% 50%,#88ff8800 85%,#88ff88ff 85% 99.9%,#88ff8800 100%);animation:hula linear 3s …

…SSサンプルです。 animationと3Dを使い、目立たせる効果を作ってみました^^ サンプル コード コード書き換えについて おまけ サンプル 本日のハイライト NEW!! コード <style>@keyframes grgra{0%,30%{transform:rotateX(-5deg) rotateY(360deg);}100%{transform:rotateX(-5deg) rotateY(0deg);}}.grwk0{position:relative;wid…

…ight:50px;animation:boundimga1 16.5s linear infinite alternate,boundimga2 1.5s ease infinite alternate;background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210429/20210429222542.png);background-size:50px 50…

…left:15px;animation:dblanm1 15s linear infinite alternate,dblanm2 1s ease infinite alternate;background-color:#ddffdd;background-image:radial-gradient(15px,#88cc88ff 80%,#88cc8800 100%);background-size:30px 30px;background-repeat:no-repeat;…

…50px 50px;animation:wga linear 20s infinite;}</style><div class="weengashan">なんだかよくわからないものを作ってみました。<br />いやぁ、以前からなんとなく<br />「ウィーン、ガシャンって感じのCSSを作ってみたい」<br />と思っていたのを、カタチにしてみた感じですが、これをカッコよく応用できないかなぁ？</div> 概要 background-imageにgradient（今回の例ではc…

…-child(1){animation:l2r ease-in-out 5s infinite,btb1 linear 5s infinite;}.mame div:nth-child(2){animation:l2r ease-in-out 5s infinite,btb2 linear 5s infinite;}.mame div:nth-child(3){animation:l2r ease-in-out 5s infinite,btb3 linear 5s infin…

どうも！LSSです！！ ちょうど一年前の記事、【Merry】聖なる夜に【Christmas】と同様、この記事限定の背景仕様でお送りします。 年に一度の特別な日。 今年はどんなネタで行こうかな、と考えていました。 クリスマスツリー（ブロック製） 以前の記事の追加改変です そんなクリスマスイブ クリスマスツリー（ブロック製） スライダーを左右に動かすと、違う角度から眺める事ができます^^ 以前の記事の追加改変です little-strange.hatenablog.com ↑の記…

どうも！LSSです！！ 今年も残すところあとわずかとなりました。 一年を振り返ると…だいぶCSSばかりやってたような気がしますｗ ある動画で、CSSで奇妙な動きを表現したものがあり（動画にはコードでてこず）、推測しながら劣化コピーを試みてみました。 SVGやJavaScript不使用で、CSS・HTMLのみでこういう表現が出来るんだなぁ、というところまでいけたものの…自分のオリジナリティがない＆使いどころが謎なのでこれから考えようかな、と^^; ってなとこで、今回はこのへんで…

…px;}#scr1{animation:kaiten1 20s linear infinite;}#scr2{animation:kaiten2 20s linear infinite;}#scr3{animation:kaiten3 20s linear infinite;}</style><div id="fullscr"><div id="scr1"></div><div id="scr2"></div><div id="scr3"></div></div> 仕組み <…

…ght:300px;animation:10s kaiten infinite alternate;}.cube{position:absolute;transform-style:preserve-3d;width:50px;height:50px;}.cube div{position:absolute;box-sizing:border-box;width:100%;height:100%;}.cbs1{transform:translateZ(25px);}.cbs2…

…left:50px;animation:roundside 10s ease infinite alternate;}.box3d div{position:absolute;box-sizing:border-box;backface-visibility:hidden;}.box3dfronta{width:200px;height:150px;background-image:radial-gradient(closest-side,#888888ff 90%,#000…

…削除しました。 次にanimationプロパティも削除し、 transition:1.5s;transform:rotateX(-10deg) rotateY(-10deg) rotateZ(0deg); に置き換えています。 animationの代わりとなるのが「transition:1.5s;」で、これは「スタイル指定に変化があった時、1.5秒かけて徐々に変化するように」という指定です。※変化にかける時間1.5s以外の指定を省略しているので、変化タイミングはデフォルトのe…

… 15px 0px;animation:wa1a 5s linear infinite;}.wa2{box-sizing:border-box;width:100%;height:100%;border-radius:50%;background-color:#ffffff;/*内側の塗りつぶし色*/text-align:center;padding:20%;/*内部余白 文字量に併せて調整*/animation:wa2a 5s linear infinite;}</styl…

…order-box;animation:rndma 4s linear infinite;}.rndml{display:inline-block;position:relative;width:100px;height:40px;box-sizing:border-box;}</style><div class="rndmrs"><input id="rndmr1" name="rndmn" type="radio" /><input id="rndmr2" name="r…

…left:75px;animation:kaiten 20s linear infinite;}.cb01 div{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:5px;border:3px solid #ddddddc0;background-color:#ffffff;}.cbs1{background-image:radial-gradient(circle at…

…left:75px;animation:kaiten 20s linear infinite;}.cb01 div{position:absolute;box-sizing:border-box;width:100%;height:100%;padding:30px;text-align:center;font-size:50px;border-radius:5px;border:3px solid #ddddddc0;}.cbs1{background-color:#ffd…