简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

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

WBOY
Release： 2016-06-24 12:13:56
Original
2602 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等都可以生效。

如有笔误处请指正。

Related labels：
如何让按钮背景可以渐渐显示和渐渐消失
source：php.cn
Previous article：html 下拉框 如何 自动回行_html/css_WEB-ITnose Next article：网页插入MPG视频_html/css_WEB-ITnose
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
Latest Articles by Author
Latest Issues
饿了么的ios客户端，商家顶栏的实现？ 黄色部分的顶栏，下拉可以显示部分信息，上推的时候可以渐变消失，直到变成一个navigation controller的样式，同时ui的控件也会改变。 请问这个大概是如何实现的？ 有...
From 2017-04-17 17:55:38
0
2
345
ios - QQ个人资料导航背景渐入渐出效果 如图所示，个人资料页。大家可以打开QQ看看。 上滑，导航背景慢慢出现，下滑到顶部，导航背景慢慢消失。。 我可以做到这个效果，但是目前没他那种渐变动画。 我始终不知道这个动画效果怎么...
From 2017-04-17 14:37:06
0
2
303
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
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！