文档章节

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

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部