当前位置： 移动技术网 > IT编程>网页制作>CSS > css中的基本简单动画与过度效果

css中的基本简单动画与过度效果

2020年07月14日  | 移动技术网IT编程  | 我要评论

css的过渡动画效果：

transform: translate()

transform: translate()

translateX() => 水平偏移 translateY() => 垂直偏移 translate(x,y) => 水平垂直偏移

里面可以写px或者百分比 百分比参照的是当前盒子的宽和高 所以可以使用translate(-50%, -50%)让定位的盒子水平垂直居中

移动的元素不会对其他盒子造成影响

transform: scale()

取值说明:

scaleX() => 水平缩放 scaleY() => 垂直缩放 scale(倍数) => 整体缩放

里面直接写数值即可 不需要添加单位 可以接受小数

transform-origin: 取值;

取值说明:

  1. 方位名词: left right top bottom center

  2. 具体的像素: 基于盒子的左上角为原点 X水平向右 Y垂直向下

transform: skew()

取值说明: 1. 斜切的角度 单位是deg 2. skewX() Y轴向X轴倾斜多少度 skew谁 谁的轴保持不变 另外一个轴朝这个轴倾斜对应的角度即可

连写属性：

  1. 当元素有多种2D转换的时候 需要采用连写的方式 中间空格隔开

  2. 当元素发生了旋转,那么其内部的坐标系也跟着发生了旋转 (推荐先写translate 在写rotate)

  3. 当多个转换场景的时候,后面的transform需要将前面的transform的效果复制下来

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魔方案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            /* perspective: 500px; */
            transition: all 5s;
            /* 假3d */
            /* position: relative; */
            /* 真3d */
            transform-style: preserve-3d;
           transform-origin:center center ;
        }
        
        .box:hover {
            transform: rotateX(360deg) rotateY(360deg);
        }
        
        .m {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .m:nth-child(1) {
            background-color: red;
            transform: rotateX(90deg) translateZ(150px);
        }
        
        .m:nth-child(2) {
            background-color: orange;
            transform: rotateX(-90deg) translateZ(150px);
        }
        
        .m:nth-child(3) {
            background-color: yellow;
            transform: rotateY(-90deg) translateZ(150px);
        }
        
        .m:nth-child(4) {
            background-color: green;
            transform: rotateY(90deg) translateZ(150px);
        }
        
        .m:nth-child(5) {
            background-color: lightgreen;
            transform: translateZ(150px);
        }
        
        .m:nth-child(6) {
            background-color: blue;
            transform: translateZ(-150px);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
    </div>
</body>

</html>

 

八卦图动画旋转案例

：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用一个盒子实现八卦图旋转</title>
        <style>
          /* 添加动画 */
        /* 声明动画 */
        @keyframes baguatu {
        100%{
            transform:rotatez(360deg)
        }
        }
        /* 这里为了防止看的不明显一直选装就用：hover来展示 */
        div:hover{
            animation: baguatu 2s infinite linear;
        }
    </style>
    <style>
        div{
            margin: 100px auto;
            width: 150px;
            height: 300px;
            border-left: 150px solid black;
            background-color: #fff;
            border-radius: 50%;
            position: relative;
        }
        div::before{
            position: absolute;
            top: 0;
            left: -50%;
            content:"";
            width: 25px;
            height: 25px;
            background-color: #ffffff;
            border: 60px solid #000;
            border-radius: 50%;
        }
        div::after{
            position: absolute;
        bottom: 0;
          left: -50%;
            content:"";
            width:30px;
            height:30px;
            background-color: #000;
            border: 60px solid #fff;
            border-radius: 50%;
        }
        div::before{
            position: absolute;
            top: 0;
            left: -50%;
            content:"";
            width:30px;
            height:30px;
            background-color: #ffffff;
            border: 60px solid #000;
            border-radius: 50%;
        }
    </style>
</head>
<body style="background-color: #ccc;">
  
    <div></div>

</body>
</html>

关注走一走，一起谈论前端技术

本文地址：https://blog.csdn.net/youknow156/article/details/107301312

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网