-
对代码做一些调整后，有利于观察： 将初始background设置为orange，姑且把这一帧叫做初始帧 动画里面的red为第一帧，blue为最后一帧。 将duration调短为5s，将delay调长为3s。 下面就可以开始试了： 1. none：从初始帧orange开始，延迟3s后开始播放动画 red-->blue，动画完成后，跳回到初始帧orange。 2. forwards：从初始帧orange开始，延迟3s后开始播放动画 red-->blue，动画完成后，留在最后一帧blue. 3. backwards : 也是从初始帧orange开始，但是由于会迅速应用动画的第一帧，所以延迟没有用了，立马就闪到了第一帧red。动画完成后，跳回到初始帧orange。 4. both：同时具有forwards和backwards效果，即拥有forwards动画结束留在最后一帧blue的效果，也拥有迅速应用动画的第一帧red的效果。这样both综合的效果为：从初始帧orange开始，迅速跳到第一帧red，然后变化到最后一帧blue结束，并留在最后一帧blue。查看全部
-
总算做好了，就那个3 和4感觉很生疏，但是理解了后也不难，需要掌握的东西。同时那个HOVER加上旋转的特效很新颖很好看，交互感觉很不错的。查看全部
-
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。查看全部
-
CSS3能做什么？ 1.圆角效果 2.块阴影与文字阴影 3.色彩 CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA。 4.渐变效果 5.个性化字体 网页上的字体太单一？使用@Font-Face 轻松实现定制字体。 6.多背景图 一个元素上添加多层背景图片。 7.边框背景图 边框应用背景图片。 8.变形处理 你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。 9.多栏布局 可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。 10.媒体查询 针对不同屏幕分辨率，应用不同的样式。查看全部
-
布局 ---> display: flex; 方向 ---> flex-direction: row(横)||column(竖); 上下 ---> align-items: flex-start||center||flex-end; 左右 ---> justify-content: 同上; 倒序 ---> row-reverse 兼容加-webkit-前缀查看全部
-
变形--矩阵 matrix() matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。 a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置查看全部
-
渐变色彩 1.CSS3 Gradient分为线性渐变(linear)和径向渐变(radial)； 2.线性渐变：linear-gradient(方向,起始颜色,终止颜色) 径向渐变：radial-gradient(圆心颜色，外圈颜色); 3.参数介绍： 3.1：第一个参数指定渐变方向，可以用“角度”的关键词或“英文”来表示： 角度 用英文 作用（渐变方向） 0deg（0度） to top 从下向上 90deg to right 从左到右 180deg to bottom 从上到下 270deg to left 从右到左 to top left 从右下角到左上角 to top right 从左小角到右上角: 3.2：第一个参数省略时，默认为“180deg”，等同于“to bottom”； 3.3：第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值 4.示例代码：从右下角向左上角的线性渐变背景：见代码快照查看全部
-
1. top：50%，left：50%，是将色块的左上角定位在了屏幕的中央，但是，整体并不在中央； 2. translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中查看全部
-
线性渐变： linear-gradient（1,2,3） 1为渐变方向参数： to top 从下向上 to right 从左向右 to bottom to left to top left 右下角到左上角 to top right 2,3表示颜色的起始点和结束点，可以有多个颜色值 如background-image:linear-gradient(to left,red,orange,yellow,green,blue);查看全部
-
给边框加上图片 与background:url(xx.jpg) 10px 20px no-repeat;相似 border-image：url(图片地址) 70 70 70 70 (切割图片的宽度，单位px可省略) repeat/round/stretch(重复、铺满、拉伸)查看全部
-
阴影 box-shadow（一） 语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 前两个参数必须，后边为可选参数。 inset内部阴影，省略默认外部阴影。 如果添加多个阴影，只需用逗号隔开即可。 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径：值只能是为正值，其值越大阴影的边缘就越模糊； 阴影扩展半径：值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数查看全部
-
CSS3 在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性。 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera查看全部
-
background-clip 用来将背景图片做适当的裁剪以适应实际需要。 语法： background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。查看全部
-
text-shadow可以用来设置文本的阴影效果。 语法： text-shadow: X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； Color：是指阴影的颜色，其可以使用rgba色。查看全部
-
我自己也要独立做一个出来，哼查看全部
举报
0/150
提交
取消