表白爱心

最新推荐文章于 2024-02-29 09:38:52 发布

Carrie_zzz

最新推荐文章于 2024-02-29 09:38:52 发布

阅读量953

点赞数 3

分类专栏：前端小案例合集前端特效文章标签： CSS3 前端案例 border-radius

本文链接：https://blog.csdn.net/Carrie_zzz/article/details/79672344

版权

前端特效同时被 2 个专栏收录

3 篇文章 1 订阅

订阅专栏

前端小案例合集

2 篇文章 0 订阅

订阅专栏

大致效果
这里写图片描述

（1）首先看到两个效果，我们就知道我们有两大块需要解决首先是里面的正方体其次是外面的心
（2）我们先从里面的正方体开始。我们知道正方体是有6个面（先写出大致的效果然后再一次的添加图片）：

<div id="cube">
            <div>上</div>
            <div>下</div>
            <div>左</div>
            <div>右</div>
            <div>前</div>
            <div>后</div>
        </div>

（3）给每个div添加样式我们好看：

    #cube div {
                width: 200px;
                height: 200px;
                border: 2px solid red;
            }

这里写图片描述
（4）我们都知道6个正方体如何拼成正方体于是我们做成这样：

（5）然后我们想象他们要如何折叠成一个正方体于是用CSS3的旋转（注意：要设置3D环境其次要用3D的视角看）：

body{
                perspective:1000px;//视口
            }
        //设置3D的环境
                transform-style:preserve-3d;

这里写图片描述
（6）我们现在做外面心的曲线。border-radius其实是可以有8个值当我们设置如下的时候会出现半个心：

    margin:200px auto;
                width: 300px;
                height: 600px;
                border: 2px solid red;
                border-left: 0;
                border-bottom: 0;
                border-radius: 50% 50% 0 /40% 50% 0;

这里写图片描述
（7）心是36个这样的曲线构成的于是我们用JS做36条：

var heard= document.getElementById("heard");
                for(var i = 0; i < 36; i++) {
                    var cdiv = document.createElement("div");
                    cdiv.className = "heard";
                    cdiv.style.position="absolute";
                    cdiv.style.transform = "rotateY(" + i * 10 + "deg) rotateZ(45deg) translateX(55px)";
                    heard.appendChild(cdiv);
                }

这里写图片描述
（8）然后调节参数即可（发挥自己的想象去调节吧）：

（9）最后合在一起~我相信你可以的

最后代码如下

<!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/b_1.jpg" /></div>
                <div><img src="img/b_2.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>

    </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>