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 ...

随机推荐

Python中字典的基本操作
字典(Dictionary)是一映射类型(Key-value):字典是可变的,可存储任意类型对象字典的定义用大括号{ },每个值用 ”,“ 逗号隔开,key和value使用 ”:“ 冒号分隔字典的 ...
TCP/IP网络知识点总结
学完了计算机网络是时候整理一篇总结了,温故知新.注意:这篇博客很长长长(2.5万字+50图). TCP/IP网络知识点总结一．总述 1.定义:计算机网络是一些互相连接的.自治的计算机的集合.因特网是 ...
django2 删除图片或其他
首先从数据库中获取图片的名称,然后拼接图片的物理地址,最后就是删除. # 物理删除图片 d = os.path.dirname(os.path.dirname(os.path.abspath(__fi ...
一起来点React Native——常用组件之Text
一.什么是Text组件? 一个用于显示文本的React组件,和Android中的TextView组件或者OC中的Label组件相类似,专门用来显示基本的文本信息:除了基本的显示布局之外,可以进行嵌套显 ...
stm32 DMA配置
DMA就是将一个地址空间复制到另外一个地址空间.DMA传输方式无需CPU直接控制传输,也没有中断处理方式那样保留现场和恢复现场的过程,通过硬件为RAM与I/O设备直接传送数据,使CPU的效率大大的提高 ...
与众不同制作会唱歌的WinRAR - imsoft.cnblogs
为了使用方便,我们可能会把RAR压缩包制作成自解压文件.WinRAR自带的自解压模块虽然使用很方便,但千篇一律的外观看起来实在乏味.其实,只要通过简单改造,你就可以制作出与众不同,声色俱佳的WinR ...
51Nod：独木舟问题（贪心）
n个人,已知每个人体重,独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? 输入第一行包含两个正 ...
css里涉及到定位相关的example实例
一,情景导入:正常文档流:指的是HTML文档在进行内容布局时所遵循的从左到右,从上到下的表现方式.HTML中的大多数元素都处在正常的文档流中,而一个元素要脱离正常流的唯一途径就是浮动或定位.二,定位的 ...
php7 安装swoole4.0.4
下载 https://codeload.github.com/swoole/swoole-src/tar.gz/swoole-4.0.4 tar zxvf swoole-4.0.4 mv swoole ...
LG4455 【[CQOI2018]社交网络】
分析这题我们先转化为图论模型,发现求的其实就是有向图中以1为根的生成树数量.而关于这一问题存在O(3^n * n^2)的算法,一看数据n=250,发现不行.于是需要更高效的算法--Matrix-Tr ...

Flex 学习

Flex案例一：

Flex 学习的更多相关文章

随机推荐

热门专题