前端课堂 呼吸灯制作

于 2024-02-26 12:30:44 发布
阅读量157 收藏
点赞数 1
文章标签： 前端 css html5 vue.js css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80010164/article/details/136296355
版权
本文介绍如何使用HTML和CSS创建一个动态的盒子，通过定义关键帧动画实现循环播放，展示边距变化和渐变的盒阴影效果。
摘要由CSDN通过智能技术生成

循环播放

播放顺序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 400px;
            /* 边距 */
            margin: 40px auto;
            background-color: #2b92d4;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            animation:breathe 1s ease-in-out infinite alternate;
        }

        @keyframes breathe {
            0% {
                /* opacity 透明度 */
                opacity: 0.2;
                box-shadow: 0 1px 2px rgba(225,225,225,0.1);
            }
            50% {
                opacity: 0.5;
                box-shadow: 0 1px 2px rgba(18,190,84,0.76);
            }
            100% {
                /* 完全不透明 */
                opacity:1;
                box-shadow: 0 1px 30px rgba(59,225,225,1);
            }
        }
    </style>
</head>

<body>

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

</html>

多多关照不迷路哟！！！

谢谢 

通过css3动画和opacity透明度实现呼吸灯效果
12-10
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法，分享给大家，具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>呼吸灯</title> /*也可以通过加层罩，通过设置层罩透明度来实现亮度动画*/ <style> body{ background-color: black; } div{ margin: 0 auto; margin-top: 200px; width: 300px;
【前端小技能~CSS呼吸灯效果】兼容性倍儿棒的呼吸灯CSS实现
球球博客
08-24 2015
CSS呼吸灯实现 可以是按钮，可以是图片，也可以是其他dom元素，替换你想要添加呼吸灯效果的元素即可 下面以按钮为例： 元素 <body> <button class="myBtn">呼吸灯效果</button> </body> 基础样式添加动画 .myBtn { margin: 100px; background-color: #008000; color: #fff; padding: 10px; border: 0;
前端实现img图片呼吸灯效果
m0_57206826的博客
11-19 1212
HTML： <img src="写上图片路径" alt="" class="img"> style： /* 呼吸灯 */ .img { animation: bgLight 5s linear infinite; -webkit-animation: bgLight 5s linear infinite; } @keyframes bgLight { 0% { opacity: 1; } 10% { opacity: 0..
【前端小技能】用CSS3动画制作呼吸灯效果
球球博客
10-17 1880
记录在项目开发过程中遇到的小问题，积累开发经验，欢迎大家一起留言探讨 如何最简单的制作呼吸灯效果,之前的文章也有提到过,如何制作呼吸灯效果,本篇文章是通过CSS3来进行呼吸灯效果的制作的,话不多说,上代码 <div> <img src="https://up.enterdesk.com/edpic/87/05/78/8705784b4c6ad3d2f70e643eef69fff3.jpg"/> </div> style div{ height: 300px.
css3呼吸灯
weixin_42864629的博客
04-13 291
<div class="breathe-btn"></div> <style type="text/css"> /*resize*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,menu{ margin:0; padding:0;} body{ font-si...
STM32呼吸灯程序_keil呼吸灯编程_呼吸灯keil程序_stm32f1呼吸灯_STM32呼吸灯_
09-29
STM32呼吸灯程序是基于微控制器STM32F1的一种常见应用，它利用LED的亮度变化模拟呼吸效果，常用于设备状态指示或用户界面的美化。在这个项目中，我们使用了Keil μVision集成开发环境（IDE）进行编程，这是一款广泛...
用51单片机制作呼吸灯-综合文档
05-25
在电子制作领域，制作呼吸灯是一项常见的实践项目，能够帮助学习者掌握单片机控制LED灯的基本方法和编程技巧。 本项目“用51单片机制作呼吸灯”主要涉及以下知识点： 1. **单片机硬件接口**：51单片机与LED灯之间...
用51单片机制作呼吸灯.zip-综合文档
05-19
在这个项目中，我们将深入探讨如何使用51单片机来制作一个呼吸灯。 呼吸灯是一种可以模拟人类呼吸节奏的LED灯，通过改变亮度和速度来营造出柔和而动态的效果。这种效果常见于各种电子设备，如手机、电脑、音响等，...
呼吸灯程序 呼吸灯程序 呼吸灯程序
最新发布
05-29
呼吸灯程序 呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯...
html 呼吸灯效果,0基础学前端 要学会看图片呼吸灯效果html纯代码
weixin_30682487的博客
06-03 283
0基础学前端 要学会看图片呼吸灯效果html纯代码 +WEB前端互动交流群04 找CC哟~~~testol, ul { list-style: none; }li { width: 180px; height: 120px; display: inline-block; }li img { display: block; width: 140px; height: 80px; backgroun...
呼吸动画效果示例-
03-01
此资源为示例代码，有问题可留言：http://blog.csdn.net/l_wwbs/article/details/54691770
前端——》H5页面实现按钮呼吸特效
叙传
11-18 1270
效果 代码 上图的按钮 实现了呼吸的一个特效，关键代码如下 1，html 部分 <img style="width: 100%;animation: submitBtn 1.5s ease infinite;" src="https://files.huizecdn.com/file1/M00/48/95/CgUA3GFve3uAC-kuAAA8CBX55SM702.png"> 2，css部分 /* 呼吸效果 */ @keyframes submitBtn {
js案例：呼吸灯
成长的嘻嘻哥
01-09 382
【代码】js案例：呼吸灯。
css3之呼吸灯效果
weixin_33861800的博客
08-18 230
为什么80%的码农都做不了架构师？>>> ...
html 呼吸灯效果,CSS3实现呼吸灯效果
weixin_42608318的博客
06-03 538
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,menu {margin: 0;padding: 0}body {font-size: 12px;-webkit-text-size-adjust: none;font-family: Arial,Helvetica,sans-serif}img {bo...
css 动画 呼吸 呼吸灯 效果
祖先生的博客
04-01 4189
.yellow { position: relative; width: 20px; height: 20px; border-radius: 50%; background: #FFB22B; margin-right: 4px; } .yellow::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:.
html+css+js实现呼吸灯效果
weixin_44043093的博客
07-31 1959
html部分： <div class="outer"> <div class="inner"> <div class="waimian"> <div class="limian"></div> </div> </div> <div class="text">HI !</div> </div> css部分： * { box-sizing: border-box;
呼吸灯动画的实现
Holothurian
04-25 664
iOS 呼吸灯动画可以通过 Core Animation 实现。
CSS - 呼吸灯效果动画（淡隐淡出效果）
王佳斌
11-28 5121
效果图 只是简单的呼吸效果，您按照需求自己拓展即可。 代码 @keyframes light{ from{ opacity: 1; } to{ opacity: 0.2; } } 使用 .view{ animation-name: light; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: in
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值