慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

qq_Sigeqinshi_0

.nav li{background:linear-gradient(to bottom,#dd2926,#000) no-repeat right / 5px 30px;}从上向下的渐变

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2016-07-31
慕小主

变形--缩放 scale() 缩放 scale()函数让元素根据中心原点对对象进行缩放。 缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 例如： div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5); } 注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放） 注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。注意：可配合此效果使用，界面更加美观 transition: all 1s;

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2018-03-22
慕小主

变形--扭曲 skew() 扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 Skew()具有三种情况： 1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）; 代码: -webkit-transform: skew(45deg); -moz-transform:skew(45deg) transform:skew(45deg); 注意： skew(x,y)中的值可为正可为负。 -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); transform:skew(-45deg);

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2016-07-30
web端大神

动画--过渡延迟时间 transition-delay 不同的是transition-duration是用来设置过渡动画的持续时间

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2016-07-30
web端大神

动画--过渡函数 transition-timing-function -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; linear;速度是恒速。 ease-in;速度越来越快，呈一种加速状态。 ease-out;速度越来越慢，呈一种减速状态。 ease-in-out;先加速再减速。

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2016-07-30
慕丝4759466

关于背景透明：格式一定是background-color：rgba(r,g,b,a); a就是透明度，从0到10不等，rgb可以通过百分比的形式进行编辑

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2016-07-30
慕丝4759466

边框的图片是border-image：URL：xxx 70 70 70 70 repeat —————— ———— 切割图片的宽度图片的延伸方式{round 平铺 repeat 重复 stretch拉伸}

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-07-30
慕丝4759466

阴影： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 其实就是：box-shadow：左右上下模糊度 #颜色 inset（或者省略默认外阴影）

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-07-30
慕丝4759466

其实不用想的复杂。想让哪个角有弧度，就设那个角的角度。至于半圆，高度要是宽度的一半，主要是高度太高就会变形。

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2016-07-30
web端大神

在鼠标悬停（hover）状态下，div:hover { height: 100px; }

查看全部

0 采集收起来源：CSS3中的动画--过渡所需时间 transition-duration
2016-07-30
web端大神

动画--过渡所需时间 transition-duration -webkit-transition-property: -webkit-border-radius; transition-property: border-radius; -webkit-transition-duration: .5s; transition-duration: .5s;

查看全部

0 采集收起来源：CSS3中的动画--过渡所需时间 transition-duration
2016-07-30
web端大神

transition-proper:指定过渡或动态模拟的CSS属性； transition-duration:指定完成过渡所需要的时间； transition-timing-function:指定过渡函数； transition-delay:指定开始出现的延迟时间是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2016-07-30
web端大神

变形--原点 transform-origin 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。 -webkit-transform-origin: left top; transform-origin: left top;

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2016-07-30
web端大神

matrix(长度缩放，y轴扭曲，x轴扭曲，宽度缩放，x位移，y位移) 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是初始位置

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-07-30
web端大神

变形--矩阵 matrix()，matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵。通过matrix()函数来模拟transform中translate()位移的效果。 -webkit-transform: matrix(1,0,0,1,50,50); -moz-transform:matrix(1,0,0,1,50,50); -transform: matrix(1,0,0,1,50,50);

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-07-30

首页上一页 464 465 466 467 468 469 470 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果