web开发：形变、表格及多行文本操作
一、2d形变
二、动画
三、表格
四、多个文本垂直居中
五、小米形变案例
一、2d形变
transform-origin: x轴坐标 y轴坐标;
transform: rotate(720deg);
transform: translateX(200px) translateY(200px);
transform: scale(x轴比例, y轴比例)
/*形变不改变盒子布局, 只拿形变做动画*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2d形变</title>
<style type="text/css">
div {
width: 50px;
height: 50px;
background-color: red;
margin: 30px auto 0;
text-align: center;
line-height: 50px;
transition: 3s; /*形变参考点: 三轴交界点*/
/*transform-origin: 0 0;*/
}
.d1 {
/*形变: 只操作自身显示图层(让图层发生变化), 不影响盒子布局*/
/*注: 不拿形变来布局, 只能形变来完成动画*/
/*transform: rotate(45deg);*/
/*transform: scale(3);*/
/*transform: translateY(100px);*/
/*margin-top: 50px;*/
} .d2:hover {
/*旋转: 旋转的是角度 deg*/
/*transform: rotate(720deg);*/
transform: rotateZ(7200deg);
}
.d3:hover {
transform: rotateY(7200deg);
} .d4:hover {
/*偏移: 偏移的是距离 px*/
/*如果需要发送多状态形变,需要分别写在一条transform属性设置中*/
/*各个形变之间用空格隔开*/
/*顺序一般会影响结果*/
/*transform: translateY(100px) translateX(100px);*/ /*不能这么书写: 所有形变效果的实现都是对transform一个属性进行设置*/
/*下方这么设置,第二次赋值会覆盖第一次赋值(只能保留最后一次赋值)*/
transform: translateX(100px);
transform: translateY(100px);
}
.d5:hover {
transform: translateX(100px) rotate(7200deg);
/*transform: rotate(7200deg) translateX(100px);*/
}
.d6:hover {
/*缩放: 缩放的是比例 无单位*/
transform: scale(3, 0.5);
/*transform: scaleX(3) scaleY(0.5);*/
}
.d7:hover {
transform: translateX(100px) rotate(720deg) scale(2);
}
.d8:hover {
margin-left: 1200px;
}
</style>
</head>
<body>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
<div class="d7">7</div>
<div class="d8"></div>
</body>
</html>
二、动画
@keyframes move {
/*起点省略采用的就是初始状态*/
0% {}
33.3% {
margin-left: 800px;
/*在每一个动画节点都需要明确所有做动画属性在该节点的属性值*/
margin-top: 50px;
}
66.6% {
margin-left: 500px;
margin-top: 300px;
}
/*终点需要设置*/
100% {
margin-left: 200px;
margin-top: 50px;
}
}
/*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/
.box {
animation: move 2s 1 linear;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top: 50px;
} /*实现动画*/
/*1.设置动画体*/
/*2.设置动画属性*/ /*1.设置动画体
@keyframes 动画名 {
多种状态的动画体
}
*/
/*2.设置动画属性
.box {
animation: 动画相关属性;
}
*/
@keyframes hehe {
/*起点省略采用的就是初始状态*/
0% {}
33.3% {
margin-left: 800px;
margin-top: 50px;
}
66.6% {
margin-left: 500px;
margin-top: 300px;
}
/*终点需要设置*/
100% {
margin-left: 200px;
margin-top: 50px;
}
}
.box {
/*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/
animation: hehe 2s 1 linear;
} </style>
</head>
<body>
<div class="box"></div>
</body>
</html>
三、表格
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tfoot>
</table>
table的全局属性:
border="1" 设置边框宽度
cellspacing="10" 单元格间的间距
cellpadding="10" 单元格的内边距
rules="rows | cols | groups | all" 边框的保留格式
rowspan='2' 合并两行单元格
colspan='3' 合并三列单元格
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
.table1 {
width: 500px;
height: 500px;
display: none;
}
th, td {
padding: 20px;
} .table2 td {
/*border: 10px solid black;*/
}
</style>
</head>
<body>
<!-- table的display: table -->
<!-- table显示规则注意点: 当设置的盒子高度不足够显示内容时, 盒子高度由内容撑开, 当设置的高度大于显示内容所需高度,采用设置的高度 --> <!-- border: 设置边框宽度 -->
<!-- cellspacing: 单元格间的间距 -->
<!-- cellpadding: 单元格的内边距 == th, td设置padding -->
<table class="table1" border="1" cellspacing="0">
<!-- tr>th{标题}*3 -->
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
<!-- (tr>td{单元格}*3)*3 -->
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table> <!-- 边框的保留格式 => rules: rows | cols | groups | all -->
<table class="table2" border="10" rules="all">
<caption>表格标题</caption>
<thead>
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">单元格</td>
<td rowspan="2" colspan="2">单元格</td>
<!-- <td>单元格</td> -->
<td>单元格</td>
</tr>
<tr>
<!-- <td>单元格</td> -->
<!-- <td>单元格</td> -->
<!-- <td>单元格</td> -->
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>单元格</td>
<td colspan="2">单元格</td>
<!-- <td>单元格</td> -->
<td>单元格</td>
</tr>
</tfoot>
</table> <!-- >>> display: table-cell => 可以嵌入任意类型标签, 可以快速实现多行文本垂直居中 --> </body>
</html>
四、多个文本垂直居中
<div class="sup">
<p>第一行文本</p>
<div>第二行文本</div>
</div>
```
.sup {
/*实现多行文本垂直居中 =>
针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
display: table-cell;
vertical-align: middle;
}
/*注: 如果想调整sup的位置,可以给sup嵌套一个"位置层"*/
/*.box>.sup>p+div*/
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文本垂直居中</title>
<style>
p {
margin: 0;
}
.box, .b1 {
width: 150px;
height: 150px;
margin: 10px auto;
background-color: pink;
text-align: center;
}
.b3 {
line-height: 150px;
}
.b2 {
line-height: 150px;
/*不起作用*/
/*vertical-align: middle;*/
}
.b1 {
/*实现多行文本垂直居中 =>
针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
display: table-cell;
vertical-align: middle;
} </style>
</head>
<body>
<div class="box">
<div class="b1">
<p>好的</p>
<p>真好</p>
<div>好的</div>
<div>真好</div>
</div>
</div>
<div class="box b2">
<p>好的</p>
<p>真好</p>
</div>
<div class="box b3">好的真好好的真好好的真好好的真好</div>
</body>
</html>
五、小米形变案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米形变案例</title>
<style type="text/css">
.wrapper {
width: 230px;
height: 300px;
background-color: #ddd;
margin: 50px auto;
}
.box {
width: 230px;
height: 300px;
background-color: yellow;
transition: .3s;
position: relative;
}
.footer {
width: 230px;
height: 0;
overflow: hidden;
background-color: red;
transition: .3s;
position: absolute;
bottom: 0;
}
.wrapper:hover .box {
transform: translateY(-5px);
box-shadow: 0 5px 10px 2px #ddd;
}
.wrapper:hover .footer {
height: 80px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="footer">12345</div>
</div>
</div>
</body>
</html>
web开发：形变、表格及多行文本操作的更多相关文章
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：表示成功的操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Django Web开发【4】 用户注册与管理
几乎所有的网站都提供了用户注册与管理功能,这一节,我们将讲解如何利用Django自身提供的用户认证系统实现用户注册与管理功能. 会话认证 在上一节中,我们学习了User数据模型,并用它来保存用户信息, ...
- Web开发入门学习笔记
公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协 ...
- Web开发——HTML基础
文档资料参考: 参考:MDN官网 参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- Web开发初探（系统理解Web知识点）
一.Web开发介绍 我们看到的网页通过代码来实现的 ,这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果. 这个浏览器就相当于Python的解释器,专门负责解释和执行(渲染)网页代码. 写网页的代 ...
- 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践
提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...
- 超全的web开发工具和资源
首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐! 平台信息 培训互动 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
随机推荐
- CentOS 7下Cloudera Manager及CDH 6.0.1安装过程详解
目录 一.概念介绍 1.CDH 概览 2.Cloudera Manager 概览 二.环境准备 1.软件版本选择 2.节点准备(四个节点) 3.配置主机名和hosts解析(所有节点) 4.关闭防火墙 ...
- 解决 nginx 单点问题的方案【h】
一.问题域 nginx.lvs.keepalived.f5.DNS轮询,每每提到这些技术,往往讨论的是接入层的这样几个问题: 1)可用性:任何一台机器挂了,服务受不受影响 2)扩展性:能否通过增加机器 ...
- 知识点整理-网络IO知识总结
UNIX 系统下的 I/O 模型有 5 种 同步阻塞 I/O.同步非阻塞 I/O.I/O 多路复用.信号驱动 I/O 和异步 I/O 什么是I/O 所谓的I/O 就是计算机内存与外部设备之间拷贝数据的 ...
- MySQL创建用户、授权、删除
1.在MySQL中创建新用户 使用具有shell访问权限的root用户登录MySQL服务器并创建名为“rahul”的新用户.下面的命令只允许从localhost系统访问用户rahul的MySQL服务器 ...
- Java工程师学习指南第7部分：重新学习MySQL与Redis
本文整理了微信公众号[Java技术江湖]发表和转载过的Mysql和Redis相关优质文章,想看到更多Java技术文章,就赶紧关注本公众号吧吧. 大白话说说mysql 面试官:给我说说你平时是如何优化M ...
- 360安全卫士11.0史上最小版发布，去流氓，最精简，300MB内存轻松运行。完全不拖慢电脑的速度，由王宁诚意发布。
360安全卫士11.0史上最小版发布,也是史上最快版本.大家可能都不喜欢360,为什么?因为360太流氓,而大家想过如果360去掉了流氓会怎么样?对,那样360就会变成一个性能可以超过知名杀毒软件-s ...
- MySql中的count、NULL和空串的区别
**1.count (1).count (*) 与 count (列名) 的区别** 表 count(1) count(*) count (列名) 作用 统计表中的所有的记录数 会统计表中的所有的记录 ...
- Rocketmq-简单部署
一.准备环境 1.系统:Centos7.3(无硬性要求) 2. jdk:1.8 3.maven:3.5(无硬性要求) 4.git 5.rocketmq 4.2 二.环境部署 1.jdk1.8以及mav ...
- 修改profile导致bash不能用的补救方法
输入这条命令:export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin 由于shell命令基本都在/usr/bin,/usr/sbin,/bin ...
- 什么是Java内部类？
如果大家想了解更多的知识和技术,大家可以 搜索我的公众号:理想二旬不止 (尾部有二维码)或者访问我的 个人技术博客 www.ideal-20.cn 这样阅读起来会更加舒适一些 非常高兴与大家交流,学习 ...