css3心形 perspective transform
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的更多相关文章
- CSS3制作心形头像
1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...
- css3实现三角形，聊天背景气泡，心形等形状
1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...
- CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）
今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
- css实现心形图案
用1个标签实现心形图案,show you the code; <!DOCTYPE html> <html lang="en"> <head> & ...
- 第99天：CSS3中透视perspective
CSS3中透视perspective 透视原理: 近大远小 . 浏览器透视:把近大远小的所有图像,透视在屏幕上. 理解浏览器的坐标系:浏览器平面为 Z=0的平面,坐标原点默认为图片的中心,可以通过更改 ...
- js 点击页面出现烟花 心形
css :1 body{width:1000px; height:500px;} input{ margin:100px; width:250px; height: 50px } 3 .Firewor ...
- 心跳（纯代码制作心形，animation动画）
思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </ ...
随机推荐
- ASP.NET与json对象互转
这两天写这个xml跟json的读写,心累啊,也不是很理解,请大家多指教 首先来个热身菜做一个简单的解析json 在script里写一个简单的弹窗效果 <script> //script里简 ...
- Spark远程调试函数
Spark远程调试函数 1.sendInfo 该函数用于分布式程序的调试,非常方便,在spark的rdd操作中嵌入sendInfo,启动nc服务器后,可以收集到所有需要的运行时信息,该函数可以捕获ho ...
- 从HTTP响应头判断是否命中CDN
腾讯云: X-Cache-Lookup:Hit From MemCache 表示命中CDN节点的内存X-Cache-Lookup:Hit From Disktank 表示命中CDN节点的磁盘X-Cac ...
- MySQL入门很简单: 4 创建 修改删除表
1. 创建表的方法 1)创建表的语法形式 首先,选择数据库: USE 数据库名: 创建表: CREATE TABLE 表名 (属性名 数据类型 [完整性约束条件], 属性名 数据类型 [完整性约束条件 ...
- JS回调函数（理解篇）
概述: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而 ...
- cesium 加载倾斜摄影模型（这里有一坑）
代码如下: // Construct the default list of terrain sources. var terrainModels = Cesium.createDefaultTerr ...
- postman 1—官网下载及安装
测试过程中构造批量数据方式: 1 业务只关联数据库单张表,那么可以通过sql插入数据 也可以通过接口构造. 2 业务关联多张数据库表.要在多张表插入数据且保持数据的一致性,此时通过接口批量发送请求构造 ...
- css样式设置高度不定文本垂直居中
使用css实现文本垂直居中,对于支持display: table的浏览器来说,是比较容易实现的,只需要对外层div设置为table,内层div设置为table-cell,并设置文本垂直居中即可.但对于 ...
- IOS 公司标示和方向域名
1. 公司标示使用反向域名========================================正向域名 www.baidu.com 用来标示一台网络主机反向域名 cn.itcast.Myd ...
- Android（java）学习笔记67：Android Studio新建工程中的build.gradle、settings.gradle
随着信息化的快速发展,IT项目变得越来越复杂,通常都是由多个子系统共同协作完成.对于这种多系统.多项目的情况,很多构建工具都已经提供了不错的支持,像maven.ant.Gradle除了借鉴了ant或者 ...