您的位置：首页 > Web前端 > CSS

CSS模仿无线路由器发射信号动画

2016-11-23 10:11 232 查看
先上图



下面是代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.box{width: 595px;height: 357px; border:1px solid; position:relative}

.box div{ background:url(summary-wifi-icon.png) no-repeat 50% 50%;opacity:0; width: 595px; position:absolute; left:0px; top:0px;height: 357px;  background-size: 35% 35%;}

.box .div1{opacity:0;
 -webkit-animation: ani-circle-a 4.5s ease-out forwards infinite;

     animation: f1 4.5s ease-out forwards infinite;}

@keyframes f1
{
0% {background-size: 35% 35%;opacity:0}
50% {opacity:1}
100% {background-size: 100% 100%;opacity:0}
}

.box .div2{opacity:0;
 -webkit-animation: ani-circle-a 4.5s ease-out 1.5s forwards infinite;

     animation: f2 4.5s ease-out 1.5s forwards infinite;}

@keyframes f2
{
0% {background-size: 35% 35%;opacity:0}
50% {opacity:1}
100% {background-size: 100% 100%;opacity:0}
}

.box .div3{opacity:0;
 -webkit-animation: ani-circle-a 4.5s ease-out 3s forwards infinite;

     animation: f2 4.5s ease-out 3s forwards infinite;}

@keyframes f3
{
0% {background-size: 35% 35%;opacity:0}
50% {opacity:1}
100% {background-size: 100% 100%;opacity:0}
}

</style>

</head>

<body>

<div class="box">
<div class="div1"></div>

    <div class="div2"></div>

    <div class="div3"></div>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航