----------------------------页面效果图------------------------------

截图1：

截图2：

----------------------------具体代码实现-----------------------------

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>3D折纸</title>
<style>
html,body{margin: 0;padding: 0;height:100%}
body{
display: flex;
/**
* align-items 弹性盒子
* justify-content 弹性盒子
*/
align-items: center;
justify-content: center;
background-color: #FFF;
}

p{
color: #FFF;
font-size: 1em;
font-weight: bold;
font-family: "微软雅黑";
}
/**
* 3D效果
* 1.transform-style: preserve-3d;
* 3.: 是c2的 ：：是委元素 c3提供
*/
p span{
display: inline-block;
position: relative;
transform-style: preserve-3d;
perspective: 500;
}

p span::before,p span::after{
display: none;
position: absolute;
top: 0;
left: -1px;
/**设置旋转中心点*/
transform-origin: left top;
transition: all ease-out 0.3s;
content: attr(data-text);/**data-text 的值可以付给content*/
}

p span::before{
z-index: 1;
color: rgba(0,0,0,0.2);
transform: scale(1.1,1) skew(0deg,20deg);
}

p span::after{
z-index: 2;
color: #684DA3;
text-shadow: -1px 0 1px #684DA3,1px 0 1px rgba(0,0,0,0.8);
transform: rotateY(-40deg);
}
p span:hover::before{
transform: scale(1.1,1) skew(0deg,5deg);
}

p span::after{
transform: rotateY(-10deg);
}

/**span+span 第一个span没有边距，第二个有边距*/
p span+span{
margin-left: 0.1em;
}

/**查询媒体的宽度 min-width:640px*/
@media (min-width:20em ) {
p{font-size: 2em;}
p span::before,p span::after{
display: block;
}
}

/**查询媒体的宽度 min-width:640px*/
@media (min-width:30em ) {
p{font-size: 3em;}

}

/**查询媒体的宽度 min-width:640px*/
@media (min-width:40em ) {
p{font-size: 4em;}

}

/**查询媒体的宽度 min-width:640px*/
@media (min-width:60em ) {
p{font-size: 8em;}

}

</style>
</head>
<body>
<p>

<span data-text="亲">亲</span>
<span data-text="爱">爱</span>
<span data-text="的">的</span>
<span data-text="，">，</span>
<span data-text="歇">歇</span>
<span data-text="会">会</span>
<span data-text="儿">儿</span>
<span data-text="吧">吧</span>
</p>
</body>
</html>

HTML5 简单Demo1的更多相关文章

  1. html5 简单音乐播放器

    html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  2. HTML5简单入门系列（五）

    前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...

  3. HTML5简单入门系列（一）

    前言 随着HTML5的流行,LZ作为一个web开发者,也决定学习一下前端前沿技术. HTML5 是下一代的HTML,它将成为 HTML.XHTML 以及 HTML DOM 的新标准.它是W3C( Wo ...

  4. HTML5简单入门系列（九）

    前言 上篇本来应该就是最后一篇了,但是楼主总觉得没有写上一个简单应用,不算是完整的学习系列.所以增加一篇关于动画的应用,对一个开源动画的介绍(很基础,非楼主原创). 本篇介绍一个基于Canvas的发光 ...

  5. HTML5简单入门系列（八）

    前言 本篇介绍HTML5中相对复杂的一些APIs,其中的数学知识比较多.虽然如此,但是其实API使用起来还是比较方便的. 这里说明一下,只写出API相关的JS代码,因为他们都是基于一个canvas标签 ...

  6. HTML5简单入门系列（六）

    前言 之前几篇已经将HTML5的主要新增元素和特性简单介绍完毕,LZ一直在犹豫还要不要把其他元素也写出来,因为其实没什么东西可以写,就是自己用到时看一下就行.不过为了入门系列的完整,犹豫再三,还是决定 ...

  7. HTML5简单入门系列（四）

    前言 今天这篇内容主要讲述HTML 5 Web Worker(一种支持前端js多线程的技术). 工作线程(Web Worker) web worker介绍 W3C 在 HTML5 的规范中提出了工作线 ...

  8. HTML5简单入门系列（三）

    前言 本篇介绍HTML5支持的Web存储(Web Storage)和HTML 5 应用程序缓存. 客户端存储数据介绍 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没 ...

  9. HTML5 简单归纳 -- 前端知识 （一）

    HTML5简介 1.h5不是一个新语言,它是HTML语言第五次重大修改--版本 2.   2014年  h5 3.支持:目前所有的主流浏览器都支持h5,IE8以下不支持 4.特性: a:抛弃了h4中不 ...

随机推荐

  1. 为什么ajax发GET请求就成功，POST请求则报错？

    为什么ajax发GET请求就成功,POST请求则报错? (1)首先说明的是请求的URL是一个静态资源,比如一个json文件.(2)现在现象是发GET请求就成功,POST请求则报错.(3)最新发现:就算 ...

  2. cocoapods使用问题集锦（2017-04）

    今天公司在公司新发的电脑上边安装cocoapod发现容易忘记的几个问题,感觉需要记录下来. 问题一:系统默认ruby镜像的卸载命令行 -->     gem sources --remove h ...

  3. CentOS 6.4一键自动化安装ISO镜像光盘

    下载CentOS-6.4-x86_64-minimal.iso 1 http://mirrors.163.com/centos/6.4/isos/x86_64/CentOS-6.4-x86_64-mi ...

  4. springboot用于web开发

    1.使用SpringBoot:1)创建SpringBoot应用,选中我们需要的模块:2)SpringBoot已经默认将这些场景配置好了,只需要在配置文件中指定少量配置就可以运行起来3)自己编写业务代码 ...

  5. Paradox

    克己博伦 当一个无法阻挡的力量,碰到了一个无法移动的物体?如果这个力量移动了物体,那么这个物体就不是无法移动的.如果这个力量没有移动物体,那么这个无法阻挡的力量就被挡了下来. 上帝能造出一个重到他自己 ...

  6. loadrunner12-添加集合点

    1.首先添加集合点之前要插入事务,集合点和事务通常是一起使用的,单独使用集合点,基本上可以说是没有意义的. 2.在开始事务之前 ,插入一个“集合点”,那么在多用户执行时,就可以将用户请求停下来,直到用 ...

  7. Web测试实践-任务进度-Day01

    任务安排 说明:小组全体成员都参与了会议,对该实践进行分析以及对实践任务的拆分以及进行了任务的分配. 小组成员 华同学.郭同学.覃同学.刘同学.穆同学.沈同学 阶段划分 阶段1:评测被测系统 1.对被 ...

  8. Linux上获取CPU Core个数的实现

    Linux上获取CPU Core个数的实现 可以通过多种手段取得CPU Core的个数,如: 1) 调用系统提供的函数get_nprocs(),可以在头文件sys/sysinfo.h中发现它 2) 借 ...

  9. 编写高质量代码改善C#程序的157个建议——建议80：用Task代替ThreadPool

    建议80:用Task代替ThreadPool ThreadPool相对于Thread来说具有很多优势,但是ThreadPool在使用上却存在一定的不方便.比如: ThreadPool不支持线程的取消. ...

  10. 团体程序设计天梯赛L1-022 奇偶分家 2017-03-22 17:48 81人阅读 评论(0) 收藏

    L1-022. 奇偶分家 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定N个正整数,请统计奇数和偶数各有多少个? 输入格式 ...