avatar
A-A+
摘要:

CSS3是CSS技术的升级版本,CSS3语言以模块化为基础,引入了许许多多的特色效果,在这里主要分享用CSS3打造的呼吸灯效果。效果演示方法:用手机或者pad打开jinlijun.com,看本站的LOGO,是不是很帅,喜欢就拿去吧!

CSS3是CSS技术的升级版本,CSS3语言以模块化为基础,引入了许许多多的特色效果,在这里主要分享用CSS3打造的呼吸灯效果。效果演示方法:用手机或者pad打开jinlijun.com,看本站的LOGO,是不是很帅,喜欢就拿去吧!

1

.logo-x {
	margin:0 auto;
	//居中
	width:35px;
	//容器的宽度
	text-indent:-10000px;
	//容器中文字隐藏
	background:url(../images/logox.png) no-repeat 0 3px;
	//呼吸效果显示的图片
	/* IE10、Firefox and Opera,IE9以及更早的版本不支持 */
	animation-name:breath;
	/* 动画名称 */
	animation-duration:3s;
	/* 动画时长3秒 */
	animation-timing-function:ease-in-out;
	/* 动画速度曲线:以低速开始和结束 */
	animation-iteration-count:infinite;
	/* 播放次数:无限 */
	/* Safari and Chrome */
	-webkit-animation-name:breath;
	/* 动画名称 */
	-webkit-animation-duration:3s;
	/* 动画时长3秒 */
	-webkit-animation-timing-function:ease-in-out;
	/* 动画速度曲线:以低速开始和结束 */
	-webkit-animation-iteration-count:infinite;
	/* 播放次数:无限 */
	opacity:0.1;
}
@keyframes breath {
	from {
	opacity:0.1;
}
/* 动画开始时的不透明度 */
 50% {
	opacity:1;
}
/* 动画50% 时的不透明度 */
to {
	opacity:0.1;
}
/* 动画结束时的不透明度 */
}
@-webkit-keyframes breath {
	from {
	opacity:0.1;
}
/* 动画开始时的不透明度 */
 50% {
	opacity:1;
}
/* 动画50% 时的不透明度 */
to {
	opacity:0.1;
}
/* 动画结束时的不透明度 */
}
  • 本文为原创文章,版权归 金励君   博客所有,转载引用请注明以下信息:
  • 本文作者:
  • 本文标题: CSS3 呼吸灯效果
  • 本文地址: http://www.jinlijun.com/css3-respiration-lamp-effect.html +复制链接
  • 本文标签:

CSS3 呼吸灯效果:等您坐沙发呢!

发表评论

(教你设置自己的个性头像)

疑问? 吃西瓜。 生闷气! 偷看。 Hi OK 吃惊。 飞吻! 不要啊! 膜拜! 泡泡糖。 抛钱。 献花。 抓狂! 纠结! 不理你。 抛媚眼。 调皮。 恭喜! 忍! 委屈。 吃饭。

快捷键:Ctrl+Enter