CSS3挺有趣的，能实现不少动画，以下为娱乐内容

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {

             margin: 0;

             padding: 0

         }

         .door{

             box-sizing: border-box;

             width: 300px;

             height: 300px;

             margin:100px auto;

             border: 1px solid #000;

             background-color: deepskyblue;

             position: relative;

             perspective: 330px;

             /*内容*/

             line-height: 300px;

             text-align: center;

         }

         .door::after,.door::before{

             box-sizing: border-box;

             content: "";

             position: absolute;

             z-index: 1;

             width: 120px;

             height: 270px;

             top:15px;

             border: 1px solid #000;

             background-color: #2effae;

             transition: transform 2s;

         }

         .door::before{

             left:30px;

             transform-origin: left;

         }

         .door::after{

             right:30px;

             transform-origin: right;

         }

         .door:hover::before{

            transform:rotateY(-180deg);

         }

         .door:hover::after{

             transform:rotateY(180deg);

         }

         /*心形❤*/

         .heart{

             width: 200px;

             position: relative;

             text-align: center;

             line-height:100px;

             font-size: 30px;

             color:#fff;

             text-shadow: 1px 1px 2px #000;

         }

         .heart::before,.heart::after{

             content: "琉璃";

             background-color: red;

             position: absolute;

             left:62px;

             top: 50px;

             width: 117px;

             height: 198px;

             border-radius:125px 125px 0 0;

             transform:rotate(-45deg);

         }

         .heart::after{

             content: "呤呤";

             left:120px;

             transform: rotate(45deg);

         }

     </style>

 </head>

 <body>

 <div class="body">

     <div class="door">

         <div class="heart">

         </div>

     </div>

 </div>

 </body>

 </html>

css3心形 perspective transform的更多相关文章

  1. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  2. css3实现三角形，聊天背景气泡，心形等形状

    1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...

  3. CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

  4. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  5. 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

    超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...

  6. css实现心形图案

    用1个标签实现心形图案,show you the code; <!DOCTYPE html> <html lang="en"> <head> & ...

  7. 第99天：CSS3中透视perspective

    CSS3中透视perspective 透视原理: 近大远小 . 浏览器透视:把近大远小的所有图像,透视在屏幕上. 理解浏览器的坐标系:浏览器平面为 Z=0的平面,坐标原点默认为图片的中心,可以通过更改 ...

  8. js 点击页面出现烟花 心形

    css :1 body{width:1000px; height:500px;} input{ margin:100px; width:250px; height: 50px } 3 .Firewor ...

  9. 心跳（纯代码制作心形，animation动画）

    思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </ ...

随机推荐

  1. EF--Model First

    Model First先设计Model对象,再由对象生成数据库. 1.新建控制台项目,名称ModelFirst,确定. 2.点击选中项目,右键-->添加-->新建项目--选择数据模板--& ...

  2. 二种方法安装卸载Windows服务的命令

    第一种方法:通过Dos命令安装系统服务1. 开始 运行输入 cmd 进入dos窗口2. cd命令进入到C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727目录下, ...

  3. Canvas 中drawImage 绘制不出图片

    在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...

  4. 笨办法学Python（十二）

    习题 12:提示别人 当你键入 raw_input() 的时候,你需要键入 ( 和 ) 也就是“括号(parenthesis)”.这和你格式化输出两个以上变量时的情况有点类似,比如说 "%s ...

  5. 基数排序C#界面版

    第一步:生成数据  第二步:读取数据 第三步:创建队列 第四步:入队分配 第五步:出队收集重复第四步与第五步,直到出队入队各四次,完成基数排序:如下:4次入队结束后如下:最后一次出队:基数排序完成.. ...

  6. java对字符串进行加密和解密（以下是来自其他博主）

    背景:需要对读取数据库配置的文件进行加密,防止他人拿到数据,而对自己的代码,有要实现进行解密,网上给的加密方式,什么MD5,base64,还有等等,都太复杂,而且有些是单向的,只加密不解密,以下代码, ...

  7. Delphi7 企业版安装记录

    Borland Delphi Enterprise Version 7.0[Build 4.453] 云盘下载: 链接:http://pan.baidu.com/s/1gff6Fuz     密码:z ...

  8. N76E003---看门狗

    看门狗的设置 比较简单,根据芯片手册上的说明进行设置.值得一提的是设置看门狗的寄存器是保护寄存器,所以在写寄存器的时候要解除保护 void wtd_init(void) { TA=0xAA; TA=0 ...

  9. WebSeal单点登陆

    WebSeal单点登陆 作为学习整理,部分内容来自网络和官方文档. LDAP LDAP可以看作一种数据库,分为客户端和服务端.服务端是用来存放资源,客户端用来操作资源.它是一种树形存储结构,遍历起来会 ...

  10. 泉五培训Day2

    T1 旅游 题目 [题目描述] 幻想乡有n个景点(从1开始标号),有m条双向的道路连在景点之间,每条道路有一个人气值d,表示这条道路的拥挤程度.小G不会经过那些人气值大于x的道路,她想知道有多少对景点 ...