各ブラウザ対応。( IE9 でも動く )
<style type="text/css">
.box_transition {
-webkit-transition: all 1.3s ease-out;
-moz-transition: all 1.3s ease-out;
-o-transition: all 1.3s ease-out;
transition: all 1.3s ease-out;
filter:progid:DXImageTransform.Microsoft.Fade(duration=0);
}
.set_image {
width: 526px;
height: 640px;
background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
}
</style>
<script type="text/javascript">
</script>
<div id="target" class="box_transition set_image"
onmouseover='try{this.filters[0].Apply();this.style.backgroundColor="#000";this.filters[0].Play();}catch(e){}'
onmouseout='try{this.filters[0].Apply();this.style.backgroundColor="#fff";this.filters[0].Play();}catch(e){}'
></div>
<script type="text/javascript">
(function() {
if(window.navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
str="";
str+="<style type=\"text/css\"> \n";
str+=".set_image:hover { \n";
str+=" background-color: #000; \n";
str+="} \n";
str+="</style> \n";
document.write(str);
}
else {
target.filters[0].Apply();
target.style.backgroundColor="#fff";
target.filters[0].Play();
target.filters[0].duration = 2;
}
})();
</script>
DAZ Studio 4 Pro は、ずっとタダのような気がしてきた・・・
インストール方法は ▼ これで OK ですが、使うとなるとヒマな時間がたくさん必要です。
無料の期間限定で3D人物CG作成ソフト「DAZ Studio 4 Pro」が入手可能 - GIGAZINE
ところで。
CSS の transition ですが・・・IE が無ければ ▼ これだけで動きます
<style type="text/css">
.box_transition {
-webkit-transition: all 1.3s ease-out;
-moz-transition: all 1.3s ease-out;
-o-transition: all 1.3s ease-out;
transition: all 1.3s ease-out;
}
.set_image {
width: 526px;
height: 640px;
background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
}
</style>
<div id="target" class="box_transition set_image"
onmouseover='this.style.backgroundColor="#000";'
onmouseout='this.style.backgroundColor="#fff";'></div>
こういう世の中はまだずっううううっと続くのです
posted by
at 2012-07-13 00:30
|
ウェブ
|
|
