写真をキラリと光らせる CSS
CSS を使って写真(画像)にキラリと光る効果をつけてみました。
![ジェムとメロの雪遊び](https://pc-klik.com/wp-content/uploads/2019/02/play-in-snow.jpg)
![くりっく](https://pc-klik.com/wp-content/uploads/man-01.png)
HTML ソースはこんなかんじになります。
<div class=”reflection”>
<img src=”画像の URL”>
</div>
クラス reflection についての CSS はこちらです。
.reflection{
display:inline-block;
position:relative;
overflow:hidden;
}
.reflection:after {
content:””;
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
}
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
CSS を使うと、自分好みのレイアウトや効果をホームページに自由自在に設定できるんです。
お問い合わせボタンにこのスタイルを設定してみました。
思わずクリックしちゃいそうですね。
パソコン教室くりっくでは HTML や CSS をご自分のペースで効率よく習得できるプライベートレッスンを行っています。興味のある方はお問い合わせください。(上の [お問い合わせ] ボタンからどうぞ)
![](https://pc-klik.com/wp-content/uploads/2024/07/cta-01.webp)
Lighting テーマ使用
WordPress サイト開設
スターターパック
- デザイン済みパーツを組み合わせることで価格と納期を大幅削減
- プロが作ったクオリティが高いホームページ
- サポート付き・ご自分でかんたんに情報発信できます