专注、交流、分享
云计算领域最新资讯

CSS3技巧:animation breath实现超科技炫酷动态效果

最近发现一个很有趣的CSS特效,好东西得学习下,所以记录下。

某云Banner 上的动画效果,非常有科技感,查看了下代码,原来只是用了CSS3里animation breath 的 效果,它也有中文名:呼吸灯效果;

可利用 animation 来实现的动画效果。

然后呢,网站居然不支持web格式图,导致不能动态,这是很悲伤,具体看下面代码。

HTML代码

<div class="wrap">
<img src="https://upload.kufanyun.com/download/Aan/bg.jpg" alt="呼吸底灯背景图" class="img1">
<img src="https://upload.kufanyun.com/download/Aan/main.png" alt="呼吸灯动效图" class="img2">
</div>

CSS3代码。

*{margin:0;padding:0;border:0}
.wrap{width:500px;height:315px;position:relative;margin:0 auto;overflow:hidden}
.img1,
.img2{width:500px;height:315px;position:absolute;}
.img2{-webkit-animation:breath 3s infinite ease-in-out alternate;animation:breath 3s infinite ease-in-out alternate}
@-webkit-keyframes breath{
0%{opacity:.2}
70%{opacity:1}
to{opacity:.2}
}
@keyframes breath{
0%{opacity:.2}
70%{opacity:1}
to{opacity:.2}
}

以上是关于“CSS3技巧:animation breath实现超科技炫酷动态效果”的介绍,如需虚拟主机,推荐酷番云免费虚拟主机,让您快速上线网站,方便测试代码哦。

地址:

https://www.kufanyun.com/host/buy.html

赞(0)
未经允许不得转载:酷番云知识库 » CSS3技巧:animation breath实现超科技炫酷动态效果
  • 日销500+
    基础型虚拟主机

    共享CPU

    共享内存

    2G空间

    共享带宽

    共享IP

    分布式存储

    适合个人博客、个人站长类网站

    ¥9 原价¥28

  • 日销500+
    超值型云主机CVM

    2核CPU

    2G内存

    180G硬盘

    5M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥99 原价¥210

  • 日销500+
    通用型云服务器ECS

    4核CPU

    4G内存

    50G硬盘

    20M带宽

    独立IP

    分布式存储

    适合电商、论坛类网站

    ¥254 原价¥322

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

中国领先的企业级云服务提供商

域名注册云服务器