用HTML5实现一个情人节效果图

最新推荐文章于 2024-06-04 21:45:13 发布

你的美，让我痴迷

最新推荐文章于 2024-06-04 21:45:13 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/weixin_45932157/article/details/104385837

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            perspective: 1000px;
        }
        
        #cube {
            position: relative;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            transform-origin: 50% 50% -100px;
            /*设置3D的环境*/
            transform-style: preserve-3d;
            transition: 2s;
            transform: translateX(60px) translateY(300px) translateZ(60px);
        }
        
        #cube div {
            position: absolute;
            width: 200px;
            height: 200px;
        }
        
        #cube div:nth-child(1) {
            top: -200px;
            transform-origin: bottom;
            transform: rotateX(90deg);
        }
        
        #cube div:nth-child(2) {
            top: 200px;
            transform-origin: top;
            transform: rotateX(-90deg);
        }
        
        #cube div:nth-child(3) {
            left: -200px;
            transform-origin: right;
            transform: rotateY(-90deg);
        }
        
        #cube div:nth-child(4) {
            left: 200px;
            transform-origin: left;
            transform: rotateY(90deg);
        }
        
        #cube div:nth-child(5) {
            transform: translateZ(-200deg)
        }
        
        #cube div:nth-child(6) {}
        
        body {
            background-color: black;
        }
        
        #heard {
            position: relative;
            width: 300px;
            height: 600px;
            margin: 100px auto;
            transform-style: preserve-3d;
            animation: rot 10s linear infinite;
        }
        
        @keyframes rot {
            from {
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg)
            }
            to {
                transform: rotateY(360deg) rotateX(360deg) rotate(270deg)
            }
        }
        
        #heard div.heard {
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 600px;
            /*border: 2px solid red;*/
            border-left: 0;
            border-bottom: 0;
            border-radius: 50% 50% 0 /40% 50% 0;
        }
        
        #cube img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id=heard>
        <div id="cube">
            <div><img src="img/01.jpg" /></div>
            <div><img src="img/02.jpg" /></div>
            <div><img src="img/b_3.jpg" /></div>
            <div><img src="img/b_4.jpg" /></div>
            <div><img src="img/b_5.jpg" /></div>
            <div><img src="img/b_6.jpg" /></div>
        </div>
        
    </div>
    <div style="text-align:center;">
 
   </div>
</body>
<script type="text/javascript">
    var colors = ["#FFB6C1", "#DB7093", "#FF69B4", "#483D8B", "# 4169E1", "#87CEFA", "#00BFFF", "#5F9EA0", "#00FA9A",
        "#00FF7F", "#7FFF00", "#FFFFE0", "#F5DEB3", "#BC8F8F", "#800000"
    ];
    var heard = document.getElementById("heard");
    for (var i = 0; i < 36; i++) {
        var cdiv = document.createElement("div");
        cdiv.className = "heard";
        cdiv.style.border = "2px solid " + colors[i % 15];
        cdiv.style.borderLeft = "0";
        cdiv.style.borderBottom = "0";
        cdiv.style.transform = "rotateY(" + i * 10 + "deg) rotateZ(45deg) translateX(150px)";
        heard.appendChild(cdiv);
    }
</script>

</html>

效果如下：

图片自己选：

在这里插入图片描述

你的美，让我痴迷

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
1
评论
用HTML5实现一个情人节效果图

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; marg...
复制链接

扫一扫