@Blog
過去の蓄積を見るために書く日記.
新着記事紹介を電光掲示板2CSSに切り替えました.
文字数[3568文字] この記事は4分28秒で読めます.
おはようございます.気温って徐々に寒くなるのではなくていきなり変わっていくものなのかも知れません、これも温暖化の性なのかも.
さて、「新着記事紹介を電光掲示板2CSSに切り替えました.」の話をしていきます.お気づきかも知れませんがトップページの新着記事紹介を変えました.これにより何得かは分かりませんが以前よりシンプルなトップページになった事は確かかも.
因みに自分はCSSがあまり好きではないのですが、CSSオンリーで電光掲示板を作れたのもChatGPTのおかげです.でも、彼の作った電光掲示板が良いなと思っています.ググっても上位表示しないけど一番、電光掲示板に近いCSSコードだと思います.
そのうち彼の作った電光掲示板CSSに変える可能性はあります.彼のコードを参照して作ってとChatGPTにお願いしても出てくるコードは全く別物ばかりで…呆れ顔.
トイウコトで今回作ったコードはそのうち変えますのでお裾分けです.
<div class="slide">
<ul>
<li>ABC TEST</li>
</ul>
</div> @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
.slide {
margin: 20px auto;
width: 90%;
/* スマホでも見切れないように */
max-width: 600px;
overflow: hidden;
background: #000;
border: 3px solid #111;
border-radius: 8px;
box-shadow: 0 0 20px #000 inset;
position: relative;
}
/* LED風ドット背景 */
.slide::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 4px 4px;
background-color: #302f2f;
pointer-events: none;
z-index: 0;
}
/* スクロールテキスト */
.slide ul {
display: inline-block;
margin: 0;
padding-left: 100%;
white-space: nowrap;
animation: SlideAni 15s linear infinite;
position: relative;
z-index: 1;
}
/* テキストスタイル */
.slide ul li {
display: inline;
margin: 0 80px 0 0;
font-size: clamp(10px, 2vw, 16px);
letter-spacing: 0.1em;
font-family: "DotGothic16", "Noto Sans JP", "MS Gothic", monospace;
color: #0f0;
text-shadow:
0 0 2px #0f0,
0 0 5px #0f0,
0 0 10px #0f0,
0 0 20px #0f0;
animation: Flicker 0.2s infinite alternate;
image-rendering: pixelated;
/* ピクセル感強調 */
filter: contrast(180%) brightness(1.3);
/* LEDっぽく */
}
/* 横スクロールアニメーション */
@keyframes SlideAni {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* チラつきアニメーション */
@keyframes Flicker {
0%,
18%,
22%,
25%,
53%,
57%,
100% {
opacity: 1;
}
20%,
24%,
55% {
opacity: 0.7;
}
}
/* --- レスポンシブ対応 --- */
/* タブレットサイズ */
@media (max-width: 768px) {
.slide {
max-width: 90%;
}
.slide ul li {
margin: 0 40px 0 0;
}
.slide ul {
animation: SlideAni 18s linear infinite;
/* ややゆっくり */
}
}
/* スマートフォンサイズ */
@media (max-width: 480px) {
.slide ul li {
margin: 0 24px 0 0;
}
.slide ul {
animation: SlideAni 22s linear infinite;
/* スマホではさらにゆっくり */
}
}
明日へ続く
3524番目の投稿です／232 回表示されています．
中の人🏠️
AIによるおすすめ記事
著者名
@taoka_toshiaki
※この記事は著者が40代後半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
ChatGPT, css, おかげ, オンリー, お気づき, お裾分け, お願い, ググ, コード, これ, シンプル, トイウコト, トップページ, もの, 一番, 上位, 今回, 以前, 別物, 参照, 可能, 好き, 掲示板, 新着, 明日, 気温, 温暖, 確か, 紹介, 自分, 表示, 記事, 電光,
コメントを残す