目标：

使用定时器实现div背景色的透明度动态改变
注意：这里没有进行兼容处理，别使用低版本的ie游览器！！！

代码：

 <!doctype html>
<html><head><title>div背景透明度动态改变的效果</title><meta charset="utf-8" /></head><body><div class="box" id="box"></div></body><style>.box{width: 400px;height: 400px;background-color: #0062CC;border-radius: 50%;background-size:100%;opacity: 0;}</style><script>window.onload=function(){var box = document.getElementById('box');var o = box.style.opacity=0;var isjia=true;var i =setInterval(function(){if(isjia){o+=(0.01);console.log(o);if(o>=1){isjia=!isjia;}}else{o-=0.01;console.log(o);if(o<=0){isjia=!isjia;}}box.style.opacity=o;},100);}</script>
</html>

展示地址：

示例展示地址

div背景透明度动态改变的效果相关推荐

vue改变html的背景,vue动态改变背景图片demo分享
如下所示: #bag{ width: 200px; height: 500px; margin: 0 auto; background: url(img/piao11.jpg) center no-r ...
【Android】动态获取当前背景图，根据背景图色动态改变字体颜色
情况描述:市面上很多的App,在展示头部的时候会采用用户传输的图片进行高斯模糊处理,然后设置成背景,这上面再展示其他的信息,例如,姓名,签名,编辑之类的操作按钮. 问题:但是字体颜色你是设置为白色,还 ...
android code修改border颜色,Android自定义TextView边框颜色（动态改变边框颜色以及字体颜色）...
最近写了一个带边框的TextView,因为项目中有许多地方需要用到一个带边框的TextView,而且需要根据不同的状态显示不同的边框颜色,当时的第一反应就是用shape做,但后来转念一想这要需要定义多 ...
Android 动态Tab分页效果实现
当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在的 ...
EasyUI/TopJUI之如何动态改变下拉列表框ComboBox输入框的背景颜色
简单记录一下前段时间接到客户需求:动态改变下拉列表框ComboBox输入框的背景颜色. 刚开始想的很简单在用户选择列表项的时候,判断一下列表框的value值添加相应的背景颜色就OK了,然而在实际操作 ...
改变mysql的菜单栏的颜色_导航条——动态改变导航菜单的背景颜色
1.概述在浏览一些网站时,当鼠标经过导航菜单某一项时,其背景颜色将切换为其他颜色,实现这种简单的效果会更吸引浏览者的注意. 2.技术要点本实例主要是应用JavaScript方法来动态改变标签的背 ...
dw改透明度_div 背景透明度如何设置一个div的背景透明度
本节向大家爱描述一下如何设置DIV背景颜色透明度,opacityOpacity设置或检索透明渐变的开始透明度,Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明.S ...
vue项目使用svg渲染地图并添加点击事件，动态改变背景颜色
需求: ui给了一张地图的svg,需要前端渲染出来并添加对应的点击事件,选中区域,背景颜色需要改变实现思路: 1.拿到需要渲染的 svg图片,把其中path的值赋值过来,所有数据一起组成一个新的js ...
jquery动态改变div宽度和高度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

div背景透明度动态改变的效果

目标：

代码：

展示地址：

div背景透明度动态改变的效果相关推荐

最新文章

热门文章