遇到了一些前端的小知识(记一下)
博客专区 > saber巜 的博客 > 博客详情
遇到了一些前端的小知识(记一下)
saber巜 发表于8个月前
遇到了一些前端的小知识(记一下)
  • 发表于 8个月前
  • 阅读 4
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

@keyframes from to

通过 @keyframes 规则,您能够创建动画。

创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中,您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。

0% 是动画的开始时间,100% 动画的结束时间。

为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。(摘抄于w3)

 

ease    规定慢速开始,然后变快,然后慢速结束的过渡效果。    

ease-in    规定以慢速开始的过渡效果。    

ease-out    规定以慢速结束的过渡效果。    

ease-in-out    规定以慢速开始和结束的过渡效果。

 

infinite:无限循环

alternate:动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。

下面的是一个边框特效

	#gameImg {
		transition: all 0.5s;
		animation: neon1 1.5s ease-in-out infinite alternate;
	}
	
	@keyframes neon1 {
		/*设置阴影*/
		from {
			box-shadow: 
            0 0 2px #00ffff,
            0 0 4px #00ffff, 
            0 0 6px #00ffff, 
            0 0 8px #00ffff, 
            0 0 14px #00ffff, 
            0 0 16px #00ffff, 
            0 0 20px #00ffff, 
            0 0 30px #00ffff;
		}
		to {
			box-shadow: 
            0 0 1px #00ffff, 
            0 0 2px #00ffff, 
            0 0 3px #00ffff, 
            0 0 4px #00ffff, 
            0 0 7px #00ffff, 
            0 0 8px #00ffff, 
            0 0 10px #00ffff, 
            0 0 15px #00ffff;
		}
	}

 

共有 人打赏支持
粉丝 2
博文 5
码字总数 3612
×
saber巜
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: