Maison > interface Web > tutoriel HTML > 如何让按钮背景可以渐渐显示和渐渐消失_html/css_WEB-ITnose

如何让按钮背景可以渐渐显示和渐渐消失_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 12:13:56
original
2683 Les gens l'ont consulté

如何让按钮背景可以渐渐显示和渐渐消失?看这个网页www.iqztc.com上面的按钮鼠标放上去,会有个蓝色背景,可是蓝色背景出现很快,如何是慢慢地显示,然后鼠标移开是慢慢的消失?希望高手留个QQ。


回复讨论(解决方案)

用jquery可以实现 

JQUERY可以实现,如果是火狐可以参考CSS3中的keyframes

你说的应该是动画

我知道的三种方式
1. IE
 使用滤镜 filter:ahpha(opacity:value); value:可以是1,2,3....100
2.FF
 opacity属性;opacity:value 可以是0,0.1,0.2....1

以上两种只是给图片添加了透明度 要想实现从无到有 或者 从有到无 你需要自己写一个函数

var value = 100;var oImg = document.getElementsByTagName("img")[0];oImg .opacityVlaue = 0;if(oImg .iTimer) clearInterval(oImg.iTimer);oImg.iTimer = setInterval(function(){  if(oImg .opacityVlaue < 100) {  oImg .opacityVlaue += 10;  oImg.style["filter"] = "alpha(opacity:"+oImg .opacityVlaue+")";  oImg.style["opacity"] = oImg .opacityVlaue/ 100;  }else{  clearInterval(oImg.iTimer);  oImg.iTimer = 0;  oImg .opacityVlaue = 100;  oImg.style["filter"] = "alpha(opacity:"+oImg .opacityVlaue+")";  oImg.style["opacity"] = oImg .opacityVlaue/ 100; }} , 30)
Copier après la connexion


上面代码是从不透明到透明 反之亦然 改一些值就可以了

3.Chrome
  最简单
  css这样定义:
  -webkit-transition-duration:.2s;
  opacity:0;

  你在JS里面控制opacity.比如改变了你上面定义CSS的对象的opacity:1;他就自动有了动画效果。left, top等都可以生效。

如有笔误处请指正。

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal