520把爱心送给她

　　用自己独有的方式表白，也是爱的一种体现！

　　所以呢，我就利用自己现有的知识，做了一个3D爱心！

　　今天是5月21日，博主在这里希望所有看到这个博客的朋友们能够拥有自己美好的爱情！

　　同时也祝愿天下所有有情人终成眷属！美满幸福！最后更希望大神们多多鼓励，多多指点。

效果显示：

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>3D-表白爱心</title>

         <style>

             body{

                 background: #000;

             }

             .heart3D{

                 width:100px;

                 height: 160px;

                 border-width:1px 1px 0 0;

                 border-radius: 50% 50% 50% /40% 50% 0%;/*弧形比例*/

                 position:absolute;

                 top:0;

                 right:0;

                 bottom:0;

                 left:0;

                 margin:auto;

                 transform-style: preserve-3d;

                 transform-origin: center center center;

                 animation: myFirst 15s linear infinite;

             }

             .heart3D div{

                 width:100px;

                 height: 160px;

                 border:1px solid red;

                 border-width:1px 1px 0 0;

                 border-radius: 50% 50% 50% /40% 50% 0%;/*弧形比例*/

                 position: absolute;

             }

             @keyframes myFirst{

                 0%{transform: rotateY(0deg);}

                 100%{transform: rotateY(360deg);}

             }

         </style>

     </head>

     <body>

         <div class="heart3D">

             <!--用下面的JS创建多个心形弧线-->

         <!-- <div style="rotateY(10deg) rotateZ(45deg) translateX(30px)"></div> -->

         </div>

         <script>

             var oHreat = document.getElementsByClassName("heart3D")[0];

             for(var i=0;i<36;i++){

                 var oDiv = document.createElement("div");

                 oDiv.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translateX(30px)";

                 oDiv.style.borderColor = color();

                 oHreat.appendChild(oDiv);

             }

             function color(){

                 //随机颜色

                 var _color = Math.ceil(Math.random()*16777215).toString(16);

                 while(_color.length<6){

                     _color = "0"+_color;

                 }

                 return "#"+_color;

             }

         </script>

     </body>

 </html>

　

3D-爱心的更多相关文章

  1. HTML5 3D爱心动画及其制作过程

    之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把.下面将分享一下这 ...

  2. C语言控制台打印3D爱心图案

    非常多程序猿都认为自己的编程工作十分的鼓噪乏味.一整天面对的都是一些写不完的代码和改不完的Bug.今天我们要给大家分享一些有趣的C语言代码,也许能够为你无聊的工作带来一丝乐趣. 这些代码能够完毕几个不 ...

  3. HTML5 3D爱心动画 晚来的七夕礼物

    在线演示源码下载 这么好看的HTML5爱心动画,我们当然要把源代码分享给大家,下面是小编整理的源代码,主要是HTML代码和CSS代码. HTML代码: <div class=’heart3d’& ...

  4. 3d爱心代码

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Canvas之蛋疼的正方体绘制体验

    事情的起因 之前写了篇谈谈文字图片粒子化 I,并且写了个简单的demo -> 粒子化.正当我在为写 谈谈文字图片粒子化II 准备demo时,突然想到能不能用正方体代替demo中的球体粒子.我不禁 ...

  6. 三款精美的html5及css3的源码插件

    1.HTML5 3D爱心动画 晚来的七夕礼物 七夕情人节刚过,今天小编却在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画,莫非老外也过七夕?当然小编还是将这款HTML5 3D爱心动画收 ...

  7. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

  8. HTML5学习资料

    HTML5 的一些经典demo收集 Animated Books with CSS 3D Transforms 这是一个3D书本,CSS3完成 =========HTML5特效聚集网站======== ...

  9. 超炫酷的jQuery/HTML5应用效果及源码

    jQuery非常强大,我们之前也用jQuery分享过很多实用的插件.HTML5可以让网页变得更加绚丽多彩,将HTML5和jQuery结合使用那将发挥更棒的效果. 今天向大家收集了一些关于HTML5和j ...

随机推荐

  1. 【sping揭秘】9、容器内部事件发布（二）

    写在前面---------------------------------- 命运多舛,痴迷淡然 不知下一步该往哪里走,现在应该是我的迷茫期... 加油,快点走出去!!! 聪明的网友们,你们有没有迷茫 ...

  2. 【sping揭秘】3、Spring容器中bean默认是保持一个实例

    Spring容器中bean默认是保持一个实例 这里做一个测试,基础代码 package cn.cutter.start.provider; import org.springframework.con ...

  3. 【disruptor】2、disruptor中生产者线程与消费者之间的协调

    由于ringbuffer是一个环形的队列,那么生产者和消费者在遍历这个队列的时候,如何制衡呢? 1.生产快,消费慢,数据丢失? 生产者速度过快,导致一个对象还没消费完,就循环生产了一个新的对象要加入r ...

  4. javascript数据结构与算法---检索算法（顺序查找、最大最小值、自组织查询）

    javascript数据结构与算法---检索算法(顺序查找.最大最小值.自组织查询) 一.顺序查找法 /* * 顺序查找法 * * 顺序查找法只要从列表的第一个元素开始循环,然后逐个与要查找的数据进行 ...

  5. tensorflow进阶篇-4(损失函数2)

    Hinge损失函数主要用来评估支持向量机算法,但有时也用来评估神经网络算法.下面的示例中是计算两个目标类(-1,1)之间的损失.下面的代码中,使用目标值1,所以预测值离1越近,损失函数值越小: # U ...

  6. JAVA框架之Spring【Spring事务详解】

    spring提供的事务管理可以分为两类:编程式的和声明式的.编程式的,比较灵活,但是代码量大,存在重复的代码比较多:声明式的比编程式的更灵活.编程式主要使用transactionTemplate.省略 ...

  7. org.jeecgframework.core.common.exception.MyExceptionHandler]java.lang.NullPointerException

    问题原因:

  8. 研究CondItem

  9. Yum安装Zabbix4.2.0

    目录 1. 下载所需的存储库 2. 安装zabbix 3. 安装mysql 4. 配置数据库 5. 基本配置 6. zabbix配置文件 7. 进入web安装zabbix 1. 下载所需的存储库 # ...

  10. Cglib invoke以及invokeSuper的一点区别

    简单记录下,解决的一个问题,Cglib的invoke和invokeSuper的区别: 简而言之,invoke方法调用的对象没有增强过,invokeSuper方法调用的对象已经是增强了的,所以会再走一遍 ...