CSS3中有哪些新特性

新增选择器

属性选择器

结构伪类选择器

伪元素选择器

2D转换：transform

位移：transform：translate（100px，100px）

缩放：transform：scale（1，1）

旋转：transform：rotate（45deg）

3D转换：transform

位移：transform：translate（100px，100px，100px）

旋转：transform：rotate（0，0，1，45deg）

3D呈现：transform-style

flat：子元素不开启3d空间

preserve-3d：子元素开启3d空间

透视：perspective（单位px）

人的眼睛到屏幕的距离；近大远小。

过渡：transition

transition包括四个子属性：transition-property   transition-duration   transition-timing-function  transition-delay

transition：all（要过渡的属性） 2s（过渡时间） linear（速度方式） 1s（开始延迟时间）

谁过度给谁加

IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法

<html>
    <style>
        .test{
            height: 100px;
            width: 100px;
            background-color: blue;
            transition:all 3s ease 0s;
        }
        .test:hover {
            width: 500px;
        }
    </style>
    <body>
        <div class="test"></div>
    </body>
</html>

 

动画

 

@keyframes 动画名称 {0% {width：100px} 100% {width：200px}}

过渡transition是通过初始和结束两个状态之间的平滑过渡实现简单动画的，而animation通过关键帧@keyframes来实现更为复杂的动画效果

animation也是一个复合属性，包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode共8个子属性

　　[注意]IE9-不支持；safari4-8、IOS3.2-8.4、android2.1-4.4.4需要添加-webkit-前缀

animation-name: 动画名称(默认值为none)
animation-duration: 持续时间(默认值为0)
animation-timing-function: 时间函数(默认值为ease)
animation-delay: 延迟时间(默认值为0)
animation-iteration-count: 循环次数(默认值为1)
animation-direction: 动画方向(默认值为normal)
animation-play-state: 播放状态(默认值为running)
animation-fill-mode: 填充模式(默认值为none)
<html>
    <style>
    div{
        width: 300px;
        height: 100px;
        background-color: pink;
        animation-name: test;
        animation-duration: 3s;
        animation-timing-function: ease;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-play-state: running;
        animation-fill-mode: none;
    }
        /* 关于keyframes关键帧的内容稍后介绍     */
        @keyframes test{
        0%{background-color: lightblue;}
        30%{background-color: lightgreen;}
        60%{background-color: lightgray;}
        100%{background-color: black;}
    }
    </style>
    <body>
        <div class="test"></div>
    </body>
</html>

animation制作动画效果需要两步，首先用关键帧声明动画，再用animation调用动画

　　关键帧的语法是以@keyframes开头，后面紧跟着动画名称animation-name。from等同于0%，to等同于100%。百分比跟随的花括号里面的代码，代表此时对应的样式

 

如果0%或100%不指定关键帧，将使用该元素默认的属性值

空的keyframes规则是有效的，它们会覆盖前面有效的关键帧规则

其他特性

背景渐变background：linear-gradient（top left，red，pink）

图片模糊：filter：blur（5px）数值越大越模糊

calc函数：width：calc（100% - 80px）

圆角：border-radius

文字特效 （text-shadow）

文字渲染 （text-decoration）

 

参考文章：

深入理解CSS过渡transition - 小火柴的蓝色理想 - 博客园 (cnblogs.com)

posted @ 2022-05-31 14:29  yeqi7  阅读(145)  评论(0)    收藏  举报