[CSS]7/7授業 スマホ対応、アニメ効果
スマホ対応
CSS3を利用したアニメ効果
- 背景をグラデーションで色変化。
- これに文字部分だけ透過させたpngを置くと、文字部分を色変化させたりできる。
- background-colorをrgbaにして透過させると、色をかぶせることができる。
#container { width: 300px; height: 250px; -webkit-animation: bg-color 8s linear alternate infinite; animation: bg-color 8s linear alternate infinite; } @-webkit-keyframes bg-color{ 0%{ background-color: #0CC;} 50%{ background-color: #3498db;} 100%{ background-color:#C00;} } @keyframes bg-color{ 0%{ background-color: #0CC;} 50%{ background-color: #3498db;} 100%{ background-color:#C00;} }