css3实现科技感的呼吸灯效果

呼吸灯效果是一种常见的灯光效果,比如网页的按钮,现实生活中比如电脑的开机按钮。

使用CSS3的animation方法可以实现很多迷人的网页动画特效。

使用CSS3 配合box-shadow即可实现类似的效果

样式代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 .breathe-div {width: 100px;height: 100px;border: 1px solid #2b92d4;border-radius: 50%;text-align: center;cursor: pointer;margin:150px auto;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);overflow: hidden;-webkit-animation-timing-function: ease-in-out;-webkit-animation-name: breathe;-webkit-animation-duration: 1500ms;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;
}@-webkit-keyframes breathe {0% {opacity: .4;box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;}100% {opacity: 1;border: 1px solid rgba(59, 235, 235, 0.7);box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;}
}

HTML 代码

1
<div class="breathe-div"></div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247416.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

百度Echarts折线图tooltip里数据添加单位

option {title: {text: 折线图堆叠},tooltip: {trigger: axis,//在这里设置formatter: {a0}:{c0}万},legend: {data:[邮件营销,联盟广告,视频广告,直接访问,搜索引擎]},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxi…

VUE组件 之 Drawer 抽屉

一、源码地址 https://github.com/imxiaoer/DrawerForVue 二、效果图 三、具体代码 drawer.vue <template><div class"drawer"><div :class"maskClass" click"closeByMask"></div><div :class"mainClass"…

Java生鲜电商平台-用户管理的架构与实战

Java生鲜电商平台-用户管理的架构与实战 在电商后台中&#xff0c;用户管理是运营人员管理用户的模块。这里的用户区别于运营人员&#xff0c;会在权限的角色管理中分别阐述。这里的用户包含平台的一般用户&#xff0c;会员用户等。本文将分享一下用户管理模块的设计心得。在设…

vue+Element-ui实现分页效果

当我们向后台请求大量数据的时候&#xff0c;并要在页面展示出来&#xff0c;请求的数据可能上百条数据或者更多的时候&#xff0c;并不想在一个页面展示&#xff0c;这就需要使用分页功能来去完成了。 1.本次所使用的是vue2.0element-ui实现一个分页功能&#xff0c;element-…

21款网页版html5小游戏源码

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源…

自定义input[type=file]的兼容样式

input[type"file"]的样式在各个浏览器中的表现不尽相同&#xff1a; 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外&#xff0c;当我们规定 input[type"file"] 的高度&#xff0c;并把它的行高设置成与其高度相等后&#xff0c;chrome中难看的样…

Excel催化剂开源第37波-音视频文件元数据提取(分辨率,时长,采样率等)

上一篇提到图片元信息Exif的提取&#xff0c;当然还有一类音视频文件&#xff0c;也同样存储着许多宝贵的元数据&#xff0c;那就开源到底呗&#xff0c;虽然自己找寻过程也是蛮艰辛坎坷的&#xff0c;大家看后有收获&#xff0c;只求多多传播下&#xff0c;让前人的工作可以更…

ECharts 雷达图在类目值下面显示数值

需要实现的效果&#xff1a; 官网里面的demo显示数值&#xff0c;都是在拐点处&#xff1a; 【解决】 1、只显示类目 <div id"mychart" style"width:300px;height:300px;margin:0 auto;"></div><script>var arr1 [60,73,85,40,60];var…

Java生鲜电商平台-订单配送模块的架构与设计

Java生鲜电商平台-订单配送模块的架构与设计 生鲜电商系统最终的目的还是用户下单支付购买&#xff0c; 所以订单管理系统是电商系统中最为复杂的系统&#xff0c;其作为中枢决定着整个商城的运转&#xff0c; 本文将对于生鲜类电商平台的订单设计做一个完整的分析&#xff0c;…

vue项目,webpack中配置src路径别名及使用

默认会有‘’别名&#xff0c;指向src目录&#xff0c;还可以添加自定义别名等等。 使用方法 使用别名一般就三种情况&#xff1a;在js中用&#xff0c;在css中用&#xff0c;在html文档内用 js中用&#xff0c;最简单: import {getName} from /util/namecss中使用&#xff0…

kylin框架中使用postcss-px2rem

1.kylin框架的使用不做介绍 2.页面中 html模板页面中已经使用clientWidth/375*100px,已经赋值了html的fontsize随页面宽度而变化。 比如宽度375的屏 html的fontsize为100px kylin加载postcss-px2rem cnpm i --save-dev postcss-px2rem 在根目录下的plugin.js中 var px2rem…

kylinH5框架之项目组件理解

目录 组件介绍 组件声明结构 组件接口 script dependency template style 状态注入 接口声明 组件介绍 Component 扩充自 Vue 的组件, 提供了 Vue 组件对等的输入参数能力。在代码书写时提供类 class 的装饰器 Decorator 风格。 import { Component, Watch } from al…

Java生鲜电商平台-深入订单拆单架构与实战

Java生鲜电商平台-深入订单拆单架构与实战 Java生鲜电商中在做拆单的需求&#xff0c;细思极恐&#xff0c;思考越深入&#xff0c;就会发现里面涉及的东西越来越多&#xff0c;要想做好订单拆单的功能&#xff0c;还是相当有难度&#xff0c; 因此总结了一下拆单功能细节&…

python3中Requests将verify设置为False后,取消警告的方式

import requests resp requests.get(https://www.***.com, verifyFalse)调用成功但是会有如下警告信息&#xff1a; InsecureRequestWarning: Unverified HTTPS request is being made. Adding certificate verification is strongly advised. See: https://urllib3.readthedo…

博弈论学习笔记

决定近段时间复习一下博弈论顺便写点笔记。 大佬博客&#xff1a;几种常见博弈模型https://blog.csdn.net/wr132/article/details/51213331 SG函数与SG定理https://www.cnblogs.com/ECJTUACM-873284962/p/6921829.html 无敌的博弈总结https://blog.csdn.net/acm_cxlove/article…

Element-UI中Drawer抽屉去除标题自带蓝色框

当点击事件drawertrue时&#xff0c;抽匣回打开 这时抽匣的标题会出现一个难看的蓝色边框&#xff0c;一会就会消失&#xff0c;但是好丑&#xff0c;所以要去掉它 解决方法 /deep/ :focus {outline: 0;} vue组件中&#xff0c;在style设置为scoped的时候&#xff0c;里面在…

Java生鲜电商平台-高并发核心技术订单与库存实战

Java生鲜电商平台-高并发核心技术订单与库存实战 一、 问题 一件商品只有100个库存&#xff0c;现在有1000或者更多的用户来购买&#xff0c;每个用户计划同时购买1个到几个不等商品。 如何保证库存在高并发的场景下是安全的&#xff1f; &#xff08;1&#xff09;不多发 &…

Vue2 MVVM 双向绑定(数据劫持+发布者-订阅者模式)

参考文献&#xff1a;https://www.cnblogs.com/libin-1/p/6893712.html https://juejin.im/post/5b2f0769e51d45589f46949e MVVM拆开来即为Model-View-ViewModel&#xff0c;有View&#xff0c;ViewModel&#xff0c;Model三部分组成。View层代表的是视图、模版&#xff0c;负…

常用的激活函数

1.阶跃函数 &#xff0c;值域{0,1} 1 def step_function(x): 2 return np.array(x>0,dtypenp.int) 2.sigmoid函数 &#xff0c;值域(0,1) 1 def sigmoid(x): 2 return 1/(1np.exp(-x)) 3.relu函数 &#xff0c;值域[0&#xff0c;∞&#xff09; 1 def relu(x): 2 …