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. 文件压缩小项目haffman压缩

    文件压缩的原理: 文件压缩总体可以分为有损压缩和无损压缩两类,有损压缩是指对mp3等格式的文件,忽略一些无关紧要的信息,只保留一些关键的信息,但并不因此影响用户对于这些mp3格式文件的体验度,无损压缩 ...

  2. POJ 2546

    #include<iostream> #include<numeric> #include<iomanip> #include<algorithm> # ...

  3. C#编程任务: 把工作交给别人并等待其执行完成

    生活中有这样的场景: 我有一件事情需要别人帮忙去办, 但是别人也很忙呀, 所以我只能把任务记载他的任务清单上, 等他一个个扫下来扫到我的并且完成之后再来告诉我. 这其实是一个多线程的问题. 我是线程A ...

  4. jenkins 通过shell启动tomcat会随着job完成而被自动关闭的解决方法

    jenkins 通过shell启动tomcat会随着job完成而被自动关闭的解决方法 填入BUILD_ID=随便填什么 原理是:我不知道

  5. ASP.NET Core 与 .NET Core 演变与基础概述

    https://github.com/dotnet/corehttps://github.com/aspnet/home 今天看到 .NET Core 的改名计划,感觉跨平台的时代快要来了,从之前的 ...

  6. 一口一口吃掉Volley（三）

    欢迎访问我的个人博客转发请注明出处:http://www.wensibo.top/2017/02/17/一口一口吃掉Volley(三)/ 学习了一口一口吃掉Volley(二)之后,你应该已经学会了如何 ...

  7. Prim Algoritm(最小生成树)

    Prim Algorithm.这个算法可以分为下面几个步骤: 将顶点集V分成两个集合A和B,其中集合A表示目前已经在MST中的顶点,而集合B则表示目前不在MST中的顶点. 在B寻找与集合A连通的最短的 ...

  8. nginx报错整理

    一. 1.线上有个域名出现一个访问报错: 413 Payload Too Large 这里贴一下关于这个报错的解释: The 413 (Payload Too Large) status code i ...

  9. ActiveMQ与Spring整合-MessageListener

    消费者,使用监听的实现方式. 1. pom.xml 2. 生产者 package org.ygy.mq.lesson04; import javax.jms.JMSException; import  ...

  10. Window下JDK、Tomcat、eclipse安装与配置

    今天项目组开会,由于.Net平台的限制无法满足现有业务需求,项目计划从.Net平台转Java平台,采用Java+Spark+Hadoop,之前关于Java和Hadoop的书也买的有只是平时看的少,最近 ...