发现有价值的资讯

扫描二维码在手机上浏览

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

汇美优普

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

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

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

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

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

HTML代码

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

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.90y.cn/host/buy.html

文章来源于互联网:CSS3技巧:animation breath实现超科技炫酷动态效果

相关推荐: 熊掌号如何绑定站点域名,怎么添加网站?

汇美优普有很多小伙伴不知道,如何申请熊掌号 九零云讲下面此文讲简单的介绍,如何 首先第一步申请好熊掌号 熊掌号申请通过后, 下一步是登陆搜索资源平台,用你申请熊掌号的百度账号登陆,如果已经登陆直接访问即可,访问后点击导航栏的【熊掌号】即可到申请搜索资源服务 然…

赞 0 打赏
分享海报
版权声明
内容来自网络,版本归原作者所有,删除点击底部链接:
文章地址:汇美优普 » CSS3技巧:animation breath实现超科技炫酷动态效果

评论 抢沙发

评论前必须登录!

 

图片正在生成中,请稍后...

周一

11/29

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

汇美优普最近发现一个很有趣的CSS特效,好东西得学习下,所以记录下。 某云Banner 上的动画效果,非常有科技感,查看了下代码,原来只是用了CSS3里animation breath 的 效果,它也有中文名:呼吸灯效果; 可利用 animation 来实现的动画效果。 然后呢,网站居然不支持web格式图,导致不能动态,这是很悲伤,具体看下面代码。 HTML代码 CSS3代码。 *{ma

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

记住我

注册