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

08月26日漏签0天

东北大学吧关注：254,537贴子：4,777,353

6回复贴，共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

<!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

这是手机的素材图片 meizu.jpg

IP属地:辽宁

6楼2016-01-14 17:23

我嫌麻烦，没做欧鹏和火狐的兼容处理，只要在样式属性前面加 -o- 和-moz- 就行。

IP属地:辽宁

7楼2016-01-14 17:25

帖子回复里面发不了压缩包是个有意思的事儿

IP属地:辽宁

9楼2016-01-14 17:33

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

贴吧热议榜

6回复贴，共1页

<返回东北大学吧

发表回复

发贴请遵守贴吧协议及“七条底线”贴吧投诉

内容:

使用签名档查看全部

发表

保存至快速回贴

日	一	二	三	四	五	六

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

登录百度账号

扫二维码下载贴吧客户端