前端课程——动画
动画 什么是动画 CSS3新增animation 属性使得仅通过CSS的样式属性实现动画效果成为可能。实现动画包括两个部分: 用于定义动画的样式规则 用于设置动画开始、结束以及中间点样式的关键帧相对于传统使用JavaScript实现的动画方式,CSS3 新增的animation属性具有以下三个优点: 能够非常容易地创建简单动画,甚至不需要掌握JavaScript。 动画运行效果良好,可以在低性能的系统运行。性能以及流畅程度都优于JavaScript实现画效果。 允许浏览器优化动画的性能和效果,让浏览器控制动画序列。 定义动画序列 @keyframes声明动画 通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。 @keyframes <keyframes-name>{ <keyframe-block-list> } keyframes-name 用于设置当前动画的名称,以便通过animation-name属性调用。 keyframe-block-list ...
前端课程——过渡
过渡 什么是过渡 此属性同样存在浏览器兼容问题: /* WebKit引擎的浏览器(Chrome、Safari、Opera) */ -webkit-transition : <single-transition>; /* Gecko引擎的浏览器(Firefox) */ -moz-transition : <single-transition>; /* Trident引擎的浏览器(IE 10+) */ -ms-transition : <single-transition>; /* Presto引擎的浏览器(Opera) */ -o-transition : <single-transition>; 过渡子属性 ltransition-property 属性:用于定义过渡效果中的样式属性名称。 ltransition-duration 属性:用于定义过渡效果执行动画的时长。 ltransition-timing-function 属性:用于定义过渡效果计算的函数。 ease:默认值,元素样式从初始状态过渡到终止状态时速度由快到慢。 lin ...
前端课程——变形
变形 什么是变形 通过修改坐标,CSS transform属性可以在不影响正常文档流的情况下改变作用内容的位置。CSStransform包括一系列 CSS属性,通过这些属性可以对HTML元素进行变形。可以进行的变形包括旋转,倾斜,缩放以及位移,同时适用于平面以及三维空间。 在空间中实现CSS变形会稍微复杂一点。首先必须设置一个透视点(perspective) 来配置3D空间然后定义2D元素在空间中的变形。 关于变形的属性 transform transform: none| <transform-list> 属性允许你修改CSS视觉格式模型的坐标空间。使用它,元素可以被转换(translate)旋转(rotate) 、缩放(scale)候斜(skew)。 该CSS属性可用于内联元素和块级元素。其默认值为none,表示匹配元素不进行任何变形。 transorm-list:表示作用于元素的一个或多个变形的CSS函数。如果为多个函数的话,使用空格进行分隔。 transform-origin CSS属性让你更改一个元素变形的原点默认情况,变形的原点在元素的中心点,或者 ...
前端课程——渐变
渐变 什么是渐变 CSS渐变是CSS3的Image模块中新增的内容。利用CSS渐变替代在HTML页面中引入渐变效果的图片,这样减少HTML页面加载的时间,减小带宽的占用。 由于CSS渐变是由浏览器直接生成,在HTML页面缩放时的效果要比图片更好,使得可以更灵活、便捷地调整HTML页面布局。 线性渐变 线性渐变由一个轴(基准线)定义的,并且轴上每个点都具有独立的颜色。lincar-gradient()函数构建垂直于基准线的渐变效果,渐变的颜色取决于与之垂直相交的基准线上的色点。 基准线由包含渐变效果容器元素的中心点和一个角度来定义的。基准线上的颜色值则由不同的点来定义,包括起始点、终止点以及两者之间可选的中间点(中间点可以有多个) 起始点是基准线和容器元素的顶点与基准线垂直线的相交点来定义。 终止点是基准线和容器元素最近顶点与基准线垂直线的相交点来定义。 渐变的0度是从下到上的,增加角度会使渐变顺时针旋转。 CSS linear gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。具体语法结构如下: linear-gradient(<angle> ...
非常漂亮的图床上传程序
可能是最简洁、最漂亮的PHP阿里图床上传程序。
前端课程——布局
前端课程——布局
电脑必备软件推荐
电脑必备软件推荐
使用vscode进行远程开发
使用vscode进行远程开发
Valine评论之Valine-admin配置攻略
为你的valine评论开启邮件、微信、QQ等提醒吧!用漂亮的后台管理你的评论;用优雅的方式唤醒你的机器;用多种方式提醒你收到了评论···













