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. android设备不识别awk命令，缺少busybox

    android设备不识别awk命令,缺少busybox 一.什么是BusyBox ? BusyBox 是标准 Linux 工具的一个单个可执行实现.BusyBox 包含了一些简单的工具,例如 cat ...

  2. windows线程退出的方法

    线程的handle用处: 线程的handle是指向“线程的内核对象”的,而不是指向线程本身.每个内核对象只是内核分配的一个内存块,并且只能由内核访问.该内存块是一种数据结构,它的成员负责维护对象的各种 ...

  3. PHP多进程系列笔记（三）

    本节讲解几个多进程的实例. 多进程实例 Master-Worker结构 下面例子实现了简单的多进程管理: 支持设置最大子进程数 Master-Worker结构:Worker挂掉,Master进程会重新 ...

  4. React技术栈梳理

    一.react是什么? react是一个js框架,可以用它来编写html页面,使用react后我们可以完全抛弃html(只需要一个主index文件),而用纯js来编写页面: 二.为什么要使用react ...

  5. spring mvc 404页面制作

    1.404页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. java学习-Comparable<Integer>接口方法的实现

    基本数据类型的包装类Integer, Float, Double,Long,Byte等都实现的Comparable接口,用于列表List或数组arrays的排序 Comparable<Integ ...

  7. 深度理解C# 的执行原理

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂优文发表于云+社区专栏 从编译原理说起 虚拟机是什么 C# 是什么,IL 又是什么 .Net Framework vs Mono ...

  8. 使用keepalived实现双机热备

    通常说的双机热备是指两台机器都在运行,但并不是两台机器都同时在提供服务.当提供服务的一台出现故障的时候,另外一台会马上自动接管并且提供服务,而且切换的时间非常短.下面来以keepalived结合tom ...

  9. SpringMvc RequestMappingHandlerMapping

    RequestMappingHandlerMapping是SpringMvc中一个比较核心的类,查看下它的类结构图: InitializingBean是个很神奇的接口,在Spring每个容器的bean ...

  10. window如何一键关闭所有进程程序

    1.桌面创建一个快捷方式,点击鼠标右键跳出的菜单=> 新建=>快捷方式 2. 在“请键入对象的位置(T)”下方的文本框中输入: taskkill /F /FI "USERNAME ...