通过css3动画和opacity透明度实现呼吸灯效果


Posted in HTML / CSS onAugust 09, 2019

本文介绍了通过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;
        height: 300px;
        border-radius: 50%;
        background-color: yellow;
        box-shadow: 0 0 80px red;
        animation-name: light;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    @keyframes light{
        from{
            opacity: 1;
        }
        to{
            opacity: 0.2;
        }
    }
</style>
</head>
<body>

<div></div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
CSS3 translate导致字体模糊的实例代码
Aug 30 #HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 #HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 #HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 #HTML / CSS
移动端rem布局的两种实现方法
Jan 03 #HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 #HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 #HTML / CSS
You might like
PHP的历史和优缺点
2006/10/09 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
jquery tools之tooltip
2009/07/25 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
大学生家政服务项目创业计划书
2014/01/30 职场文书
化工工艺设计求职信
2014/06/25 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
庆六一宣传标语
2014/10/08 职场文书
求职推荐信范文
2015/03/27 职场文书
小学感恩主题班会
2015/08/12 职场文书
开学随笔
2015/08/15 职场文书
Python学习之时间包使用教程详解
2022/03/21 Python
Java中的Kotlin 内部类原理
2022/06/16 Java/Android