【图片】【东吹】css3模拟魅族MX3呼吸灯效果【东北大学吧】

08月26日漏签0天

东北大学吧关注：254,542贴子：4,779,564

19回复贴，共1页

<返回东北大学吧

【东吹】css3模拟魅族MX3呼吸灯效果

只看楼主收藏回复

送TA礼物

IP属地:辽宁

1楼2016-01-14 17:10回复

我是上次卖椅子的那个，还记得我不

~
效果本身是动态的，截图不太能体现出效果，欢迎喜欢WEB开发的同学们多多批评与指教。

IP属地:辽宁

2楼2016-01-14 17:12

不感兴趣

开通SVIP免广告

东大有不少学计算机的同学吧~

IP属地:辽宁

3楼2016-01-14 17:13

代码呢

来自Android客户端4楼2016-01-14 17:20

收起回复

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>呼吸灯</title>
<style>
*{margin:0; padding:0;}
body{background-color:#fff;}
.breathing_lamp{
position:absolute;
width:28px;
height:28px;
top:696px;
left:500px;
cursor:pointer;
border-radius:50%;
background-color:#ccff99;
overflow:auto;
-webkit-animation: breath 2.2s ease-out 0s infinite alternate;
animation: breath 2.2s ease-out 0s infinite alternate;
box-shadow: 0px 0px 10px 2px #0e8d93;
}
/*.breathing_lamp:hover{-webkit-animation: breath 1.5s ease-out 0s infinite alternate; animation: breath 1.5s ease-out 0s infinite alternate;}*/
.inner_lamp{width:22px; height:22px; margin:0 auto; margin-top:3px; border-radius:50%; background-color:#000;}
/*.breathing_lamp:hover{background-color:#99cc66;}*/
@-webkit-keyframes breath{
0%{background-color:#fffccc; box-shadow: 0px 0px 10px 2px #0e8d93;}
100%{background-color:#99cc66; box-shadow: 0px 0px 10px 5px #0e8d93;}
}
@keyframes breath{
0%{background-color:#fffccc; box-shadow: 0px 0px 10px 2px #0e8d93;}
100%{background-color:#99cc66; box-shadow: 0px 0px 10px 5px #0e8d93;}
}
</style>
</head>
<body>
<div>
<img src="meizu.jpg" alt=""/>
<div class="breathing_lamp">
<div class="inner_lamp"></div>
</div>
</div>
</body>
</html>

IP属地:辽宁

5楼2016-01-14 17:21