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. Oracle修改日志归档模式、归档路径以及空间大小的相关测试

    ORACLE 创建数据库的时候要不要开启日志归档? oracle数据库可以运行在2种模式下:归档模式(archivelog)和非归档模式(noarchivelog) .归档模式可以提高Oracle数据 ...

  2. (转)Python 实现双向链表（图解）

    原文:https://blog.csdn.net/qq490691606/article/details/49948263 Python 实现双向链表(图解)双向链表双向链表也叫双链表,是链表的一种, ...

  3. 二、LINQ之查询表达式基础

    1.查询是什么? 查询是一组指令,描述要从给定数据源(或源)检索的数据以及返回的数据应具有的形状和组织.查询表达式和它所产生的结果不同.

  4. django中url，静态文件，POST请求的配置 分类： Python 2015-06-01 17:00 789人阅读 评论(0) 收藏

    平时使用的是pycharm,所以这篇文章主要也是使用pycharm默认创建的django项目为基础进行讲解.项目目录如下图: 1.URL的配置 当创建好项目后,运行项目就可以看到django默认的页面 ...

  5. vue框架之自定义组件中使用v-model

    通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...

  6. springboot+zuul（一）------实现自定义过滤器、动态路由、动态负载。

    参考:https://blog.csdn.net/u014091123/article/details/75433656 https://blog.csdn.net/u013815546/articl ...

  7. k8s服务网关ambassador部署

    1.ambassador是datawire开源的服务网关,很好的支持kubernetes.具体详细介绍参考官网:https://www.getambassador.io/about/why-ambas ...

  8. （转）Spring事务管理（详解+实例）

    文章转自:http://blog.csdn.net/trigl/article/details/50968079 写这篇博客之前我首先读了<Spring in action>,之后在网上看 ...

  9. JVM学习记录-线程安全与锁优化（二）

    前言 高效并发是程序员们写代码时一直所追求的,HotSpot虚拟机开发团队也为此付出了很多努力,为了在线程之间更高效地共享数据,以及解决竞争问题,HotSpot开发团队做出了各种锁的优化技术常见的有: ...

  10. ASP.NET MVC5+EF6+LayUI实战教程，通用后台管理系统框架（2）

    前言 本节先给大家搭建UI部分,让大家能看到点东西,就好像所有编程书里,开始都是一个Hello World一样 开始搭建 首先建立空白解决方案,我们命名为BYCMS 然后添加新项目BYCMS 我习惯用 ...