立方体动画

最新推荐文章于 2021-12-17 15:30:03 发布

——jinqiang12345

最新推荐文章于 2021-12-17 15:30:03 发布

阅读量259

点赞数

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/weixin_39927443/article/details/85337149

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近看到了网站上有一个立方体动画，尝试着模仿了一下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>立方体动画</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<style>
    body {
        background: #607d8b!important;
    }
    @keyframes roll {
        from {
            transform: rotateX(-45deg) rotateY(45deg);
        }
        25% {
            transform: rotateX(-45deg) rotateY(45deg);
        }
        100% {
            transform: rotateX(-45deg) rotateY(405deg);
        }
    }
    @keyframes translateZZ {
        from {
            transform: rotateY(90deg) translateZ(100px);
        }
        12.5% {
            transform: rotateY(90deg) translateZ(200px);
        }
        25% {
            transform: rotateY(90deg) translateZ(100px);
        }
        100% {
            transform: rotateY(90deg) translateZ(100px);
        }
    }
    @keyframes translateZX1 {
        from {
            transform: rotateX(90deg) translateZ(100px);
        }
        12.5% {
            transform: rotateX(90deg) translateZ(200px);
        }
        25% {
            transform: rotateX(90deg) translateZ(100px);
        }
        100% {
            transform: rotateX(90deg) translateZ(100px);
        }
    }
    @keyframes translateZX2 {
        from {
            transform: rotateX(90deg) translateZ(-100px);
        }
        12.5% {
            transform: rotateX(90deg) translateZ(-200px);
        }
        25% {
            transform: rotateX(90deg) translateZ(-100px);
        }
        100% {
            transform: rotateX(90deg) translateZ(-100px);
        }
    }
    @keyframes translateZZ1 {
        from {
            transform: translateZ(100px);
        }
        12.5% {
            transform: translateZ(200px);
        }
        25% {
            transform: translateZ(100px);
        }
        100% {
            transform: translateZ(100px);
        }
    }
    @keyframes translateZZ2 {
        from {
            transform: translateZ(-100px);
        }
        12.5% {
            transform: translateZ(-200px);
        }
        25% {
            transform: translateZ(-100px);
        }
        100% {
            transform: translateZ(-100px);
        }
    }
    @keyframes translateZZZ {
        from {
            transform: rotateY(90deg) translateZ(-100px);
        }
        12.5% {
            transform: rotateY(90deg) translateZ(-200px);
        }
        25% {
            transform: rotateY(90deg) translateZ(-100px);
        }
        100% {
            transform: rotateY(90deg) translateZ(-100px);
        }
    }
    .ddd {
        animation: roll 4s linear infinite;
        width: 200px;
        height: 200px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        transform:rotateX(-45deg) rotateY(45deg);
        transform-style: preserve-3d;
    }
    .mindiv {
        position: absolute;
        width: 200px;
        height: 200px;
        box-shadow: 0 0 10px rgba(0,0,0,.1);
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        /**background: url('./bg.jpg') center center no-repeat;*/
        background: #448AFF;
        background-size: 100% 100%;
        top: 0;
        left: 0;
        opacity: .5;
        border: 5px solid #333;
    }
    .main1{
        transform: translateZ(100px);
        animation: translateZZ1 4s linear infinite;
    }
    .main2{
        transform: rotateX(90deg) translateZ(100px);
        animation: translateZX1 4s linear infinite;
    }
    .main3{
        transform: rotateX(90deg) translateZ(-100px);
        animation: translateZX2 4s linear infinite;
    }
    .main4{
        transform: rotateY(90deg) translateZ(100px);
        animation: translateZZ 4s linear infinite;
    }
    .main5{
        transform: rotateY(90deg) translateZ(-100px);
        animation: translateZZZ 4s linear infinite;
    }
    .main6{
        transform: translateZ(-100px);
        animation: translateZZ2 4s linear infinite;
    }
</style>
<body>
    <div class="ddd">
        <div class="mindiv main1"></div>
        <div class="mindiv main2"></div>
        <div class="mindiv main3"></div>
        <div class="mindiv main4"></div>
        <div class="mindiv main5"></div>
        <div class="mindiv main6"></div>
    </div>

</body>
<script>
</script>
</html>

在这里插入图片描述

——jinqiang12345

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
立方体动画

最近看到了网站上有一个立方体动画，尝试着模仿了一下&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;立方体动画&lt;/title&gt; &lt;link rel="stylesheet" href="https:/
复制链接

扫一扫