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

WBOY
Release: 2016-06-24 12:13:56
Original
2548 people have browsed it

如何让按钮背景可以渐渐显示和渐渐消失?看这个网页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)
Copy after login


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

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

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

如有笔误处请指正。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!