Flex 学习
Flex案例一：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{
margin:0;
padding:0;
}
body{
display: flex;
background: -webkit-linear-gradient(top,#222,#333);
background: linear-gradient(top,#222,#333);
justify-content:center;
align-items:center;
align-content:center;
flex-wrap:wrap;
position:relative;
}
[class$="box"]{
background-color: #e7e7e7;
width: 104px;
height: 104px;
/*padding:4px;
margin:16px;*/
object-fit:contain;
border-radius: 10%;
box-shadow: inset 0 5px white,inset 0 -5px #bbb,inset 5px 0 #d7d7d7,inset -5px 0 #d7d7d7;
display: flex; position: absolute;
top:0;
left: 0;
/*top: 40%;
left: 40%;*/
}
[class="item"]{
display: block;
width:24px;
height: 24px;
border-radius: 50%;
margin:4px;
background-color: #333;
box-shadow: inset 0 3px #111,inset 0 -3px #555;
}
.first-box{
justify-content:center;
align-items:center;
align-content:center;
}
.second-box{
justify-content:space-between;
}
.second-box .item:nth-of-type(2){
-webkit-align-self:flex-end;
}
.third-box{ }
.third-box .item:nth-of-type(2){
align-self:center;
}
.third-box .item:nth-of-type(3){
align-self:flex-end;
}
.sixth-box,
.four-box{
justify-content:space-between;
justify-wrap:wrap;
}
.sixth-box .column,
.four-box .column{
display: flex;
flex-direction:column;
justify-content:space-between;
}
.fifth-box{
justify-content:space-between;
}
.fifth-box .column{
display: flex;
flex-direction:column;
justify-content:space-between;
}
.fifth-box .column:nth-of-type(2){
justify-content:center;
align-items:center;
} .tbox{
width: 104px;
height: 104px; background-color: transparent;
border:none;
box-shadow: none;
transform-style:preserve-3d;
display: flex;
justify-content:center;
align-items:center;
align-content:center;
flex-wrap:wrap;
position:relative;
-webkit-animation:iphone 4s linear infinite; transform:rotateZ(30deg);
}
.tbox:hover{
-webkit-animation-play-state:paused;
}
.sixth-box{
/*transform:rotate(30deg);*/
transform-origin:right bottom;
transform:rotateZ(30deg);
}
.fifth-box{
margin-left: 25px;
margin-top: 7px;
transform-origin:right 50%;
transform:translateZ(-105px) rotateY(90deg) rotateX(-29deg);
}
.four-box{
margin-left: 40px;
margin-top: -45px;
/*margin-top: -36px;*/
transform-origin:left 50%;
transform:translateZ(-105px) rotateY(-90deg) rotateX(30deg);
}
.third-box{
margin-left: 40px;
margin-top:-45px;
/*margin-left: 240px;*/
transform-origin:left 50%;
transform:translateZ(-105px) rotateZ(30deg);
}
.second-box{
margin-left: 7px;
margin-top:80px;
/*margin-top: 128px;*/
transform-origin: 50% top;
transform:translateZ(-105px) rotateX(90deg) rotateY(30deg);
}
.first-box{
margin-left:58px;
margin-top:-116px;
/*margin-top: -96px;*/
transform-origin: 50% bottom;
transform:translateZ(-105px) rotateX(-90deg) rotateY(-30deg);
} @-webkit-keyframes iphone{
from{
transform:rotateY(0deg);
}
to{
transform:rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="tbox">
<div class="first-box">
<span class="item"></span>
</div>
<div class="second-box">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="third-box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="four-box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div class="fifth-box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div class="sixth-box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</div> </body>
</html>
Flex 学习的更多相关文章
- 【转】【Flex】FLEX 学习网站分享
[转:http://hi.baidu.com/tanghecaiyu/item/d662fbd7f5fbe02c38f6f764 ] FLEX 学习网站分享 http://blog.minidx.co ...
- flex学习小结
接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...
- CSS3伸缩布局Flex学习笔记
如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...
- flex学习
今天看视频学习的时候,发现css有一个 flex 的属性,非常的好用,为了让自己能够熟记,特意来分享一下flex的用法. 首先,采用Flex布局的元素,称为Flex容器(flex co ...
- 【Flex学习】Flex4学习网站
http://blog.minidx.com/category/flex 来自为知笔记(Wiz)
- Flex学习总结
Flex SDK Flex框架类库.Flex编译环境.调式器.MXML.ActionScript编程语言以及其它工具组成,Flash Builder是其开发环境, Flash Player的工作模 ...
- Flex学习第一天(两个数相加)
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="htt ...
- Flex学习教程网站地址
http://www.985school.com/flex/complex_controls.html
- flex学习网站地址
http://hacker47.iteye.com/blog/213887 http://www.cuplayer.com/player/PlayerCode/Flex/ http://bbs.9ri ...
- flex学习, 尝试布局一个计算器
<!DOCTYPE html> <html> <head> <title>flex</title> </head> <st ...
随机推荐
- 安装Win8后必做的优化
原版或者精简版的希望都看看安装好Win8后必做的优化:1.关闭家庭组,因为这功能会导致硬盘和CPU处于高负荷状态关闭方法:Win+C – 设置 – 更改电脑设置 – 家庭组 – 离开如果用不到家庭组可 ...
- 《C语言中分配了动态内存后一定要释放吗？》
问:比如main函数里有一句 malloc(),后面没有free()1.那么当main结束后,动态分配的内存不会随之释放吗?2.如果程序结束能自动释放,那么还加上free(),是出于什么考虑? 答: ...
- python3.6 django2.06 使用QQ邮箱发送邮件
开通QQ邮箱IMAP/SMTP服务,忘记了,重新开通一下,记住密码串. import smtplib from email.mime.text import MIMEText # 收件人列表 mail ...
- 转：HTML5中的element.dataset
使用HTML5中的 element.dataset 操作自定义 data-* 数据: 不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进 ...
- 51Nod 1002：数塔取数问题（DP）
1002 数塔取数问题 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 一个高度为N的由正整数组成的三角形,从上走到下,求经过的数字和的最大值. 每 ...
- 【CQOI2008】中位数
题不难,但是思路有意思,这个是我自己想出来的OvO 原题: 给出1~n的一个排列,统计该排列有多少个长度为奇数的连续子序列的中位数是b.中位数是指把所有元素从小到大排列后,位于中间的数. n<= ...
- ppt标题排版
- LG3372 【【模板】线段树 1】
介绍我的三种算法 1.线段树 既然这题是线段树板子,我还是尊重一下先发这个.跑的时间376ms不是很快,但也还是不错.O(nlogn). #include<iostream> #inclu ...
- ES6必知必会 （一）—— 变量声明和结构赋值
本文章属于个人对es6一些比较常用的语法的总结归纳,其主要参考阮一峰大神的<a href="http://es6.ruanyifeng.com//">ECMAScrip ...
- 开源泛域名服务xip.io部署试用
xip.io 是一个很方便的泛域名服务,类似的有一个xip.name 的开源实现 下载 go get github.com/peterhellberg/xip.name 启动 二进制包在GOPATH/ ...