为了账号安全,请及时绑定邮箱和手机立即绑定
  • 对代码做一些调整后,有利于观察: 将初始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.媒体查询 针对不同屏幕分辨率,应用不同的样式。
    查看全部
    6 采集 收起 来源:CSS3能做什么?

    2015-03-23

  • 布局 ---> 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
    查看全部
    4 采集 收起 来源:什么是CSS3?

    2015-06-07

  • 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色。
    查看全部
  • border-radius是向元素添加圆角边框。然后他的的值可以是1个也可以是4个,4个的话 就是 左上角,右上角,右下角,左下角。和padding一样也是顺时针设置
    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下,建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么?
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!