以前からhtmlや、CSSコードで何かとお世話になっているid:litle_strangさん。
回転枠
私がCODE作れると思われてるといけないのでしっかり宣伝させていただきます。
先日書いたマサオ日記2022一周年で初めて背景CORDを使用させていただきました。
(LSSさんいつもありがとうございます)
今までに様々なコードを作成されて、色々な方が使用されているのを目にします。
かく言う私も「定型文」の中身はLSSさんのでいっぱいです✨
(｡▰´▵｀▰｡)
だって楽しいんだもの♪
id:kaeru2022さん極めてなんかいませんよ💦
全てはお膳立てが整った状態のものを使わせてもらっているだけです(￣▽￣;)
回る目次もそうです。
「NEW！！」の文字を変えたいときはHTML編集からNEW!!を消して入力します
是非使ってみてください！！
CORD👇
@keyframes grgra{
0%,30%{transform:rotateX(-5deg) rotateY(360deg);}
100%{transform:rotateX(-5deg) rotateY(0deg);}
}
.grwk0{
position:relative;
width:300px;
text-align:center;
border-radius:10px;
border:10px double #88ee88;
}
.grwk{
position:absolute;
top:0px;
transform-style:preserve-3d;
perspective:300px;
width:100%;
animation:grgra 3s linear infinite;
}
.grgr{
position:absolute;
text-align:center;
width:100%;
transform:translateZ(100px);
color:#ffff00;
text-shadow:2px 1px 0px #000000;
font-weight:bold;
}
</style>
<div class="grwk0">本日のハイライト
<div class="grwk">
<div class="grgr">NEW!!</div>
</div>
</div>
これをはてな「定型文貼り付け」内の"定型文を作成する"に保存して名前を付けておいてください。
背景の件
id:kazoomanさんPCだと続けて表示されるので全部色が変わりますね！
スマホだと記事ごとに分かれているので元の背景に戻っていました。
これも前から試してみたかったので使ってみました✨
今はコードを抜いてみたので見てみてください。
これは記事のどこでもいいので定型文で貼り付けたら完了です！
次はコード内で色を変更してみようと思っています。
👇この部分を抜けば戻ります。
コードになります✨
bgtxt='';
for(i=0;i<50;i++){
cr=Math.floor(Math.random()*60+30);
ct=Math.floor(Math.random()*50+cr);
cx=Math.floor(Math.random()*400+ct*2);
cy=Math.floor(Math.random()*400+ct*2);
cpx=Math.floor(Math.random()*100);
cpy=Math.floor(Math.random()*100);
bgtxt+='radial-gradient('+cr+'px '+cr+'px at '+ct+'px '+ct+'px,#ffffff30,#ffffff00) '+cpx+'% '+cpy+'%/'+cx+'px '+cy+'px repeat,';
}
document.body.style.background=bgtxt+'#aaaaff';
</script>
さっきの雲枠も、この虹色枠もLSSさんです！
次行くよ～
マサオたち「吹き出し」は自分で何とか出来ました(id:pikalogさんいなきゃできませんでしたが)
なんだか後半かぶりまくっていますのでご容赦ください。
分からんくて治せません(´;ω;｀)
ここまでお付き合いくださいましてありがとうございました。
※ブロ活隊募集しております！！
是非入隊して楽しくブログしましょう(#^.^#)
うちの隊長殿です。
ブロ活隊～楽しく交流しブログ界隈を盛り上げるブログ活動～ 隊員数－２３名－（２０２２．８．３０更新） - 🎬ふつ映-singark07-ブログ
隊士の皆様方です！
お待ちしてまーす！！！
