以下のように書いてcssでdivに鏡面反射のエフェクトをかけるところまではうまくいったのですがjqueryでアニメーションをかけるとアニメーション中は鏡面反射の部分が消えてしまいます。
アニメーションが終わるとまた反射の部分も表示されるのですがアニメーション中も鏡面反射の部分を表示させておくことはできないのでしょうか?
どのように書いたらいいのか回答お願いいたします。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 6 <style type="text/css" media="screen"> 7 #box{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 -webkit-box-reflect: below 4px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.5, transparent), to(rgba(0,0,0,0.4))); 12 13 } 14 </style> 15</head> 16<body> 17 <div id="box"></div> 18 <script> 19 setInterval(function(){ 20 $('#box').animate({'left':'50','width':'50px'},500); 21 },3000); 22 </script> 23</body> 24</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/12 01:47