七夕，用HTML+CSS动画实现旋转表白魔方感动她

发布于：2023-02-01 ⋅ 阅读:(582) ⋅ 点赞:(0)

实现效果：

 

6de7081f1b74409da017282d73745023.png 

⭐️  作者：船长在船上
🚩 主页：来访地址船长在船上的博客
🔨  简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

 

🔔  感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。  

 

HTML：

<div id="content">
        <div id="box1">
            <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
        </div>
        <div id="box2">
            <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
        </div>
        <div id="box3">
            <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
        </div>
        <div id="box4">
            <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
        </div>
        <div id="box5">
            <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
        </div>
        <div id="box6">
            <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
        </div>
    </div>

 

CSS：

CSS3 transform 属性：

transform: none|transform-functions;

值 描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

 

CSS3 animation（动画） 属性：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值 说明
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。 

        body {
            height: 100vh;
            width: 100vw;
            margin: 0;
            padding: 0;
        }

        #content {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            margin-top: -150px;
            left: 50%;
            margin-left: -150px;
            transform-style: preserve-3d;
            animation: run 10s linear infinite;
        }

        #content>div {
            width: 300px;
            height: 300px;
            position: absolute;
            opacity: 0.7;
        }

        #box1 {
            background-color: green;
            transform: rotateX(90deg) translateZ(150px);
        }

        #box2 {
            background-color: red;
            transform: rotateX(-90deg) translateZ(150px);
        }

        #box3 {
            background-color: blue;
            transform: rotateY(90deg) translateZ(150px);
        }

        #box4 {
            background-color: yellow;
            transform: rotateY(-90deg) translateZ(150px);
        }

        #box5 {
            background-color: pink;
            transform: translateZ(-150px);
        }

        #box6 {
            background-color: orange;
            transform: translateZ(150px);
        }

        @keyframes run {
            from {
                transform: rotateX(0) rotateY(0);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        div img {
            width: 300px;
            height: 300px;
        }

 完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>魔方</title>

        <style type="text/css">
            body{
                height: 100vh;
                width: 100vw;

                margin: 0;
                padding: 0;
            }
            #content{
                width: 300px;
                height: 300px;
                position: absolute;
                top: 50%;
                margin-top: -150px;
                left: 50%;
                margin-left: -150px;
                transform-style: preserve-3d;
                animation: run 10s linear infinite;
            }
            
            #content > div{
                width: 300px;
                height: 300px;
                position: absolute;
                opacity: 0.7;
            }
            
            #box1{
                background-color: green;
                transform:rotateX(90deg) translateZ(150px);
            }
            #box2{
                background-color: red;
                transform:rotateX(-90deg) translateZ(150px);
            }
            #box3{
                background-color: blue;
                transform:rotateY(90deg) translateZ(150px);
            }
            #box4{
                background-color: yellow;
                transform:rotateY(-90deg) translateZ(150px);
            }
            #box5{
                background-color: pink;
                transform:translateZ(-150px);
            }
            #box6{
                background-color: orange;
                transform:translateZ(150px);
            }
            
            @keyframes run{
                from{
                    transform: rotateX(0) rotateY(0);
                }
                to{
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            
            div img{
                width: 300px;
                height: 300px;
            }
        </style>
    </head>
    
    <body>
        <div id="content">
            <div id="box1">
                <img src="../img/1.jpg" >
            </div>
            <div id="box2">
                <img src="../img/2.jpg" >
            </div>
            <div id="box3">
                <img src="../img/3.jpg" >
            </div>
            <div id="box4">
                <img src="../img/4.jpg" >
            </div>
            <div id="box5">
                <img src="../img/5.jpg" >
            </div>
            <div id="box6">
                <img src="../img/6.jpg" >
            </div>
        </div>
    </body>
</html>

 

 

👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。  

 

 

 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布