…eg ) 10%; animation: bgca 20s linear infinite; } こんな風になります。よく見ると４つの辺の中でも明るさがグラデーション変化していますね。 コード <style>@keyframes bgca{0%,20%,100%{background:yellow;}25%,45%{background:lightblue;}50%,70%{background:pink;}75%,95%{background:lightgreen;}}.b…

…0px 70px; animation:sankakua linear 15s infinite; } コード <style>@keyframes sankakua{0%,10%{background-position:60px 0px,40px 35px,0px 35px,60px 0px,20px 0px,40px 35px,0px 35px,20px 0px;}20%,30%{background-position:60px 0px,20px 70px,0px 35px…

…o-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%); animati…

…o-repeat; animation:rtesta 5s linear infinite; } コード <style>@keyframes rtesta{0%,100%{background-size:10px 10px;}40%,60%,80%{background-size:75px 75px;}30%,50%,70%,90%{background-size:100px 100px;}}.rtest{height:300px;background-image:radia…

…o-repeat; animation:15s curtaina linear infinite alternate; } 今、新しい時代の幕が開ける…！！ コード <style>@keyframes curtaina{0%,20%,80%,100%{background-size:100% 12000%,100% 12000%;}40%,60%{background-size:100% 2000%,100% 2000%;}0%,30%{background-position…

…fcc 51%); animation:gradienttesta 20s linear infinite; } linear-gradientの角度をアニメーション変化 コード <style>@keyframes gradienttesta{0%,50%,100%{background-size:100% 100%;}25%{background-size:1000% 100%;}75%{background-size:100% 1000%;}}.gradienttest{…

… } .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>@keyframes test1a{0%,50%{background:radial-gra…

…mportant; animation:divers 15s linear infinite; } <style>@keyframes divers{0%{background-position:0px 0px,0px 0px,0px 0px;}100%{background-position:-800px 1600px,0px -800px,0px 0px;}/*ダイバー画像２種の変化後の位置を800の倍数で指定*/}article{background-image:/*ダ…

… } .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 25p…

…,55% 40%; animation:maruinoa 6s linear infinite alternate; } まるいの（猫っぽいけど猫ではない） 一応、コード 使えるようなものじゃないですが、一応どんなコードで描いているかだけ。 <style>@keyframes maruinoa{0%,70%{background-position:18% 40%,40% 42%,16% 35%,40% 34%,30% 55%,76% 62%,100% 61%,100% 70%…

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

…00 100%); animation:cbig 5s linear infinite; background-repeat:no-repeat; padding:10px; color:#ffffff; } なんだかよく分からないものができました^^; コード <style>@keyframes cbig{0%{background-size:0% 0%;background-position:50% 50%;}50%{background-size:100% 100%;b…

… 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> 作成されたコード ctr.addEventListener('input',chg,false); chg(); function…

…n:50% 0%; animation:swinga ease-in-out 2s infinite alternate; } ブランコ ←のように、ゆらゆら揺れます。 文章は普通に書くと、ブランコの右に並ぶ事になります。 これは「float:left;」をブランコに設定しているためで、その記述を削除すると文章はブランコの下に来る事になります。 コード <style>@keyframes swinga{0%{transform:rotateX(60deg);}100%{tra…

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

…SSサンプルです。 animationと3Dを使い、目立たせる効果を作ってみました^^ サンプル コード コード書き換えについて おまけ サンプル @keyframes grgra{ 0%,30%{transform:rotateX(-5deg) rotateY(360deg);} 100%{transform:rotateX(-5deg) rotateY(0deg);} } .grwk0{ position:relative; width:300px; text-align…

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

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

…0px 50px; animation:wga linear 20s infinite; } なんだかよくわからないものを作ってみました。いやぁ、以前からなんとなく「ウィーン、ガシャンって感じのCSSを作ってみたい」と思っていたのを、カタチにしてみた感じですが、これをカッコよく応用できないかなぁ？ コード <style>@keyframes wga{0%,23%{background-position:0px 0px,0px 0px;}25%,48%{background-p…

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

…or:black; animation:santa 20s linear infinite; } #title a{ color:black; text-shadow:0px 0px 7px yellow; } article{ background-color:transparent!important; color:white; } h2{ background-image:linear-gradient(red 40%,green 80%); border-radius…

…t,repeat; animation:linemovea 1s linear infinite; } ある動画で、CSSで奇妙な動きを表現したものがあり（動画にはコードでてこず）、推測しながら劣化コピーを試みてみました。 SVGやJavaScript不使用で、CSS・HTMLのみでこういう表現が出来るんだなぁ、というところまでいけたものの…自分のオリジナリティがない＆使いどころが謎なのでこれから考えようかな、と^^; ってなとこで、今回はこのへんで！ 次回もまた、よろしくお…

…; } #scr1{animation:kaiten1 20s linear infinite;} #scr2{animation:kaiten2 20s linear infinite;} #scr3{animation:kaiten3 20s linear infinite;} 昨年のクリスマス時点ではまだ身についていなかった、LSS自身のCSS知識として、 preserve-3d による立体表現 pointer-events: none; によるCSSからの要素クリック…

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

…eft: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,#888888f…

…削除しました。 次に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 infini…

…rder-box; animation:rndma 4s linear infinite; } .rndml{ display:inline-block; position:relative; width:100px; height:40px; box-sizing:border-box; } ボタン 「ボタン」をクリックすると、上のラジオボタン６つのうちどれかにチェックが入ります。 どこにチェックが入るか、がランダムです。 コード <style>@keyframes rnd…

…eft: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; } .cb02{ position:relative; transform-s…

…eft: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{ backgro…