css笔记--14

Xayda~

于 2023-09-03 22:01:32 发布

阅读量35

点赞数

文章标签： css 笔记前端

本文链接：https://blog.csdn.net/2303_78650625/article/details/132656284

版权

1.变形平移

1）变形就是指通过CSS来改变元素的形状或位置

2）变形不会影响到页面的布局

3）transform用来设置元素的变形效果

平移

translateX( ) 沿着x轴方向平移

translateY( ) 沿着y轴方向平移

translateZ( ) 沿着z轴方向平移

平移元素，百分比是相对于自身计算的

当元素大小不确定时的居中代码

.box3{
        position:absolute;
        background-color: orange;
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-50%);
    }

2.z轴平移

1）设置当前网页的视距，人眼距离网页的距离

html{
perspective:800px;
}

2)z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离

3）距离越大，元素离人越近

4）平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看见效果，必须设置网页的视距

3.小球跳跃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            height:500px;
            border-bottom: 10px black solid;
            margin:50px auto;
            overflow:hidden;
        }
        .outer div{
            float:left;
            width:100px;
            height:100px;
            border-radius: 50%;
            animation:ball .5s forwards linear infinite alternate;
        }
        div.box1{
            
            background-color: #bfa;
animation-delay: .1s;
        }
        div.box2{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color:red;
            animation-delay: .2s;
        }
        div.box3{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color: olivedrab;
            animation-delay: .3s;
        }
        div.box4{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color: #bfa;
            animation-delay: .4s;
        }
        div.box5{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color: orange;
            animation-delay: .5s;
        }
        div.box6{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color: blue;
            animation-delay: .6s;
        }
        div.box7{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color: black;
            animation-delay: .7s;
        }
        @keyframes ball {
            from{
                margin-top: 0;
            }
            to{
                margin-top: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
    </div>
</body>
</html>

4.旋转

通过旋转可以使元素沿着x y 或z轴旋转指定的角度

1）rotateX( )

2）rotateY( )

3）rotateZ( )

设置视距之后才会有近大远小的效果

        transform:rotateX(180deg);

5.鸭子表

<style>
        .clock{
            width:500px;
            height:500px;
            margin:0 auto;
            margin-top: 100px;
            background-image: url(./图片列表/u=2385787802\,2145275951&fm=253&fmt=auto&app=138&f=PNG.webp);
            background-size: cover;
            border-radius: 50%;
            position: relative;
        }
        .clock>div{
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            margin:auto;
        }
        .hour-wrapper{
            width:70%;
            height:70%;
            animation:run 3600s infinite;
        }
        .hour{
            width:6px;
    height: 50%;
    background-color: black;
    margin: 0 auto;
        }
        .min-wrapper{
            width:80%;
            height:80%;
            animation:run 360s steps(60) infinite;
        }
        .min{
            width:4px;
    height: 50%;
    background-color: black;
margin: 0 auto;
}
        .sec-wrapper{
            width:95%;
            height:95%;
            animation:run 60s steps(60) infinite;
        }
        .sec{
            width:2px;
    height: 50%;
        background-color: black;
    margin: 0 auto;
    }
    @keyframes run{
        from{
            transform: rotateZ(0);
        }
        to{
            transform: rotateZ(360deg);
        }
    }
    </style>

<body>
    <div class="clock">
        <div class="hour-wrapper">
            <div class="hour"></div>
        </div>
        <div class="min-wrapper">
            <div class="min"></div>
        </div>
        <div class="sec-wrapper">
            <div class="sec"></div>
        </div>
    </div>
</body>

6.立方体练习

1）设置3D变形效果

transform-style:preserve-3d;

2) 为元素设置透明效果

opacity:0.7;

7.缩放

对元素进行缩放的函数

1）scaleX( ) 水平方向的缩放

2）scaleY( ) 垂直方向的缩放

3）scale( )双方向的缩放

4）变形的原点

默认值：center

transform-origin

transform-origin:20px 20px;

8.less简介

1）less是一门CSS的预处理语言

2）less是一个CSS的增强版，通过less可以编写可以编写更少的代码实现更强大的样式

3) 在less中添加了许多的新的特性，像对变量的支持、对mixin的支持......

4）css原生也支持变量的设置

--color:#bfa;

background-color:var(--color);

5) calc( )计算函数

width:calc(200px*2);

6)less的语法大体上和css语法一致，但是less中增添了许多对css的拓展

所有浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行

Xayda~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记--14

1）less是一门CSS的预处理语言2）less是一个CSS的增强版，通过less可以编写可以编写更少的代码实现更强大的样式3) 在less中添加了许多的新的特性，像对变量的支持、对mixin的支持......4）css原生也支持变量的设置5) calc( )计算函数6)less的语法大体上和css语法一致，但是less中增添了许多对css的拓展所有浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行。
复制链接

扫一扫