文档章节

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

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)。 持续集成是一种软件开发实践,即团队开发成员经常集成它们的工...

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

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

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

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

牛客网
2018/01/05
0
0
要不要听听小白学习Linux经验小谈

Linux系统近几年发展的很快,特别是随着安卓手机的普及,大数据、物联网、人工智能等科学技术的发展,Linux系统从几年前只有白帽、黑帽等系统高手才了解的情况下变成如今几乎全民皆知的地步,...

问题终结者
2018/05/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7重置密码、单用户模式、救援模式、ls命令、chmod命令

在工作当中如果我们错误的配置了文件使服务器不能正常启动或者忘记密码不能登录系统,如何解决这些问题呢?重装系统是可以实现的,但是往往不能轻易重装系统的,下面用忘记密码作为例子讲解如...

李超小牛子
今天
3
0
Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
5
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
3
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
3
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部