css----动画

VIP文章千面狐～

已于 2022-06-24 15:26:04 修改

阅读量108

点赞数 1

于 2022-06-19 11:06:14 首次发布

本文链接：https://blog.csdn.net/hutongkoudemihu/article/details/125355317

版权

3D魔方
奔跑的男孩
动画
方块变长
过渡
特朗普
小球落地
行走的兔子
移动的方块

transition属性：

transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration   规定完成过渡效果需要多少秒或毫秒。
transition-delay   定义过渡效果何时开始。
transition-timing-function   规定速度效果的速度曲线。
linear   规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease   规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic- bezier(0.25,0.1,0.25,1)）。
ease-in   规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out   规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out   规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

animation属性：

animation-name   规定需要绑定到选择器的 keyframe 名称。。
animation-duration   规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function   规定动画的速度曲线。
animation-delay   规定在动画开始之前的延迟。
animation-iteration-count   规定动画应该播放的次数。
animation-direction   规定是否应该轮流反向播放动画。
animation-fill-mode 规定元素在不播放动画时的样式(在开始前，结束后，或两者同时)
animation-iteration-count 规定动画应播放的次数
animation-play-state 规定动画是运行还是暂停
animation-timing-function 规定动画的速度曲线

一、3D魔方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            perspective: 800px;
        }
        body{
            transform-style: preserve-3d;
        }
        .out{
            transform-style: preserve-3d;
            margin: 200px auto;
            width: 200px;
            height: 200px;
            animation: baby 5s linear infinite;
        }
        .out div{
            width: 200px;
            height: 200px;
            position: absolute;
            background-size: cover;
            opacity: .7;
        }
        @keyframes baby{
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform: rotateX(720deg) rotateY(360deg);
            }
        }
        .box1{
            background-image: url("img/1.jfif");
            transform: rotateY(-90deg) translateZ(100px);
        }
        .box2{
            background-image: url("img/2.jfif");
            transform: rotateY(90deg) translateZ(100px);
        }
        .box3{
            background-image: url("img/3.jfif");
            transform: rotateX(-90deg) translateZ(100px);
        }
        .box4{
            background-image: url("img/4.jfif");
            transform: rotateX(90deg) translateZ(100px);
        }
        .box5{
            background-image: url("img/5.jfif");
            transform: rotateY(180deg) translateZ(100px);
        }
        .box6{
            background-image: url("img/6.jfif");
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="out">
        <div class