HTML+CSS+JS实现透明度动画

最新推荐文章于 2024-04-26 19:17:54 发布
最新推荐文章于 2024-04-26 19:17:54 发布
阅读量3.7k 收藏 5
点赞数 2
文章标签： HTML+CSS+JS实现透明度动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29656961/article/details/78443514
版权

1.box.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告</title>
    <link rel="stylesheet" type="text/css" href="box.css"/>
    <script src="box.js"></script>
</head>

<body>
<div id="box">
</div>
</body>

</html>

2.box.css代码： 

body {
    padding: 0px;
    margin: 0px;
}

#box {
    height: 200px;
    width: 200px;
    background-color: rebeccapurple;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    border-radius: 5%;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
    opacity: 0.3;
}

3.box.js代码： 

window.onload = function () {
    var box = document.getElementById('box');
    box.onmouseover = function () {
        move(100);
    }
    box.onmouseout = function () {
        move(30);
    }
}
var timer = null;
var alpha = 30;

function move(target) {
    var box = document.getElementById('box');
    clearInterval(timer);
    timer = setInterval(function () {
        var speed = 0;
        if (alpha > target) {
            speed = -10;
        } else {
            speed = 10;
        }
        if (alpha == target) {
            clearInterval(timer);
        } else {
            alpha += speed;
            box.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + alpha + ')';
            box.style.opacity = alpha / 100;
        }
    }, 30);
}


qq_175****220
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html hover透明度与js透明度动画
qq_41159720的博客
03-25 350
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js透明度两种方法</title> <style type="text/css"> body,div,span { margin: 0; padding:...
css怎么动画中该透明度,CSS如何实现透明度变化的动画
weixin_42361018的博客
08-04 3050
CSS如何实现透明度变化的动画发布时间：2020-10-19 15:55:49来源：亿速云阅读：73作者：小新这篇文章将为大家详细讲解有关CSS如何实现透明度变化的动画，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。要实现CSS中透明度更改的动画，需要使用的是transition属性。由于transition属性是CSS3中的新增属性，因此有必要在一些可支持的浏览...
css3实现透明度依次递减的动画效果
string佳佳的博客
10-09 626
html部分： <div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </di.
CSS中设置透明度的2个属性：opacity，RGBA以及它们的区别
最新发布
u013179804的博客
04-26 1839
透明度在网页设计中扮演着重要的角色，透明度的合理运用可以提升网页设计的美感和功能性，增强用户体验，突出重点内容，同时也为设计师提供了更多的创作空间和可能性。那我们一起来看看吧。
js和css分别实现透明度的动画实现
weixin_30773135的博客
05-13 143
js实现 两个函数 即setInterval和setTimeout setTimeout（(function(){})(1/10),1*100) 该函数有两个参数，第一个为执行的函数，第二个为事件参数，即多长时间执行一次； setInterval 用来执行连续的透明度变换，2000为间隔时间； html文件中写一个<div id="animation"></div&g...
animation css 透明度逐渐_CSS 动画
weixin_34963576的博客
12-28 263
CSS动画已经出现好久了，但是至今对它掌握的很熟练的朋友并不多，可能是工作用不到，也肯能是兼容性等原因，但是作为一个前端程序员，个人认为动画这方面的东西还是要掌握的，因为随着老旧浏览器的逐渐淘汰兼容性的问题，我们已经可以慢慢忽略，所以这时，让我们的网页‘动起来’似乎变成一个异常有意思的事情了。简介CSS动画，也称关键帧动画。通过@keyframes来定义关键帧。在视频领域，电影、电...
html 透明度渐变效果,JS实现的透明度渐变动画效果示例
weixin_33973421的博客
06-07 580
本文实例讲述了JS实现的透明度渐变动画效果。分享给大家供大家参考，具体如下：www.jb51.net JS透明度变化效果body{margin: 0px;padding: 0px;}.redb{width:200px;height: 200px;background: red;filter:alpha(opacity=30);opacity: 0.3;}window.onload = functi...
css动画2张图过渡_CSS 动画（transition 和 animation）
weixin_39701834的博客
10-21 977
动画的原理动画定义：由许多静止的画面（帧），以一定的速度（如每秒30张）连续播放时，以肉眼因视觉残像产生错觉，而误以为是活动的画面概念帧：每个静止的画面都叫做帧播放速度：每秒24帧（影视）或者25帧（动画）或者30帧（游戏）案例：简单动画代码：HTML<!DOCTYPE html> <html> <head> <meta charset="utf-8"...
HTML5+CSS3卡片抽出动画特效代码
03-20
`将使元素的透明度在0.5秒内平滑地变化，`ease`是缓动函数，让动画更自然。而`animation`属性则允许开发者定义自定义的动画序列，通过关键帧`@keyframes`定义不同时间点的样式。 在这个特效中，CSS3的3D转换也可能...
html+css+js实现图片切换效果
08-07
例如，我们可以使用`transition`属性来定义图片在切换时的动画效果，如平滑地改变大小、透明度或位置。此外，CSS可以隐藏或显示图片，比如使用`display:none`和`display:block`来控制图片的可见性。 JavaScript则...
使用Javascript + html + css实现页面随机出现小星星的动画效果
04-05
这个效果可以通过调整CSS动画的速度、透明度和星星数量来个性化。此外，还可以添加更多的功能，比如让星星在屏幕边缘反弹，或者根据鼠标位置改变星星的密度和方向。 总之，通过JavaScript、HTML和CSS的组合，我们...
seeThru, HTML5视频与alpha通道透明度.zip
10-10
seeThru, HTML5视频与alpha通道透明度 seeThru - 带alpha通道透明度的HTML5视频 这个包为 HTML5 <video> 元素中缺少alpha通道添加了"支撑点"。 以前称为 jquery seethru""在视频中，你的HTML5视频源被渲
使用Javascript + html + css实现点击页面出现小星星的动画效果
04-05
在网页设计中，动态元素和交互性是提升用户体验的关键因素之一。本教程将详细介绍如何使用JavaScript、HTML和CSS这三...通过调整CSS动画的参数，如速度、透明度变化等，可以进一步定制动画效果，以适应不同场景的需求。
HTML+CSS+JavaScript+Canvas实现一个粒子时钟
04-19
5. 使用Canvas API绘制粒子，可能包括不同的形状、颜色和透明度。 6. 使用`requestAnimationFrame`安排下一次更新，以实现平滑的动画效果。 这个粒子时钟项目不仅展示了HTML、CSS和JavaScript的基本用法，还体现了...
php中css配置怎么设置,如何设置CSS样式中的透明度
weixin_42509197的博客
03-16 120
在CSS中我们可以通过给元素添加opacity属性来改变它的透明度，opacity的值为0到1，值越小越透明在页面中我们常常用到CSS中的一个样式来设置透明度，来美化页面，今天将和大家介绍如何使用CSS中的opacity属性，具有一定的参考价值，希望对大家有所帮助【推荐课程：CSS课程】opacity属性opacity: value|inherit;value：用来设置不透明度。从 0.0 (完全...
css 透明度设定
码农的田园
01-06 463
 opacity 属性设置元素的不透明级别。从 0.0 （完全透明）到 1.0（完全不透明）。 默认值：1 版本：CSS3 JavaScript 语法：object.style.opacity=0.5 w3c标准透明度就是opacity,filter只有IE才能用,其他浏览器都支持opacity。 filter: alpha(opacity=80);     //IE8
前端开发--css3--圆角、透明度、transition动画
sundanping_123的博客
07-15 200
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style type="text/css"> .box{ width: 100px; height: 100px; ba...
html 透明度渐变效果,JavaScript动画之透明度渐变
weixin_39640904的博客
06-07 136
效果图demo*{margin: 0;padding: 0;}#box{width: 200px;height: 200px;margin: 0 auto;background-color: #6cccf2;opacity: 0.3;}window.onload=function(){var box = document.getElementById('box');box.onmouseover=...
前端--js实现透明度动画效果
need_just_word的博客
12-27 1412
这个效果的实现和我的上一篇博客一样，主要还是应用setInterval(fun(),milltime);
css+js原生实现动画遮罩
07-08
你可以使用CSS和JavaScript原生实现动画遮罩。以下是一种实现方式： HTML结构： ```html <div class="container"> <div class="overlay"></div> <div class="content"> <!-- 这里是你的内容 --> </div> </div> ``` CSS样式： ```css .container { position: relative; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩层的颜色和透明度 */ opacity: 0; /* 初始透明度为0，即完全透明 */ transition: opacity 0.3s ease; /* 设置过渡效果，使遮罩层的透明度变化平滑 */ } .content { /* 这里是你的内容样式 */ } ``` JavaScript代码： ```javascript const overlay = document.querySelector('.overlay'); function showOverlay() { overlay.style.opacity = '1'; // 设置遮罩层透明度为1，即完全不透明 } function hideOverlay() { overlay.style.opacity = '0'; // 设置遮罩层透明度为0，即完全透明 } // 示例：点击按钮显示/隐藏遮罩层 const button = document.querySelector('button'); button.addEventListener('click', () => { if (overlay.style.opacity === '0') { showOverlay(); } else { hideOverlay(); } }); ``` 通过调用`showOverlay()`和`hideOverlay()`函数，你可以在需要的时候显示和隐藏遮罩层。例如，你可以在点击按钮时显示遮罩层，创建一个动画效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值