css3动画属性简介加学习案例

最新推荐文章于 2024-06-14 08:57:40 发布

陈斌鸿

最新推荐文章于 2024-06-14 08:57:40 发布

阅读量110

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/qq_42511002/article/details/104618051

版权

在w3c中介绍animation 属性是一个简写属性，用于设置六个动画属性：

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

css部分，样式包含动画效果

<style>
        *{
            margin:0;
            padding:0;
        }
        .farbox{
            width: 500px;
            height: 500px;
            background-color: palegreen;
            margin:50px auto;
            position:relative;
            overflow: hidden;
        }



        .box{
            width:100px;
            height:100px;
            position:absolute;
            left:0;top: 0;
            /* 3D的空间 */
            transform-style: preserve-3d;
            /* 为了方便观察让3D舞台转动角度 */
            transform:rotateX(0) rotateY(0);
            animation: video 16s 3s infinite linear;
            /* 动画名称video 动画时间16秒 动画延迟3秒 动画次数无限
            动画的速度曲线线性的  不设置默认动画正向的
             */

        }
        .box div{
            width:100px;
            height:100px;
            text-align: center;
            line-height:100px;
            font-size: 100px;
            font-weight:bolder;
            color:#fff;
            /* 让6个面全部定位在父元素里面 */
            position:absolute;
            left:0;top:0;
            /* 透明 */
            opacity:0.5;
            border:2px solid #000;

            /* 使背面不可见！ */
            backface-visibility:hidden;
        }
        .con1{
            /* 第一个面往前走 */
            background:red;
            transform:translateZ(50px);
        }
        .con2{
            /* 第二个面往后走 */
            background:blue;
            transform:translateZ(-50px) rotateY(180deg);   
            /*rotateY(180deg)  让正面朝外*/
        }
        .con3{
            /* 先往上位移50px  再绕着X轴转动90deg */
            background:pink;
            transform:translateY(-50px) rotateX(90deg);
        }
        .con4{
            /* 先往下位移50px,再绕着X轴转动90deg */
            background:green;
            transform:translateY(50px) rotateX(-90deg);
        }

        .con5{
            /* 先往左位移50px , 再绕着Y轴转动90deg */
            background:rosybrown;
            transform:translateX(-50px) rotateY(-90deg);
        }
        .con6{
            /* 先往右侧位移50px,再绕着Y轴转动90deg */
            background:#000;
            transform:translateX(50px) rotateY(90deg);
        }




        .box img{
            width:100%;
            height:100%;
        }
        @keyframes video {
            0% {
				transform: translate(0,0) rotateY(0deg) rotateY(0deg);

			}
            25% {
				transform: translate(400px,0) rotateY(360deg)
				 rotateX(0deg);
				  /* 向右平移400px，并且绕y轴顺时针旋转1周 */
			}
            50% {
				transform: translate(400px,400px) rotateY(360deg)
				 rotateX(-360deg);
				  /* 向下平移400px，并且绕x轴逆时针旋转1周 */
			}
            75% {
                transform: translate(0px,400px) rotateY(0deg)
                 rotateX(-360deg);
                  /* 向左平移400px，并且绕y轴逆时针旋转1周 */
		
			}
            100% {
                transform: translate(0px,0px) rotateY(0deg)
                 rotateX(0deg);
                 /* 向上平移400px，并且绕x轴顺时针旋转1周 */
			}
        }
        .farbox:hover .box{
            /* 鼠标滑过动画暂定 */
            animation-play-state:paused;
        }
       
    </style>

html部分

<body>
    <div class="farbox">
        <div class="box">
            
            <div class="con1">1</div>
            <div class="con2">2</div>
            <div class="con3">3</div>
            <div class="con4">4</div>
            <div class="con5">5</div>
            <div class="con6">6</div>
        </div>
    </div>
</body>

gif动画效果

在这里插入图片描述

陈斌鸿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画属性简介加学习案例

animation 属性是一个简写属性，用于设置六个动画属性：animation-name 规定需要绑定到选择器的 keyframe 名称。。animation-duration 规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function 规定动画的速度曲线。animation-delay 规定在动画开始之前的延迟。animation-iteration-...
复制链接

扫一扫