CSS3.0のTransition - 動画効果
背景色動画効果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 背景色変換 </title> <style type="text/css"> div { width: 400px; height: 50px; border: 1px solid black; background-color: red; padding: 10px; /* CSS標準属性を指定する */ -moz-transition: background-color 4s linear; -webkit-transition: background-color 4s linear; -o-transition: background-color 4s linear; } div:hover { background-color: yellow; } </style> </head> <body> <div>mouseをのせると色が少しずつ変わる</div> </body> </html>
移動動画効果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 移動する </title> <style type="text/css"> img#target { position: absolute; /* 複数属性指定 */ -moz-transition: left 5s linear , top 5s linear; -webkit-transition: left 5s linear , top 5s linear; -o-transition: left 5s linear , top 5s linear; } </style> </head> <body> <img id="target" src="logo_small.jpg" alt="logo"/> <script type="text/javascript"> var target = document.getElementById("target"); target.style.left = "0px"; target.style.top = "0px"; // mouse downイベント document.onmousedown = function(evt) { // 座標指定left、top。 target.style.left = evt.pageX + "px"; target.style.top = evt.pageY + "px"; } </script> </body> </html>