HTML5 + CSS3 实现呼吸灯效果

HTML5 herman 14589浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

在网页特效方面,有时候我们需要用到类似于呼吸灯的效果!那么如何使用HTML5 配合 CSS3 实现呢?本文将详细的讲解如何实现这样的效果。

用到的知识点

  • border-radius:该属性是一个简写属性,用于设置四个 border-*-radius 属性。 提示:该属性允许您为元素添加圆角边框! 
  • gradient:CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。为了兼容性,我们分别使用-moz-linear-gradient、-webkit-gradient、-webkit-linear-gradient、-o-linear-gradient。
  • animation:该属性是一个简写属性,用于设置六个动画属性:animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction。
  • @keyframes:该属性被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。

运行效果

HTML5 呼吸灯效果

渐变后效果

CSS3 呼吸灯效果

实现代码

css3 代码如下:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,menu{ margin:0; padding:0;}
body{ font-size:12px; -webkit-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif;}
img{ border:none;}
ol,ul{ list-style:none;}
em{ font-style:normal;}
a{ text-decoration:none;}
.clearfix{ #zoom:1;}
.clearfix:after{ content:' '; display:block; height:0; clear:both; color:#fff;}
body{ background:#333;}
.breathe-btn{ position:relative; width:100px; height:10px; margin:40px auto; line-height:40px; 
border:1px solid #2b92d4; border-radius:5px; color:#fff; font-size:20px; text-align:center; 
cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#6cc3fe), to(#21a1d0));
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 2700ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}
@-webkit-keyframes breathe {
    0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
    100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}

html5 代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Breathe Button - iinterest</title>
</head>
<body>
<div class="breathe-btn"></div>
</body>
</html>

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5 + CSS3 实现呼吸灯效果