div计时器渐变/淡入淡出

最新推荐文章于 2021-06-18 22:39:24 发布
最新推荐文章于 2021-06-18 22:39:24 发布
阅读量217 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43618136/article/details/104293892
版权

div计时器渐变/淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: hotpink;

    }
  </style>
</head>
<body>

<div id="div"></div>
<input type="button" value="渐变" id="btn"/>

<script>


  document.getElementById("btn").onclick=function () {

    var opacity=10;
    //按钮的点击事件
    var timeId=setInterval(function () {
      //透明化了
      opacity--;
      if(opacity<=0){
        clearInterval(timeId);//清理定时器
      }
      //设置div的透明度
      document.getElementById("div").style.opacity=opacity/10;
    },200);


  };












</script>
</body>
</html>
广东话的蛇皇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现div淡入淡出
weixin_43732987的博客
02-01 8951
CSS实现div淡入淡出 css文件 #info{ display: none; top: 10%; left: 32%; width: 55%; height: 65%; background-color: white; z-index: 1002; overflow: auto; animation: anim 2s; } @keyframes anim { 0% {op...
html计时器控制div显示,使用计时器显示和隐藏多个div
weixin_39637545的博客
06-15 330
好吧，我试图模拟div已经存在了：123​messagecontainer中的div默认是隐藏的(不显示)：// in your css#messagecontainer > div {display: none;}​现在在我们的脚本中，我们创建一个每隔15秒运行一次的间隔，将前一个div设置为none，将当前div设置为display block：var top_level_div = d...
javascript date 时区_实战：仅用18行JavaScript构建一个倒数计时器
weixin_39692245的博客
11-07 176
有时候，你会需要构建一个JavaScript倒计时时钟。你可能会有一个活动、一个销售、一个促销或一个游戏。你可以用原生的JavaScript构建一个时钟，而不是去找一个插件。尽管有很多很棒的时钟插件，但是使用原生JavaScript可以带来以下好处：你的代码将是轻量级的，因为它将具有零依赖性。你的网站将表现得更好。你不需要加载外部脚本和样式表。你将拥有更多的控制权。你将会建立一个完全按照你的意愿来...
html div淡出,css3 – CSS如何使元素淡入淡出然后淡出？
weixin_29327977的博客
06-18 383
使用css@keyframes.elementToFadeInAndOut {opacity: 1;animation: fade 2s linear;}@keyframes fade {0%,100% { opacity: 0 }50% { opacity: 1 }}这是一个DEMO.elementToFadeInAndOut {width:200px;height: 200px;backgro...
用js实现div的淡入淡出
lyf937175448的博客
09-05 5916
#box{                  width:100px;height:100px;background:red;opacity:0.3;position:absolute; }            var oDiv=document.getElementById("box");      var alpha=0.3;      var timer;
Unity Shader - 模型消融/淡入淡出效果-附件资源
03-05
Unity Shader - 模型消融/淡入淡出效果-附件资源
JavaScript淡入淡出渐变简单实例
10-23
主要介绍了JavaScript淡入淡出渐变实现方法,涉及javascript页面元素样式的渐变操作技巧,非常简单实用,需要的朋友可以参考下
jQuery实现DIV层淡入淡出拖动特效的方法
12-11
本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法。分享给大家供大家参考。具体实现方法如下： 代码如下: <html> <head> <title>jQuery实现DIV层淡入淡出的拖动效果)</title> <...
WPF实现渐变淡入淡出的登陆窗口效果
10-25
主要介绍了WPF实现渐变淡入淡出的登陆窗口效果的方法,详细讲述了该效果的实现原理与功能代码,具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery 淡入/淡出效果函数用法分析
10-15
主要介绍了jQuery 淡入/淡出效果函数用法,结合实例形式分析了jQuery 淡入/淡出功能fadeIn()、fadeOut()、fadeToggle()及fadeTo()函数基本功能、使用方法与操作注意事项,需要的朋友可以参考下
div 窗口淡入淡出渐变效果
07-29
在我的爱社区网中要显示二级频道,以前用的下拉也不太好看，所以想做个淡入淡出的div 显示，开始只是想实现这个效果，后来干脆就封装成一个方法了，有两种渐变的效果，当然大家也可以拓展，如果有什么问题或好的方法好的建议可以qq联系 303409914，也希望大家能光临我现在专注的项目 www.2shequ.com. 压缩包里直接运行test.htm 页面就可以看到效果了
分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片淡入淡出效果
每天叫醒自己的不是闹铃 是娟 是梦 是理想。
08-17 1773
window.setInterval()方法可不仅仅帮我们做一个定时器这么简单，可以利用它实现很多好玩有用的特效。 PS: 其实可以看出，图片并不是背景图片，只是利用了DIV中position: absolute;z-index:6px这个属性让这个DIV不是处在第0层的位置，效果就好像是背景图片一样。 图片的淡入淡出，其实是用到了滤镜filter:alpha(opacity=0);这个这个
原生js实现淡入淡出效果
路飞的博客
09-01 1332
原生js实现淡入淡出效果
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
u014041540的博客
07-07 1043
原生JS实现淡入淡出效果 /*demo css*/ #demo div.box {float:left;width:31%;margin:0 1%} #demo div.box h2{margin-bottom:10px} #demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder} #demo d
JS运动之多物体运动淡入淡出
weixin_41586886的博客
07-15 184
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;JS运动之多物体运动淡入淡出:要点：当涉及多物体的运动时，最好不要有公共使用的变量，避免造成混乱&lt;/title&amp
利用Js中的定时器实现图片的淡入淡出
小翠学姐的博客
11-09 1170
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; #div1 { height: 200px;
HTML+CSS+JS一个简易的计时器
热门推荐
我的个人博客
07-18 1万+
一个粗糙的计时器， HTML部分： &lt;div class="wrap"&gt; &lt;div id="timer"&gt; &lt;span id="hours"&gt;00&lt;/span&gt; &lt;span&gt;:&lt;/span&gt; &lt;span id
WPF实现渐变淡入淡出的动画效果
最新发布
05-12
要实现WPF中的渐变淡入淡出动画效果，可以使用Opacity属性配合DoubleAnimation来实现。Opacity属性表示元素的不透明度，其值从0到1，0表示完全透明，1表示完全不透明。而DoubleAnimation则可以控制动画的开始值、结束值、动画持续时间等参数。 下面是一个简单的示例，实现了一个Button的渐变淡入淡出动画效果： ```xml <Button Content="Click me!" x:Name="myButton" Opacity="0"> <Button.Triggers> <EventTrigger RoutedEvent="Button.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1" /> <DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" BeginTime="0:0:2" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button> ``` 以上代码中，Button的Opacity属性初始化为0，即完全透明。在Button的Loaded事件触发时，开始一个Storyboard，其中包含两个DoubleAnimation动画，第一个动画实现渐变淡入，持续1秒钟；第二个动画实现渐变淡出，持续1秒钟，开始时间为2秒钟后。Storyboard中的TargetName和TargetProperty属性分别指定了动画的目标元素和目标属性。 需要注意的是，如果要反复播放渐变淡入淡出动画效果，可以使用RepeatBehavior属性，设置动画的重复次数或重复时长。例如，设置动画重复3次： ```xml <DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1" RepeatBehavior="3x" /> ``` 以上就是WPF实现渐变淡入淡出的动画效果的简单示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值