css3的新特性和动画

最新推荐文章于 2024-08-18 21:06:49 发布

清风专辑

最新推荐文章于 2024-08-18 21:06:49 发布

阅读量679

点赞数 14

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/studyqingfeng/article/details/136320403

版权

一: css3的新特性

1.圆角border-radius 单位px，后面跟四个值，对应4个直角

2.box-shadow 向框添加一个或多个阴影
必选: h-shadow,水平阴影的位置 v-shadow垂直阴影的位置
可选: blur模糊距离,spread阴影的尺寸,color阴影的颜色,inset外部引用修改为内部阴影

3.text-shadow 向文本设置阴影
必选: h-shadow,水平阴影的位置 v-shadow垂直阴影的位置
可选:blur模糊距离,color阴影的颜色

4.linear-gradient 背景渐变可以在两个或两个以上颜色之间平稳过渡

5.转换transform 分为7小点
5.1.translate()移动根据X轴和Y轴位置给定参数，从当前元素位置移动
5.2.rotate()旋转在给定度数顺时针旋转的元素，可带负数
5.3.scale()缩放取决于X轴和Y轴的参数
5.4.skew()倾斜根据X轴和Y轴位置给定参数，从当前元素位置倾斜可负数
5.5 rotateX() 围绕其在一个给定度数X轴旋转的元素
5.6 rotateY() 围绕其在一个给定度数Y轴旋转的元素
5.7 translate3d() 实现元素上下左右漂浮

6.过渡transition 让元素从一种样式到另一种样式有4种属性
transition-property 过渡属性 transition-duration 定义过渡效果花费的时间 transition-timing- function过渡效果的时间曲线 transition-delay 规定过度效果何时开始

二: css3的新动画
1. @keyframes创建动画 name是动画名字,percent是到哪个百分比停止当前进入到下一个样式
2. animation执行动画分7块
2.1 name:设置动画的名称
2.2 duration:设置动画的持续时间
2.3 timing-function:设置动画效果的速率
2.4 delay:设置动画的开始时间
2.5 iteration-count:设置动画循环的次数,infinite为无限次数的循环
2.6 direction 设置动画播放的方向
2.7 amimation-play-state 控制动画的播放状态 running代表播放，而paused代表停止播放

3. 绘制特殊图形

4. 响应式布局

5. 栅格系统将页面自动分为12个格子，可以根据不同的类前缀实现不同的页面布局

6. 多列
6.1 创建多列
6.2 设置每列之间的间隙
6.3 列边框制定了列与列的边框样式

<body>
    <div class="box0"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>


<style>
    div {
        width: 500px;
        border: 2px solid red;
        border-radius: 10px;
        padding: 10px;
        /* 创建多列 */
        column-count: 3;
        /* 设置每列之间的间隙 */
        column-gap: 40px;
        /* 列边框 制定了列与列的边框样式 */
        column-rule-style: solid;
        /* 制定了两列的边框厚度 */
        column-rule-width: 1px;
        /* 制定了两列的边框的颜色 */
        column-rule-color: lightblue;
    }

    .box0 {
        background-color: aquamarine;
        margin: 0 auto;
        width: 400px;
        height: 400px;
        border-radius: 50px;
        box-shadow: 10px 10px 5px 5px cornflowerblue;
        transform: translate(50px, 100px);
        transform: rotate(30deg);
        transform: scale(2, 3);
        transform: skew(30deg, 20deg);
        transform: rotateX(120deg);
        transform: rotateY(120deg);
    }

    .box1 {
        background-color: rosybrown;
        width: 400px;
        height: 400px;
        box-shadow: 0 15px 30px 10px rgba(red, green, blue, alpha);
        transform: translate3d(0, -10px, 0);
        transition: width 2s ease 1s;
    }

    @keyframes name {}

    .box2 {
        width: 400px;
        height: 400px;
        background-color: gold;
        width: 100px;
        height: 100px;
        animation: color 2s linear 1s direction fill-mode;
    }

    .box3 {
        width: 0;
        height: 0;
        border-top: 100px solid transparent;
        border-right: 100px solid rosybrown;
        border-bottom: 100px solid transparent;
        border-left: 100px solid transparent;
    }
</style>

清风专辑

关注

14
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css3的新特性和动画

transition-property 过渡属性 transition-duration 定义过渡效果花费的时间 transition-timing- function过渡效果的时间曲线 transition-delay 规定过度效果何时开始。5.4.skew()倾斜根据X轴和Y轴位置给定参数，从当前元素位置倾斜可负数。必选: h-shadow,水平阴影的位置 v-shadow垂直阴影的位置。必选: h-shadow,水平阴影的位置 v-shadow垂直阴影的位置。
复制链接

扫一扫