css3，flex笔记

做个笔记，方便自己查看
::before

双开门

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 1366px;height: 600px;margin: 0 auto;background: url('./images/bg.jpg');overflow: hidden;}.box::before,.box::after {float: left;content: '';width: 50%;height: 600px;background-image: url(./images/fm.jpg);transition: all .5s;}.box::after {background-position: right 0;}/* 鼠标移入的时候的位置改变的效果 */.box:hover::before {transform: translate(-100%);}.box:hover::after {transform: translateX(100%);}</style>
</head><body><div class="box"></div>
</body></html>

和平精英缩放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}img {width: 100%;}.box {width: 249px;height: 210px;margin: 50px auto;overflow: hidden;}.box p {color: #3b3b3b;padding: 10px 10px 0 10px;}.box .pic {position: relative;}.box .pic::after {/* 播放按钮压在图片上面 - 居中 */position: absolute;left: 50%;top: 50%;/* margin-left: -29px;margin-top: -29px; *//* transform: translate(-50%, -50%); */content: '';width: 58px;height: 58px;background-image: url(./images/play.png);/* 大图 */transform: translate(-50%, -50%) scale(5);/* 透明,看不见 */opacity: 0;transition: all .5s;}/* lihover的时候,  谁变小pic::after */.box li:hover .pic::after {opacity: 1;transform: translate(-50%, -50%) scale(1);}</style>
</head>
<body><div class="box"><ul><li><div class="pic"><img src="./images/party.jpeg" alt=""></div><p>【和平精英】“初火”音乐概念片：四圣觉醒......</p></li></ul></div>
</body>
</html>

精灵图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>精灵动画</title><style>.box {/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */width: 140px;height: 140px;/* border: 1px solid #000; */background-image: url(./images/bg.png);/* 12: 净零小图的个数 */animation: move 1s steps(12) infinite,run 1s forwards;}@keyframes move {/* from {background-position: 0 0;} */to {/* 1680: 精灵图的宽度 */background-position:  -1680px 0;}}/* 定义一个盒子移动的动画  800px */@keyframes run {/* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 *//* from {transform: translateX(0);} */to {transform: translateX(800px);}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

走马灯

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;}li {list-style: none;}img {width: 200px;}.box {width: 600px;height: 112px;border: 5px solid #000;margin: 100px auto;overflow: hidden;}.box ul {width: 2000px;animation: move 5s infinite linear;}.box li {float: left;}/* 定义动画:位移, ul 左侧使用  x -1400  */@keyframes move {to {transform: translateX(-1400px);}}/* 用户鼠标移入box,动画暂停 */.box:hover ul {animation-play-state: paused;}</style></head><body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><!-- 第567移动的时候,显示区域不能留白 --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div></body>
</html>

伸缩：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {display: flex;height: 300px;border: 1px solid #000;}.box div {height: 200px;margin: 0 20px;background-color: pink;}.box div:nth-child(1) {width: 50px;}.box div:nth-child(2) {/* 占用父级剩余尺寸的份数 */flex: 3;}.box div:nth-child(3) {flex: 1;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

购物车案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>确认订单</title><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/orders.css">
</head>
<body><!-- 主体内容: 滑动查看 --><div class="main"><!-- 用户信息 --><div class="pannel user_msg"><div class="location"><i class="iconfont icon-location"></i></div><div class="user"><div class="top"><h5>林丽</h5><p>18500667882</p></div><div class="bottom">北京市  海淀区  中关村软件园   信息科技大厦1号楼410#   </div></div><div class="more"><i class="iconfont icon-more"></i></div></div><!-- 用户信息 --></div><!-- 主体内容: 滑动查看 --><!-- 底部支付: 固定定位 --><div class="pay"><div class="left">合计: <span class="red">￥<i>266.00</i></span></div><div class="right"><a href="#">去支付</a></div></div><!-- 底部支付: 固定定位 -->
</body>
</html>

body {background-color: #f7f7f8;
}/* 公共样式 */
.red {color: #cf4444;
}.pannel {margin-bottom: 10px;background-color: #fff;border-radius: 5px;
}/* 主体内容 */
.main {/* 80px: 为了内容不被底部区域盖住 */padding: 12px 11px 80px;
}/* 用户信息 */
.user_msg {display: flex;align-items: center;padding: 15px 0 15px 11px;
}.user_msg .location {width: 30px;height: 30px;margin-right: 10px;background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);border-radius: 50%;text-align: center;line-height: 30px;color: #fff;
}.user_msg .user {flex: 1;
}.user_msg .user .top {display: flex;
}.user_msg .user .top h5 {width: 55px;font-size: 15px;font-weight: 400;
}.user_msg .user .top p {font-size: 13px;
}.user_msg .user .bottom {margin-top: 5px;font-size: 12px;
}.user_msg .more {width: 44px;height: 44px;/* background-color: pink; */text-align: center;line-height: 44px;color: #808080;
}/* 主体内容 *//* 底部支付 */
.pay {position: fixed;left: 0;bottom: 0;display: flex;/* 主轴对齐方式 */justify-content: space-between;/* 侧轴对齐方式 */align-items: center;width: 100%;height: 80px;padding: 0 11px;/* background-color: pink; */border-top: 1px solid #ededed;
}.pay .left {font-size: 12px;
}.pay .left i {font-size: 20px;
}.pay .right a {display: block;width: 90px;height: 35px;background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);border-radius: 3px;text-align: center;line-height: 35px;font-size: 13px;color: #fff;}
/* 底部支付 */

flex布局

css3，flex笔记相关推荐

千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记文章目录千峰HTML5+CSS3学习笔记写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
lex/flex 笔记
lex/flex 笔记 Lex的匹配策略: 1. 按最长匹配原则确定被选中的单词 2. 如果一个字符串能被若干正规式匹配,则先匹配排在前面的正规式. lex源程序的写法:Lex源程序必须按照Lex语言 ...
CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
HTML5、CSS3基础笔记
HTML5 & CSS3基础笔记 HTML html的基本格式实体 meta标签语义化标签-01 块和行内语义化标签-02 列表超链接介绍相对路径超链接的其他用法图片标签图片格 ...
【CSS3】CSS3 学习笔记（1w字+）
CSS3 学习笔记一 l CSS 基础 (一)CSS 介绍 1.CSS 教程 2.CSS 编写规范 (二)CSS 基础语法二 l CSS 选择器 (一)元素选择器 (二)选择器分组(多个选择器 ...
html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
HTML5+CSS3学习笔记（第1章）HTML基础
HTML5+CSS3学习笔记(第1章)HTML基础今天是居家隔离第一天,自学HTML5. 1.1HTML概述什么是HTML HTML是一种标记语言.(Hyper Text Markup langu ...

css3，flex笔记

购物车案例

css3，flex笔记相关推荐

最新文章

热门文章