前端课堂 呼吸灯制作

于 2024-02-26 12:30:44 发布
阅读量106 收藏
点赞数 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>

多多关照不迷路哟！！！

谢谢 

四大皆空 色即是空 眼里却是胭脂花红
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用51单片机制作呼吸灯-综合文档
05-25
在电子制作领域，制作呼吸灯是一项常见的实践项目，能够帮助学习者掌握单片机控制LED灯的基本方法和编程技巧。 本项目“用51单片机制作呼吸灯”主要涉及以下知识点： 1. **单片机硬件接口**：51单片机与LED灯之间...
用51单片机制作呼吸灯.zip-综合文档
05-19
在这个项目中，我们将深入探讨如何使用51单片机来制作一个呼吸灯。 呼吸灯是一种可以模拟人类呼吸节奏的LED灯，通过改变亮度和速度来营造出柔和而动态的效果。这种效果常见于各种电子设备，如手机、电脑、音响等，...
html+css+js实现呼吸灯效果
weixin_44043093的博客
07-31 1877
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;
通过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 1938
CSS呼吸灯实现 可以是按钮，可以是图片，也可以是其他dom元素，替换你想要添加呼吸灯效果的元素即可 下面以按钮为例： 元素 <body> <button class="myBtn">呼吸灯效果</button> </body> 基础样式添加动画 .myBtn { margin: 100px; background-color: #008000; color: #fff; padding: 10px; border: 0;
【前端小技能】用CSS3动画制作呼吸灯效果
球球博客
10-17 1762
记录在项目开发过程中遇到的小问题，积累开发经验，欢迎大家一起留言探讨 如何最简单的制作呼吸灯效果,之前的文章也有提到过,如何制作呼吸灯效果,本篇文章是通过CSS3来进行呼吸灯效果的制作的,话不多说,上代码 <div> <img src="https://up.enterdesk.com/edpic/87/05/78/8705784b4c6ad3d2f70e643eef69fff3.jpg"/> </div> style div{ height: 300px.
呼吸灯动画的实现
Holothurian
04-25 532
iOS 呼吸灯动画可以通过 Core Animation 实现。
前端实现img图片呼吸灯效果
m0_57206826的博客
11-19 1146
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..
呼吸灯程序 呼吸灯程序 呼吸灯程序
05-29
呼吸灯程序 呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯程序呼吸灯...
verillog呼吸灯设计
07-26
【Verilog呼吸灯设计】是一种基于Verilog HDL（硬件描述语言）的数字逻辑电路设计，主要用于实现一种模拟呼吸效果的LED灯光控制。在电子工程领域，呼吸灯常常被用作用户界面的一部分，以提供柔和的视觉反馈。这种...
有趣的css - 好看的呼吸灯效果
最新发布
设计师工作日常
01-28 2527
用纯 CSS 来实现好看的呼吸灯效果。
html5 呼吸灯效果,呼吸灯.html · 在下小豪/团队协作APP_frontend - Gitee.com
weixin_36036029的博客
06-04 231
呼吸灯$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath ...
CSS - 呼吸灯效果动画（淡隐淡出效果）
王佳斌
11-28 4861
效果图 只是简单的呼吸效果，您按照需求自己拓展即可。 代码 @keyframes light{ from{ opacity: 1; } to{ opacity: 0.2; } } 使用 .view{ animation-name: light; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: in
css3：呼吸灯效果，图片上下跳动
sunluyi的博客
03-26 1757
用到的API：@keyframes、animation、transform: scale()、transform: translateY() <view class="createAnimation"> <view class="logo"> <image src="../../static/mine/2.png" mode=""></image> </view> </view> .createAnimation{ widt
css 动画 呼吸 呼吸灯 效果
祖先生的博客
04-01 3859
.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:.
CSS3特效 - 呼吸灯效果
热门推荐
草巾冒小子的博客
10-17 1万+
1. 效果图 2. 代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html;charset=utf-8"/&gt; &lt;title&gt;呼吸灯&lt;/title&gt; &lt
css 呼吸灯效果
zhouzhijian97的博客
08-08 1418
/*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-size:12px;     -webkit-text-size-adjust:none;     font-family:...
HTML彩色呼吸灯效果
苦涩精灵的博客
12-15 1332
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript" src...
CSS动画效果 呼吸灯示例
qq_36132599的博客
06-04 1692
主要使用的css属性 属性：animation 使用语法如下： animation: name duration timing-function delay iteration-count direction; name：规定需要绑定到选择器的 keyframe 名称。（此项为自定义） duration：规定完成动画所花费的时间，以秒或毫秒计。 timing-function：规定动画的速度曲线...
如何用EDA制作呼吸灯报警器
06-10
要制作呼吸灯报警器，需要以下步骤： 1. 选择一个EDA软件，如Altium Designer、Eagle PCB等。 2. 设计电路图，包括呼吸灯和报警器的电路。 3. 在PCB布局中放置电子元件，连接电路。 4. 设计并加入呼吸灯和报警器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值