CSS3 センサー マウスの背景のちらつきと画像のスケーリングの動的効果< ;meta http-equiv="content-type" content="text/html;charset=gb2312"><br>/*タイトル背景*/<br>h2{背景:rgba (0 ,0,0,0.5);color:#FFF;padding:10px 0;width:300px;text-align:center;transition:opacity 0.5s 線形 0s;}<br>h2:hover{-moz-animation:bg .5s easy-in-out;-webkit-animation:bg .5s easy-in-out;}<br>h2,a{cursor:pointer;margin:10px auto;}<br>@-moz-keyframes bg{0%{background :rgba (144,24,53,0.18);}<br>25%{背景:rgba(144,24,53,0.5);}<br>50%{背景:rgba(144,24,53,0.1);}<br> 75% {background:rgba(144,24,53,0.5);}<br>100%{background:rgba(144,24,53,0.18);}} <br>@-webkit-keyframes bg{0%{background:rgba (144) ,24,53,0.18);}<br>25%{背景:rgba(144,24,53,0.5);}<br>50%{背景:rgba(144,24,53,0.1);}<br>75% {背景:rgba(144,24,53,0.3);}<br>100%{background:rgba(144,24,53,0.18);}} <br>/*虫眼鏡効果*/<br>a{display:block;width: 50px ;height:50px;border-radius:50%;background:#000;transition:opacity 0.2s Linear 0s;background:url(eye.png) no-repeat;}/*虫眼鏡として使用するだけ*/<br> a:hover{-moz-animation:heart_beat .5s easy-in-out;-webkit-animation:heart_beat .5s easy-in-out;} <br>@-moz-keyframes heart_beat{0%{-moz-transform:scale (1)}<br>25%{-moz-transform:scale(1.70)}<br>50%{-moz-transform:scale(0.9)}<br>75%{-moz-transform:scale(1.55)}<br>100%{ -moz-transform:scale(1)}}<br>@-webkit-keyframes heart_beat{0%{-webkit-transform:scale(1)}<br>25%{-webkit-transform:scale(1.70)}<br>50%{ -webkit-transform:scale(0.9)}<br>75%{-webkit-transform:scale(1.55)}<br>100%{-webkit-transform:scale(1)}}<br>div{width:500px;margin:0 auto ;border:solid 1px #ccc;padding:20px;background:rgba(255,255,255,0.5);text-align:center;}<br> http://www.999jiijiu.com/ マウスオーバーしてアニメーションを追加 フロントエンド エンジニアの生活 /h2>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
