文档章节

遇到了一些前端的小知识(记一下)

saber巜
 saber巜
发布于 2017/04/27 21:44
字数 335
阅读 4
收藏 0

@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;
		}
	}

 

© 著作权归作者所有

共有 人打赏支持
saber巜
粉丝 1
博文 23
码字总数 3612
作品 0
永州
程序员
私信 提问
2018 前端面试准备

前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-Developer-Questions by Modules and knowledge 前端面试经典问题:CSS 中居中的几种方...

掘金官方
2017/12/14
0
0
面试技巧

持续集成是什么 互联网软件的开发,已经成熟、标准化,其中最重要的组成部分就是持续集成(Continuous integration,简称CI)。 持续集成是一种软件开发实践,即团队开发成员经常集成它们的工...

掘金官方
01/08
0
0
【吐血整理】前端求职面试资源分享,值得收藏!

面试不是单纯考察技术,而是综合能力的考查,关于面试,职位JD怎么看,知识点怎么复习,问题如何回答,项目怎么准备,和负责人如何沟通,怎么给HR留下良好印象……别小瞧这些问题,往往就是这...

慕课网官方_运营中心
07/25
0
0
前端:2018秋招面试经验总结

前言 从8月中旬实习结束就开始找工作了,一直到十一,终于尘埃落定,十一出去好好放松了一下,今天写一些面经回报牛客。 非科班,从大三开始学习前端,几乎是零基础,但很庆幸遇到了很好的学...

牛客网
01/05
0
0
你可能不知道的前端知识点

新建了一个 repo:justjavac/the-front-end-knowledge-you-may-dont-know 发掘被我们忽略的前端知识点。所有的讨论以 issues 的形式进行,任何人都可以在 issues 区围观讨论。 本 repo 的目的...

justjavac
2017/07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

最重要的是做什么,而不是怎么做。

最重要的是做什么,而不是怎么做。 做什么是战略,怎么做是战术。将军下令说,天黑前拿下这座山头,这是战略。手下的士兵可以不知道为什么要拿下这座山头,还非得是天黑之前,但士兵必须知道...

我是菜鸟我骄傲
今天
1
0
w, vmstat, top, sar, nload命令查看系统状态信息

w/uptime 查看系统负载 cat /proc/cpuinfo 查看cpu核数 vmstat 监控系统状态,用法 vmstat 1,关键的几列: r, b, swpd, si, so, bi, bo, us, wa top 查看进程使用资源情况 top -c 显示详细的...

野雪球
今天
2
0
小白创建一个spring boot项目

进入 https://start.spring.io/

lilugirl
今天
3
0
Alibaba Java诊断利器Arthas实践--使用redefine排查应用奇怪的日志来源

背景 随着应用越来越复杂,依赖越来越多,日志系统越来越混乱,有时会出现一些奇怪的日志,比如: [] [] [] No credential found 那么怎样排查这些奇怪的日志从哪里打印出来的呢?因为搞不清...

hengyunabc
今天
2
0
home hosts

home hosts lwk@qwfys:~$ cat /etc/hosts127.0.0.1 localhost127.0.1.1 qwfys192.168.56.101vm600.qwfys.com39.108.212.91alpha1.ppy.com39.108.117.122alpha2.p......

qwfys
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部