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. SQL Server 2008 角色

    固定服务器角色:按照从最低级别的角色(bulkadmin)到最高级别的角色(sysadmin)的顺序进行描述:Bulkadmin:这个服务器角色的成员可以运行BULK INSERT语句.这条语句允许从 ...

  2. zabbix web端有数据但是没有图形

    zabbix web端有数据但是没有图形 我遇到的情况是,在配置 zabbix 网站目录时,修改了zabbix 目录的所有者和所属组,以使得 zabbix/conf/zabbix.conf.php 文 ...

  3. [SVN]TortoiseSVN工具培训4─客户端常用操作命令

    1.权限认证 当进行SVN任何操作时,如果是首次操作,SVN会弹出权限认证. 输入用户名和密码点击确认即可完成认证. 勾选保存用户数据信息,可以避免将来重复输入用户名和密码认证. 2.删除权限认证信息 ...

  4. Hybris开发环境的license计算实现

    每隔30天,必须重新执行一次initialize命令把本地所有数据全部清掉然后重新build,需要花费一些时间. 显示在console里的license信息通过license.jsp展示: 剩余的li ...

  5. Selenium入门系列3 单个元素的定位方法

    UI自动化首先要识别对象,再操作对象,最后判定实际结果与预期结果是否一致. 这一节学习的是识别单个对象,webdriver提供了8种方式. <a id="idofa" cla ...

  6. TeXstudio安装后提示no LaTeX distribution found on this system

    应该是设置一下用户变量,而非系统变量,用TeXLive 2015和MikTeX都不好使,最后设置了用户变量好使了 S:\TeX\MiKTeX 2.9\miktex\bin\x64\ 也是醉醉的 不过等 ...

  7. 2017.10.20 jsp用户登陆界面连接数据库

    用户登陆界面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...

  8. 正则表达式 /i /g /m /ig /gi

    正则表达式中/i,/g,/ig,/gi,/m的区别和含义   /i (忽略大小写) /g (全文查找出现的所有匹配字符) /m (多行查找) / /ig(全文查找.忽略大小写) 

  9. linq 和lambda查询

    EF 查询的两种 写法. linq 方法 或者 lambda方法 其中 ,只有tolist()的时候,才会真正的 在数据库中执行. 如果没有 tolist 方法,那么province1是 iqueab ...

  10. java读取pfx或P12格式的个人交换库公私钥

    使用的是CFCA签发的用于银行间交换数据的证书,下载后直接添加到浏览器中 1.导出 从浏览器导出p12文件(包含私钥) 2.验证 两种方式: openssl 代码(请注意alias别名是如何获取的): ...