CSSでライブ配信アピールアイコンの作成（2022年12月9日業務報告）

LIVE映像だとわかるようにしたい

動画上部にLIVEアイコンを設置、点滅で動きを出す。

/* 作業風景のライブアイコン */
.live_icon {
	display: block;
	border-radius: 5px;
	color: #fff;
	background-color: #e8383d;
	padding: 3px;
	font-weight: bold;
}
.live_icon::before {
	content: '◉';
	animation: flash 3s linear infinite;
	margin-right: 3px;
}
@keyframes flash {
  50% {
    opacity: 0;
  }
}
.flash {
  animation: blink 3s infinite;
}

ヘッダーの背景画像の下部分を徐々に白くする

.back {
    background: linear-gradient(180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, .8),
    rgba(255, 255, 255, 1));
}