首页 > 其他分享 >css模拟吸顶灯效果

css模拟吸顶灯效果

时间:2022-12-06 15:13:29浏览次数:49  
标签:rgba 2px 120 1px animation css 吸顶灯 webkit 模拟

css3吸顶灯效果,代码如下

 1 <div class="breathe-btn "></div>
 2 <style>
 3 body {
 4     background:#333;
 5 }
 6 .breathe-btn {
 7     position:relative;
 8     width:100px;
 9     height:10px;
10     margin:40px auto;
11     line-height:40px;
12     border:2px solid #FF6178;
13     border-radius:5px;
14     box-shadow:0 1px 2px rgba(0,0,0,.3);
15     overflow:hidden;
16     background: #FF6178;
17     -webkit-animation-timing-function:ease-in-out;
18     -webkit-animation-name: breathe;
19     -webkit-animation-duration:2700ms;
20     -webkit-animation-iteration-count:infinite;
21     -webkit-animation-direction:alternate;
22 }
23 @-webkit-keyframes breathe {
24   0% {
25     opacity:.2;  //如果要做边框的闪烁效果,把这个注释掉就好了
26     box-shadow:0 1px 2px rgba(255, 97, 120, .1);
27   }
28   100% {
29     opacity:1;
30     border:2px solid rgba(255, 97, 120, 1);
31     box-shadow:0 1px 10px rgba(255, 97, 120, 1);
32   }
33 }
34 </style>

参考文档:https://www.jq22.com/webqd1732

标签:rgba,2px,120,1px,animation,css,吸顶灯,webkit,模拟
From: https://www.cnblogs.com/tanweiwei/p/16955332.html

相关文章

  • Css实现DIV铺满屏幕的几种方法
    1.第一种方式div{/*div的CSS样式*/position:absolute;width:100%;height:100%;}*{/*CSSReset*/margin:0;padding......
  • 现代 CSS 之高阶图片渐隐消失术
    在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样:<divclass="img"></div>div{width:300px;height:300px;backgroun......
  • Vue 中使用 tailwindcss
    Vue2中使用tailwindcssnpmitailwindcss@3postcss@8autoprefixer@10-Dnpxtailwindcssinit-p//tailwind.config.js/**@type{import('tailwindcss').Config......
  • Java使用LinkedList模拟一个堆栈或者队列数据结构
    用Java模拟一个堆栈或者队列数据结构。首先得明白堆栈和队列的数据结构:堆栈:先进后出队列:先进先出LinkedList中刚好有addFirst()和addLast()方法。1.publicclassStac......
  • CSS 生成等份扇形
      <templatev-for="itemin50"><div:key="item"v-if="item>1":style="{background:drawSector(item)}"class="one"></div></temp......
  • css attr()函数
    cssattr()函数attr()理论上能用于所有的CSS属性但目前支持的仅有伪元素的content属性,其他的属性和高级特性目前是实验性的CSS表达式attr()用来获取选择到的元......
  • 【408】模拟6
    t1进出栈时,指针和赋值操作在不同情况下谁先谁后t2受限双端队列t3中缀表达式转后缀表达式操作步骤t4压缩存储,对应元素位置t5KMP算法求next数组t6最小生成树:prim......
  • css3伪元素
    1、::first-line首行文本2、::first-letter首字母3、::selection被选中(高亮区域)4、:empty仅当元素为空时触发5、:only-child没有兄弟元素的子元素6、:fisrt-of......
  • React后台管理系统 04 配置路径别名、全局样式设置、模块化scss
    ts中对于@符号指定的路径不支持,同时vite中也是不支持的,所以我们需要在vite.config.ts中进行指定配置,path是node中自带的一个模块这里爆红的原因是没有进行声明:我们使用命......
  • CSS中的伪类
    1、什么是伪类?首先伪类是选择器的一种,它用于选择处于特定状态的元素。2、伪类的表现状态时什么样子的?伪类就是开头为冒号的关键字。例如::last-child3、常见的伪类有哪......