最新公告
  • 欢迎您光临网站无忧模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • css3有哪些新特性

    正文概述 六哥   2021-05-17   49

    css3新特性有:1、“E[att^=value]”、“E[att$=value]”等属性选择器;2、“:root”、“:not”、“:empty”等伪类;3、box-shadow、transition、transform等属性。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    CSS3选择器

    属性选择器

    • E[att^=value]

    • E[att$=value]

    • E[att*=value]

    伪类选择器

    • :root

    • :not

    • :only-child

    • :first-child和:last-child

    • :nth-child(n)和:nth-last-child(n)

    • :nth-of-type(n) 和:nth-last-of-type(n)

    • :target

    • :empty

    css3属性

    CSS3边框与圆角

    • CSS3圆角 border-radius

    • 盒阴影 box-shadow

    • 边框图像 border-image

    CSS3背景与渐变

    CSS3背景

    • background-image:设置一个元素的背景图像。

    • background-origin:规定 background-position 属性相对于什么位置来定位。

    • background-clip:规定背景的绘制区域。

    CSS3渐变

    定义:可以在两个或者多个指定颜色之间显示平移的过渡

    • linear-gradient():线性渐变。

    • radial-gradient():径向渐变。

    CSS3过渡

    定义:允许css的属性值在一定时间区间内平滑的过渡,在鼠标点击,鼠标滑过或对元素任何改变中触发,并圆滑地以动画形式改变css的属性值。

    • transition:设置元素当过渡效果,四个简写属性为:

    • transition-property:过渡属性名。

    • transition-duration:规定完成过渡效果需要花费的时间(以秒或毫秒计)。

    • transition-timing-function:指定切换效果的速度。

    `QM{LU2PARU11J)@3%42~OL.png

    • cubic-bezier(x1,y1,x2,y2):贝塞尔曲线,是控制变化的速度曲线。

    • transition-delay:指定何时将开始切换效果。

    CSS3变换

    定义:让一个元素在一个坐标系统中变形,这个属性包含一系列的变形函数,可以移动,旋转,缩放元素。

    • transform:应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

    语法:

    transform: none(默认)|transform-functions;
    • transform-origin:允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。

    语法:

    transform-origin: x-axis y-axis z-axis;
    • transform-style:指定嵌套元素是怎样在三维空间中呈现。

    2D转换方法

    • rotate(angle):定义 2D 旋转,在参数中规定角度。

    • translate(x,y):指定元素在二维空间中的位移。X轴方向向右,Y轴方向向下。

    • translateX(n):指定元素在X轴中的位移。

    • translateY(n):指定元素在Y轴中的位移。

    • scale(n):定义 2D 缩放转换。

    • scaleX(n):定义 X 轴方向的缩放转换。

    • scaleY(n):定义 Y 轴方向的缩放转换。

    • matrix(a,b,c,d,e,f):定义 2D 转换,使用六个值的矩阵。

    • skew(x-angle,y-angle):定义沿着 X 和 Y 轴的 2D 倾斜转换。

    • skewX(angle):定义沿着 X 轴的 2D 倾斜转换。

    • skewY(angle):定义沿着 Y 轴的 2D 倾斜转换。

    3D转换方法

    • perspective(n):为 3D 转换元素定义透视视图。

    • translate3d(x,y,z):指定元素在三维空间中的位移。X轴方向向右,Y轴方向向下,Z轴方向向你。

    • translateX(x):指定元素在X轴中的位移。

    • translateY(y):指定元素在Y轴中的位移。

    • translateZ(z):指定元素在Z轴中的位移。

    • scale3d(x,y,z):定义 3D 缩放转换。

    • scaleX(x):通过设置 X 轴的值来定义缩放转换。

    • scaleY(y):通过设置 Y 轴的值来定义缩放转换。

    • scaleZ(z):通过设置 Z 轴的值来定义缩放转换。

    • rotate3d(x,y,z,angle):定义 3D 旋转。

    • rotateX(x):定义沿着 X 轴的 3D 旋转。

    • rotateY(y):定义沿着 Y 轴的 3D 旋转。

    • rotateZ(z):定义沿着 Z 轴的 3D 旋转。

    • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n):定义 3D 转换,使用 16 个值的 4×4 矩阵。

    CSS3动画

    定义:使元素从一种样式逐渐变化到另外一种样式的效果。

    • animation:为元素添加动画,是一个简写属性。

    • animation-name:为 @keyframes 动画名称。

    • animation-duration:动画指定需要多少秒或毫秒完成。

    • animation-timing-function:设置动画将如何完成一个周期。

    • animation-delay:设置动画在启动前的延迟间隔,可以是秒或毫秒。

    • animation-iteration-count:定义动画的播放次数。

    BHPURJJ}2M9CPJKQ1YEVPPC.png

    • animation-direction:指定是否应该轮流反向播放动画。

    P(DD)CMSWPY2TGY@1BWQY9B.png

    • animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。该属性可重写该行为。

    R1O`PCY7[0COQHHAEHZNT}9.png

    • animation-play-state:指定动画是否正在运行或已暂停。

    J}BK@_43ZNI$@QGJ{2(VEBQ.png

    • @Keyframes规则:使用@keyframes规则,你可以创建动画。

    语法:

    @keyframes animationname {keyframes-selector {css-styles;}}

    KJG}D$2G5}5%O[IEUPGRKR9.png

    @keyframes mymove {
    
    0%   {top:0px; left:0px; background:red;}
    	25%  {top:0px; left:100px; background:blue;}
    	50%  {top:100px; left:100px; background:yellow;}
    	75%  {top:100px; left:0px; background:green;}
    	100% {top:0px; left:0px; background:red;}
    }

    推荐学习:css视频教程

    以上就是css3有哪些新特性的详细内容,更多请关注网站无忧资源网其它相关文章!


    网站无忧 » css3有哪些新特性

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    发表评论

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者
    升级SVIP尊享更多特权立即升级