CSS3动画样式以及小范例_css3动态style-CSDN博客

本文链接：https://blog.csdn.net/weixin_44291183/article/details/114988219

CSS3基础样式

1、transform
作用：可以控制元素的变形操作。如旋转、平移、3D旋转、倾斜、缩放。

属性值取值有以下：
translateX（在X轴上平移）、translateY（在Y轴上平移）、translateZ（在Z轴上平移）、rotate（2D平面的旋转）、rotateX（沿X轴旋转）、rotateY（沿Y轴旋转）、rotateZ（沿Z轴旋转）
这是平移和旋转所用到的属性。
3D旋转，首先考虑的是如何呈现出3D效果（即近大远小效果）。则需要在父级元素中使用perspective样式，其作用是为平面设置视距，最佳视距为800px。
然后所要做的是让元素以3D样式展现，所用样式为transform-style：preserve3d；
缩放：样式为scale。当取值为1时，元素大小不变；取值大于1时，呈放大；小于1时，呈缩小。
倾斜：样式为skew。取值为倾斜角度。

2、过渡动画
过渡动画是一个从开始点到结束点的过程。所用样式是transition，来控制元素的过渡效果。
该样式有四个取值，分别是过渡属性名（不知道是可以写all）、过渡效果所用时间、过渡效果的速率（linear匀速、ease由快到慢、ease-in越来越快、ease-out越来越慢、ease-in-out先快后慢）、延迟时间。

 transition: all 10s linear 1s;

3、关键帧动画
完成这一动画，首先要先建立一个“剧本”，即这个动画从开始到结束，元素是怎样的运动？在整个动画阶段哪一段时间做着怎样的运动？都要在剧本中详细写出。
关键帧动画关键字是@keyframes。
写剧本的格式是

@keyframes  剧本名{
	整个动画的详细过程
	该过程有两种写法：
	①1%~100% 将整个过程看成100%，对各个阶段进行细分。
	②from......to......
}

 @keyframes demo1{
            10%{
                transform: translateX(200px);
            }
            50%{
                transform: translateX(1000px);
            }
            100%{
                transform: translateX(0px);
            }
        }

 @keyframes cars {
            0%{
                transform: translateX(0px);
            }
            100%{
                transform:translateX(-1000px) ;
            }
           
            
        }

建立完成的剧本后，在要添加动画的地方添加样式animation。其有五个取值，分别是剧本名（必填）、动画持续时间（必填）、播放速率（选填，具体取值同过渡动画）、延迟时间（选填）、播放次数（选填，自定义或者无数次infinite）。

animation: demo1 5s infinite;

一个3D小范例

供参考，以下用到了以上的基础样式。

<style>
       @keyframes myfirst {
           from{
                transform: rotateY(0deg);
           }
           to{
                transform: rotateY(360deg);
           }
       }


        body{
            perspective: 800px;
        }
        ul{
            width: 300px;
            height: 160px;
            position: relative;
            list-style: none;
            padding: 0px;
            margin: 300px auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg);
            animation: myfirst 5s linear infinite;
        }
        li{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        img{
            width: 300px;
            height: 160px;
        }
        li:nth-of-type(6){
            transform: rotateY(0deg) translateZ(400px);
        }
        li:nth-of-type(5){
            transform: rotateY(60deg) translateZ(400px);
        }
        li:nth-of-type(4){
            transform: rotateY(120deg) translateZ(400px);
        }
        li:nth-of-type(3){
            transform: rotateY(180deg) translateZ(400px);
        }
        li:nth-of-type(2){
            transform: rotateY(240deg) translateZ(400px);
        }
        li:nth-of-type(1){
            transform: rotateY(300deg) translateZ(400px);
        }
        
    </style>

<body>
    <ul>
        <li><img src="./image/1.jpg" alt=""></li>
        <li><img src="./image/1.jpg" alt=""></li>
        <li><img src="./image/1.jpg" alt=""></li>
        <li><img src="./image/1.jpg" alt=""></li>
        <li><img src="./image/1.jpg" alt=""></li>
        <li><img src="./image/1.jpg" alt=""></li>
        
    </ul>
</body>