HTML5 简单Demo1
----------------------------页面效果图------------------------------
截图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的更多相关文章
- html5 简单音乐播放器
html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- HTML5简单入门系列（五）
前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...
- HTML5简单入门系列（一）
前言 随着HTML5的流行,LZ作为一个web开发者,也决定学习一下前端前沿技术. HTML5 是下一代的HTML,它将成为 HTML.XHTML 以及 HTML DOM 的新标准.它是W3C( Wo ...
- HTML5简单入门系列（九）
前言 上篇本来应该就是最后一篇了,但是楼主总觉得没有写上一个简单应用,不算是完整的学习系列.所以增加一篇关于动画的应用,对一个开源动画的介绍(很基础,非楼主原创). 本篇介绍一个基于Canvas的发光 ...
- HTML5简单入门系列（八）
前言 本篇介绍HTML5中相对复杂的一些APIs,其中的数学知识比较多.虽然如此,但是其实API使用起来还是比较方便的. 这里说明一下,只写出API相关的JS代码,因为他们都是基于一个canvas标签 ...
- HTML5简单入门系列（六）
前言 之前几篇已经将HTML5的主要新增元素和特性简单介绍完毕,LZ一直在犹豫还要不要把其他元素也写出来,因为其实没什么东西可以写,就是自己用到时看一下就行.不过为了入门系列的完整,犹豫再三,还是决定 ...
- HTML5简单入门系列（四）
前言 今天这篇内容主要讲述HTML 5 Web Worker(一种支持前端js多线程的技术). 工作线程(Web Worker) web worker介绍 W3C 在 HTML5 的规范中提出了工作线 ...
- HTML5简单入门系列（三）
前言 本篇介绍HTML5支持的Web存储(Web Storage)和HTML 5 应用程序缓存. 客户端存储数据介绍 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没 ...
- HTML5 简单归纳 -- 前端知识 （一）
HTML5简介 1.h5不是一个新语言,它是HTML语言第五次重大修改--版本 2. 2014年 h5 3.支持:目前所有的主流浏览器都支持h5,IE8以下不支持 4.特性: a:抛弃了h4中不 ...
随机推荐
- java程序员应该熟悉的20个有用的库(转)
优秀且经验丰富的Java开发人员的一个特点是API的广泛知识,包括JDK和第三方库.我花了很多时间学习API,特别是在阅读Effective Java 3rd Edition之后,Joshua Blo ...
- cocos2dx 触摸屏的使用
只要继承与CCLayer的类都可以实现触摸功能.CCLayer类的触摸事件的一些接口如下: // 单点触碰 virtual bool ccTouchBegan(CCTouch *pTouch, CCE ...
- ubuntu14.04 64 位 vmware tools 问题2
当提示说open-vm-tools版本太低时可以这样解决 0.使用最新版本12.5的vmware player. 1.sudo apt-get autoremove open-vm-dkms open ...
- 相机IMU融合四部曲（一）：D-LG-EKF详细解读
相机IMU融合四部曲(一):D-LG-EKF详细解读 极品巧克力 前言 前两篇文章<Google Cardbord的九轴融合算法>,<Madgwick算法详细解读>,讨论的都是 ...
- p1501 [国家集训队]Tree II
传送门 分析 lct板子题 单独维护一下加和乘的情况即可 维护方法和维护翻转差不多 代码 #include<iostream> #include<cstdio> #includ ...
- turntable
1.业务流程 2.80001代码逻辑 3.80002代码逻辑 4抽奖概率计算
- [OS] 如何在远程机器上用ctrl+alt+del键修改登录用户的密码
远程登录某台机器,想修改当前登录用户的密码,系统提示按Ctrl+Alt+Del,在出现的界面里修改密码 但我一按这三个键,是在我本地客户机生效,而不是在远程服务器. 答案 : 向远程桌面发送Ctrl+ ...
- [Fiddler] 在 Composer 中对HTTP报文进行编辑，重新执行
如果想要对某个HTTP请求进行编辑,然后重新执行观察结果,可以将这个报文从左侧拖放到右侧的Composer里面 这样就可以很方便的修改HTTP请求的方法,报文头,报文体 在用 SoapUI 做 API ...
- zigbee之IAR环境搭建
注册机第一个要选择: 为什么? 之前说CC2530是支持zigbee协议的无线芯片,其实它是这款硬件上有一个支持zigbee协议的无线电路,不仅有这款电路,而且还有一块cpu电路,它就是8051cpu ...
- CSS3 圆环状进度条
HTML: <div class="wrap"> <div class="progress-radial progress-25"> & ...