Flex 学习
2018-07-11 03:55:29来源:博客园 阅读 ()
Flex案例一:
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题</title> 5 <style type="text/css"> 6 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{ 7 margin:0; 8 padding:0; 9 } 10 body{ 11 display: flex; 12 background: -webkit-linear-gradient(top,#222,#333); 13 background: linear-gradient(top,#222,#333); 14 justify-content:center; 15 align-items:center; 16 align-content:center; 17 flex-wrap:wrap; 18 position:relative; 19 } 20 [class$="box"]{ 21 background-color: #e7e7e7; 22 width: 104px; 23 height: 104px; 24 /*padding:4px; 25 margin:16px;*/ 26 object-fit:contain; 27 border-radius: 10%; 28 box-shadow: inset 0 5px white,inset 0 -5px #bbb,inset 5px 0 #d7d7d7,inset -5px 0 #d7d7d7; 29 display: flex; 30 31 position: absolute; 32 top:0; 33 left: 0; 34 /*top: 40%; 35 left: 40%;*/ 36 } 37 [class="item"]{ 38 display: block; 39 width:24px; 40 height: 24px; 41 border-radius: 50%; 42 margin:4px; 43 background-color: #333; 44 box-shadow: inset 0 3px #111,inset 0 -3px #555; 45 } 46 .first-box{ 47 justify-content:center; 48 align-items:center; 49 align-content:center; 50 } 51 .second-box{ 52 justify-content:space-between; 53 } 54 .second-box .item:nth-of-type(2){ 55 -webkit-align-self:flex-end; 56 } 57 .third-box{ 58 59 } 60 .third-box .item:nth-of-type(2){ 61 align-self:center; 62 } 63 .third-box .item:nth-of-type(3){ 64 align-self:flex-end; 65 } 66 .sixth-box, 67 .four-box{ 68 justify-content:space-between; 69 justify-wrap:wrap; 70 } 71 .sixth-box .column, 72 .four-box .column{ 73 display: flex; 74 flex-direction:column; 75 justify-content:space-between; 76 } 77 .fifth-box{ 78 justify-content:space-between; 79 } 80 .fifth-box .column{ 81 display: flex; 82 flex-direction:column; 83 justify-content:space-between; 84 } 85 .fifth-box .column:nth-of-type(2){ 86 justify-content:center; 87 align-items:center; 88 } 89 90 .tbox{ 91 width: 104px; 92 height: 104px; 93 94 background-color: transparent; 95 border:none; 96 box-shadow: none; 97 transform-style:preserve-3d; 98 display: flex; 99 justify-content:center; 100 align-items:center; 101 align-content:center; 102 flex-wrap:wrap; 103 position:relative; 104 -webkit-animation:iphone 4s linear infinite; 105 106 transform:rotateZ(30deg); 107 } 108 .tbox:hover{ 109 -webkit-animation-play-state:paused; 110 } 111 .sixth-box{ 112 /*transform:rotate(30deg);*/ 113 transform-origin:right bottom; 114 transform:rotateZ(30deg); 115 } 116 .fifth-box{ 117 margin-left: 25px; 118 margin-top: 7px; 119 transform-origin:right 50%; 120 transform:translateZ(-105px) rotateY(90deg) rotateX(-29deg); 121 } 122 .four-box{ 123 margin-left: 40px; 124 margin-top: -45px; 125 /*margin-top: -36px;*/ 126 transform-origin:left 50%; 127 transform:translateZ(-105px) rotateY(-90deg) rotateX(30deg); 128 } 129 .third-box{ 130 margin-left: 40px; 131 margin-top:-45px; 132 /*margin-left: 240px;*/ 133 transform-origin:left 50%; 134 transform:translateZ(-105px) rotateZ(30deg); 135 } 136 .second-box{ 137 margin-left: 7px; 138 margin-top:80px; 139 /*margin-top: 128px;*/ 140 transform-origin: 50% top; 141 transform:translateZ(-105px) rotateX(90deg) rotateY(30deg); 142 } 143 .first-box{ 144 margin-left:58px; 145 margin-top:-116px; 146 /*margin-top: -96px;*/ 147 transform-origin: 50% bottom; 148 transform:translateZ(-105px) rotateX(-90deg) rotateY(-30deg); 149 } 150 151 @-webkit-keyframes iphone{ 152 from{ 153 transform:rotateY(0deg); 154 } 155 to{ 156 transform:rotateY(360deg); 157 } 158 } 159 </style> 160 </head> 161 <body> 162 <div class="tbox"> 163 <div class="first-box"> 164 <span class="item"></span> 165 </div> 166 <div class="second-box"> 167 <span class="item"></span> 168 <span class="item"></span> 169 </div> 170 <div class="third-box"> 171 <span class="item"></span> 172 <span class="item"></span> 173 <span class="item"></span> 174 </div> 175 <div class="four-box"> 176 <div class="column"> 177 <span class="item"></span> 178 <span class="item"></span> 179 </div> 180 <div class="column"> 181 <span class="item"></span> 182 <span class="item"></span> 183 </div> 184 </div> 185 <div class="fifth-box"> 186 <div class="column"> 187 <span class="item"></span> 188 <span class="item"></span> 189 </div> 190 <div class="column"> 191 <span class="item"></span> 192 </div> 193 <div class="column"> 194 <span class="item"></span> 195 <span class="item"></span> 196 </div> 197 </div> 198 <div class="sixth-box"> 199 <div class="column"> 200 <span class="item"></span> 201 <span class="item"></span> 202 <span class="item"></span> 203 </div> 204 <div class="column"> 205 <span class="item"></span> 206 <span class="item"></span> 207 <span class="item"></span> 208 </div> 209 </div> 210 </div> 211 212 </body> 213 </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:WEB相关背景知识(新手)
下一篇:鼠标移动 登陆框跟随
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- 毕业生想学习web前端开发,有什么好的发展方向吗? 2020-06-09
- 转行前端很迷茫,该怎么学习? 2020-06-06
- 前端学习记录 2020-06-05
- 前端如何学习? 2020-06-04
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash