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

  发布时间:2019-08-09 15:29:54   作者:殷浩   我要评论
这篇文章主要介绍了通过css3动画和opacity透明度实现呼吸灯效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

本文介绍了通过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>

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

相关文章

  • CSS3 中filter(滤镜)属性使用详解

    这篇文章主要介绍了CSS3 中filter(滤镜)属性使用,本文通过实例代码截图给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-04-07
  • css3媒体查询中device-width和width的区别详解

    这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小
    2020-03-27
  • css3 flex实现div内容水平垂直居中的几种方法

    这篇文章主要介绍了css3 flex实现div内容水平垂直居中的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小
    2020-03-27
  • 浅析CSS3 中的 transition,transform,translate之间区别和作用

    这篇文章主要介绍了CSS3 中的 transition,transform,translate之间区别和作用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下
    2020-03-26
  • css3 中translate和transition的使用方法

    这篇文章主要介绍了css3 中translate和transition的使用方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-26
  • CSS3 不定高宽垂直水平居中的几种方式

    这篇文章主要介绍了CSS3 不定高宽垂直水平居中的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2020-03-26
  • 使用 CSS3 中@media 实现网页自适应的示例代码

    这篇文章主要介绍了使用 CSS3 中@media 实现网页自适应的示例代码,代码简单易懂,非常不错对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-24
  • CSS3属性 line-clamp控制文本行数的使用

    这篇文章主要介绍了CSS3属性 line-clamp控制文本行数的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来
    2020-03-19
  • 利用CSS3的3D效果制作正方体

    这篇文章主要介绍了利用CSS3的3D效果制作正方体,本文通过实例代码效果图给大家展示的非常详细,对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-10
  • css3 transform导致子元素固定定位变成绝对定位的方法

    这篇文章主要介绍了css3 transform导致子元素固定定位变成绝对定位的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下
    2020-03-06

最新评论