程序员经验分享-hwhale

css 灯泡发光动画，挺有意思

2023-11-10 
.light {
  animation: flicker 4000ms ease infinite;
}
@keyframes flicker {
  0%, 100% {
    box-shadow: 0 0 1rem #fefa01, inset -0.25rem 0 0 0.5rem rgba(14, 10, 10, 0.1);
  }
  30%, 70% {
    box-shadow: -1rem 0 8rem 1rem #fefa01, inset -0.25rem 0 0 0.5rem rgba(14, 10, 10, 0.1);
  }
  50% {
    box-shadow: -1rem 0 8rem 1rem rgba(254, 250, 1, 0.8), inset -0.25rem 0 0 0.5rem rgba(14, 10, 10, 0.1);
  }
}
<div class='light'></div>

定义动画帧 flicker ,然后 light 样式类引用这个动画 循环播放

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

前端

css 灯泡发光动画，挺有意思 的相关文章

  • Shiny 中的模态对话框：可以调整宽度但不能调整高度

    在我的 Shiny 应用程序中 我有几个来自闪亮BS 包的模式窗口 我可以像这样调整这些模式窗口的宽度 tags head tags style HTML modal lg width 1200px abs 1 background col

  • 裁剪响应式全宽图像

    我必须剪辑跨越整个宽度的图像 以下事情对我不起作用 剪辑 这需要绝对位置 因此块元素不会堆叠在下面 背景位置 缩放时无法正确剪辑 放大时剪辑的部分会增加 反之亦然 包装器 包装器高度取决于浏览器宽度 因此其值应该是动态的 我使用了 seti

  • 强制应用媒体查询

    我有这个 html 和 css 代码 div class wrapper div class a div div class b div div media all and max width 400px max height 300px

  • 如何在索引视图中打印关联数据

    subjects this gt Subjects gt find all contain gt Users fields gt Users username Users email gt hydrate false gt toArray

  • 如何在绝对定位的 div 内用 CSS 创建粘性页脚？

    我想创建一个粘性页脚inside绝对定位的 div 元素 我的方法是将页脚 div 也绝对定位 在另一个相对定位的 页面 div 内 其中包含页面的实际内容 div class content div class page Some Lor

  • 如何使div垂直滚动[重复]

    这个问题在这里已经有答案了 我用图片元素列表做了一个水平滚动 但是当我垂直滚动它时我失败了 我的水平滚动条代码是 div class pic container div class pic row div style width 100 a

  • Chrome 和 Safari 错误::不允许加载本地资源: file:///D:/CSS/Style.css

    当我在 chrome 或 safari 中访问我的 aspx 页面时 它在控制台中显示此错误 不允许加载本地资源 file D CSS Style css 在 IE 和 FF 中一切正常 我使用外部 CSS 通过 aspx 页面链接 我已经

  • 移动设备上的剩余悬停效果

    我一整天都在努力做这个JSFiddle http jsfiddle net gsamaras q2w4jjyt 4 也适用于手机 但我所有的尝试都没有效果 在桌面上 当用户将鼠标悬停在箭头上时 它会变成红色 在移动设备上 当用户触摸 为了单

  • HTML CSS 循环协助

    希望你能帮忙 我想知道您是否可以在循环中创建以下类型 你知道这是否可能吗 body background 000 DEMO SPECIFIC STYLES typewriter h1 color fff font family Bebas

  • IE8 - 隐藏 div 内的表单，返回键不再起作用

    我有一个登录表单 位于带有 display none 的 div 中 然后我使用 jquery 淡入表单 但 Enter Return 键不再提交表单 如果我将显示更改为阻止 则效果很好 此问题仅存在于 IE 中 有任何想法吗 这是一个不起

  • 滚动时多个图像淡出

    我有一个页面 在每个导航点上 网站中间的图像通过淡入淡出来改变颜色 我设法淡入 active3 fadeIn 2000 不过 我遇到了再次淡出它的问题 让我尝试解释一下 我有 5 个导航点和 5 个不同的图像 如果我 例如 从第一个导航点滚

  • 使用 flex 将项目与底部对齐

    我正在尝试使用 flex 将父级内部的项目与父级底部对齐 但由于某种原因它不起作用 我究竟做错了什么 login border 1px solid red height 50px display flex login border radi

  • 如何使用CSS缩进多级select optgroup？

    只是试图通过嵌套深度缩进 optgroup 块 我尝试了一般margin left规则 嵌套元素然后尝试应用相同的规则 尝试过padding left 这样的缩进可能吗 看起来很简单 P 在下面的示例中 标记为 client2 a 的 op

  • 如何使用CSS缩放图像以填充div并保持纵横比？

    我想用一个 div 填充img 保持纵横比并根据需要拉伸宽度或高度以适应 div style width 80px height 80px img src div 我怎样才能实现它 如果图像不是二次方的 则必须将其 放大 并根据哪一侧较大而

  • 如何在 Rails 5 中设置资产管道以使用自定义字体？

    我必须使用自定义字体贾米尔 努里 纳斯塔莱克 http www urdujahan com urdu fonts Jameel 20Noori 20Nastaleeq zip在 Rails 5 应用程序中 我以前从未使用过 Rails 中的

  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec

  • WordPress 子主题包括包含文件

    我在一家WordPress使用 AMPPS 作为本地主机在我的本地计算机上进行设置 使用 Delta 主题 我创建了一个子主题 delta2 child 初始设置效果很好 但是 我需要更改包含文件夹中名为 home slider php 的

  • 为什么这些内联块元素会产生额外的宽度？

    这是这个问题的后续内容 仅使用 css 自动调整图像下的文本 https stackoverflow com questions 34185547 autofit text under image with only css 为什么这段代码

  • 为什么我的 Web 组件 CSS 不显示？我没有使用shadowDOM

    我有一个没有使用 ShadowDOM 的 Native V1 组件 所以我将 CSS 放在 但是当其他人使用我的组件时 我的 CSS 就不再起作用了 仅当其组件确实使用 ShadowDOM 时才会发生这种情况 我的组件的示例代码 class

  • Flexbox 项目的完美圆形边框半径[重复]

    这个问题在这里已经有答案了 我有类似这样的项目 它们是弹性盒容器内的弹性项目 我的正常尺寸物品 我的物品被挤压 我的 CSS 看起来像这样 body display flex flex direction column align item

随机推荐

  • Python列表推导式

    列表推导式 列表推导式使用非常简洁的方式来快速生成满足特定需求的列表 代码具有非常强的可读性 语法形式为 expression for expr1 in sequence1 if condition1 for expr2 in sequen

  • nginx之头部变量x_forwarded_for

    proxy add x forwarded for变量包含客户端请求头中的 X Forwarded For 与 remote addr两部分 他们之间用逗号分开 举个例子 有一个web应用 在它之前通过了2个nginx转发 即用户访问该we

  • P1518 [USACO2.4]两只塔姆沃斯牛 The Tamworth Two

    题目描述 两只牛逃跑到了森林里 Farmer John 开始用他的专家技术追捕这两头牛 你的任务是模拟他们的行为 牛和 John 追击在10 10 的平面网格内进行 一个格子可以是 一个障碍物 两头牛 它们总在一起 或者 Farmer Jo

  • 如何有效使用渲染农场？防止渲染出错的7个方法！

    如何使用渲染农场 又如何有效地使用渲染农场 使用云渲染农场时出错怎么办 众所周知我们可以在任意的笔记本或者终端PC上面来创作 3ds Max 场景 但是实际渲染是这样吗 其实不然 这其中的差距不是一星半点 只能说很可能会有两种不同的呈现 而

  • HTML+CSS+JS列表式视频播放页面

    HTML CSS JS列表式视频播放页面 无插件 应该没有 效果图 html

  • 31 Qt 之绘图之绘制一个漂亮的圆及圆弧

    一 圆形 经常地 我们会在网上看到一些列的抽奖活动 里面就有圆盘抽奖 是不是有点手痒了O O 效果 void MainWindow paintEvent QPaintEvent QPainter painter this painter s

  • 三英战SQL：解析NoSQL的可靠性及扩展操作

    摘要 NoSQL的高性能 易扩展及可靠性一直深受数据工作者的喜爱 然而对比传统关系型数据库NoSQL的优势究竟又在何处 Esen Sagynov在DZone上发布了一篇文章 从运行方面分析Cassandra HBase以及MongoDB产品

  • SVN 执行清理命令，提示清理以下路径失败，并可能有乱码的解决方法

    SVN 执行清理命令 提示清理以下路径失败 并可能有乱码的解决方法 参考文章 1 SVN 执行清理命令 提示清理以下路径失败 并可能有乱码的解决方法 2 https www cnblogs com aidegongyang p 830374

  • Windows下MySQL安装配置及libmysql的使用

    Windows下MySQL安装配置及libmysql的使用 1 安装配置 请参考 Mysql安装配置 2 API文档 libmysql API文档地址 3 示例代码 本示例代码使用了mysql stmt xxx接口 运行本代码需要提前创建好

  • Python之科赫曲线绘制

    实验四 py import turtle def koch size n if n 0 turtle fd size else for angle in 0 60 120 60 turtle left angle koch size 3 n

  • graphpad做图如何加星号_如何用R画分组柱状图并且添加标准差和显著性标记（星号）？...

    时间过了这么久 该交一份答案了 ggplot2包 是一个图形可视化包 并不带统计分析功能 所以统计学分析需要另外去做 这里加bar和显著性标识 如果了解ggplot2绘图原理中的图层概念的话 就能明白 无非就是在画完分组柱状图后 根据需要自

  • PCL 计算点云中任意一个点的法向量

    目录 一 算法原理 1 原理概述 2 主要函数 二 代码实现 三 结果展示 一 算法原理 1 原理概述 见 PCL 计算点云法向量并显示 2 主要函数 inline bool computePointNormal const pcl Poi

  • 自定义user表签发token、自定义认证类、simpleui模块使用

    Python微信订餐小程序课程视频 https edu csdn net course detail 36074 Python实战量化交易理财系统 https edu csdn net course detail 35475 今日内容概要

  • mysql的数据备份脚本

    一 数据库的备份脚本脚本命令 1 核心命令 usr local mysql bin mysqldump h IP p3306 u dbuser p dbpasswd f A F E R quick single transaction fl

  • Linux命令 - ls命令

    Linux命令 ls命令 ls命令是linux下最常用的命令 ls命令就是list的缩写 用来打印出当前目录的清单 如果ls指定其他目录 那么就会显示指定目录里的文件及文件夹清单 通过ls 命令不仅可以查看linux文件夹包含的文件 而且可

  • python多线程：Thread类的用法

    我们要创建Thread对象 然后让他们运行 每个Thread对象代表一个线程 在每个线程中我们可以让程序处理不同的任务 这就是多线程编程 创建Thread对象有两种方法 1 直接创建Thread 将一个callable对象从类的构造器传递出

  • 团体程序设计天梯赛-练习集（5分题）

    团体程序设计天梯赛 练习集 5分题 L1 001 Hello World 5 分 这道超级简单的题目没有任何输入 你只需要在一行中输出著名短句 Hello World 就可以了 输入样例 无 输出样例 Hello World public

  • wav音频文件格式解析【个人笔记】(自用)

    目录 1 WAV格式 2 WAV的二进制格式解析 2 1 WAV文件格式 2 2 C语言解析wav文件 3 WAV文件语音数据的组织结构 4 总结 回到顶部 1 WAV格式 wav是微软开发的一种音频文件格式 注意 wav文件格式是无损音频

  • 编写测试用例案例

    案例一 电梯 功能 性能 界面 安全 易用 功能 点击按钮电梯门是否能正常打开和关闭 电梯开关门按钮是否能正常使用 电梯里面是否有紧急按钮 点击相对的楼层按钮电梯是否能顺利到达对应楼层 电梯是否有超重提醒 电梯是否能做人 电梯除了做人还有其

  • css 灯泡发光动画，挺有意思

    light animation flicker 4000ms ease infinite keyframes flicker 0 100 box shadow 0 0 1rem fefa01 inset 0 25rem 0 0 0 5rem

热门标签