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

随机推荐

Obtain older GMT versions
ftp://ftp.soest.hawaii.edu/gmt/legacy/
parser_url
$url="http://127.0.0.1/test2.php?sitename=mysite.cn&a=1&b=2";$a=parse_url($url);p( ...
用js取1-100的随机数
function sum (m,n){ var num = Math.floor(Math.random()*(m - n) + n); alert(num) } sum(1,100): 万能公式, ...
TensorRT简介-转载
前言 NVIDIA TensorRT是一种高性能神经网络推理(Inference)引擎,用于在生产环境中部署深度学习应用程序,应用有图像分类.分割和目标检测等,可提供最大的推理吞吐量和效率.Tens ...
小程序api请求层封装（Loading全局配置）
前言小程序开发,没有vue中的axios那么好使,请求层的封装需要自己来搞. 当然请求层的配置少不了loading,这里索性也就将loading做一个配置,避免以后重复造轮子请求封装小程序中有封 ...
Ubuntu 速配指南:开启3D桌面特效
http://www.lupaworld.com/article-205494-1.html 安装compizconfig-settings-manager(以下简称ccsm) 在终端里输入:sud ...
BZOJ4481: [Jsoi2015]非诚勿扰【概率期望+树状数组】
Description [故事背景] JYY赶上了互联网创业的大潮,为非常勿扰开发了最新的手机App实现单身大龄青年之间的"速配".然而随着用户数量的增长,JYY发现现有速配的算 ...
.net core grpc 实现通信(一)
现在系统都服务化,.net core 实现服务化的方式有很多,我们通过grpc实现客户端.服务端通信. grpc(https://grpc.io/)是google发布的一个开源.高性能.通用RPC(R ...
How Many Tables 简单并查集
Today is Ignatius' birthday. He invites a lot of friends. Now it's dinner time. Ignatius wants to kn ...
hdu1176 dp
题意:在一条 0 ~ 10 的坐标轴上,在整数点上会掉烙饼,一个人第 0 秒站在坐标 5 处,每秒他能够左右移动一个单位的坐标或不移动,并接住该坐标位置当前时间落下的烙饼,(例如第0秒他在坐标5处,第 ...

Flex 学习

Flex案例一：

Flex 学习的更多相关文章

随机推荐

热门专题