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. js变量提升

    JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部: 'use strict'; function foo() { var x = 'Hello, ...

  2. Python Mock的入门学习

    一.Mock是什么 Mock这个词在英语中有模拟的这个意思,因此我们可以猜测出这个库的主要功能是模拟一些东西.准确的说,Mock是Python中一个用于支持单元测试的库,它的主要功能是使用mock对象 ...

  3. springcloud~演化的微服务架构

    微服务 将整体功能按着模块划分成多个独立的单元,这些单元可以独立部署,它们之前通过轻量级的web api方式进行通讯,对于微服务框架来说,最流行的就是springcloud和Service Fabri ...

  4. 《松本行弘的程序世界》读书笔记（上）——面向对象、程序块、设计模式、ajax

    1. 前言 半个月之前买了这本书,还是经园子里的一位网友推荐的.到现在看了一半多,基础的都看完了,剩下的几章可做高级部分来看.这本书看到现在,可以说感触很深,必须做一次读书笔记! 关于这本书,不了解的 ...

  5. mysql关于timestamp字段相关内容

    发现5.6和5.7版本的创建表不一致,从5.6导出数据表创建sql文件,然后导入到5.7表会报错,timestamp不能为空 查看的sql_mode mysql5.0以上支持的三种模式 1. ANSI ...

  6. MySQL调研笔记1：MySQL调研清单

    0x00 背景 最近公司正在去微软化,之前使用的SQL Server.Oracle将逐步切换到MySQL,所以部门也会跟随公司步伐,一步步将现有业务从SQL Server切换到MySQL,当然上MyS ...

  7. Spring 3.1新特性之二：@Enable*注解的源码,spring源码分析之定时任务Scheduled注解

    分析SpringBoot的自动化配置原理的时候,可以观察下这些@Enable*注解的源码,可以发现所有的注解都有一个@Import注解.@Import注解是用来导入配置类的,这也就是说这些自动开启的实 ...

  8. vue-cli less使用

    1.安装less依赖,npm install less less-loader --save 2.修改webpack.base.conf.js文件,配置loader加载依赖,让其支持外部的less,在 ...

  9. 七台机器部署Hadoop2.6.5高可用集群

    1.HA架构注意事项 两个Namenode节点在某个时间只能有一个节点正常响应客户端请求,响应请求的节点状态必须是active standby状态要能够快速无缝切换成active状态,两个NN节点必须 ...

  10. 【SpringBoot系列2】SpringBoot整合Redis

    前言: 真的越来越喜欢SpringBoot了,这是SpringBoot学习系列之一. 正文: 1:首先在pom文件中添加依赖,记得是spring-boot-starter-data-redis,不是s ...