一、2d形变

二、动画

三、表格

四、多个文本垂直居中

五、小米形变案例

一、2d形变

/*1.形变参考点: 三轴交界点*/
transform-origin: x轴坐标 y轴坐标;
/*2.旋转 rotate deg*/
transform: rotate(720deg);
/*偏移 translate px*/
transform: translateX(200px) translateY(200px);
/*缩放 scale 无单位*/
transform: scale(x轴比例, y轴比例)
/*注: 可以多形变, 空格隔开书写在一条transform属性中, 顺序一般会影响形变结果*/
/*形变不改变盒子布局, 只拿形变做动画*/

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

二、动画

/*1.设置动画体*/
@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;
    }
}
/*2.设置动画属性*/
/*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>

三、表格

```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" 边框的保留格式
td的全局属性
rowspan='2' 合并两行单元格
colspan='3' 合并三列单元格
table的高度: 由内容和设置高度中的大值决定
table-cell: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中
```

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

四、多个文本垂直居中

```html
<div class="sup">
    <p>第一行文本</p>
    <div>第二行文本</div>
</div>
```
```css
.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开发：形变、表格及多行文本操作的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：表示成功的操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Django Web开发【4】 用户注册与管理

    几乎所有的网站都提供了用户注册与管理功能,这一节,我们将讲解如何利用Django自身提供的用户认证系统实现用户注册与管理功能. 会话认证 在上一节中,我们学习了User数据模型,并用它来保存用户信息, ...

  3. Web开发入门学习笔记

    公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协 ...

  4. Web开发——HTML基础

    文档资料参考: 参考:MDN官网 参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...

  5. 第五模块：WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  6. Web开发初探（系统理解Web知识点）

    一.Web开发介绍 我们看到的网页通过代码来实现的 ,这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果. 这个浏览器就相当于Python的解释器,专门负责解释和执行(渲染)网页代码. 写网页的代 ...

  7. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  8. 超全的web开发工具和资源

    首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐!   平台信息 培训互动 ...

  9. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

随机推荐

  1. jquery中的$(document).ready(function(){})和$(window).load()比较

    1.执行时间 window.onload()即jquery写法中的$(window).load(function(){})必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document). ...

  2. jmeter操作—从redis中获取token

    嗨,大家好,我是叶子 背景:某APP项目中需要进行各接口的性能测试,比如:测试商品的搜索功能.店铺查询功能等接口,测试时需要保持登录状态,所以需要获取到登录账号的token,方便之后的接口测试. 准备 ...

  3. OpenCV3编程入门.知识点

    1. 第三部分 掌握 imgproc 组件 第六章 图像处理 6.1.线性滤波: Pdf.P170 Pdf.P171 平滑处理(smoothing)(模糊处理(bluring))-- 使用频率很高 - ...

  4. 【log4j】的学习和理解 + 打印所有 SQL

    log4j 1.2 学习和理解 + 打印所有 SQL 一.基本资料 官方文档:http://logging.apache.org/log4j/1.2/manual.html(理解基本概念和其他) lo ...

  5. 最新 猎豹移动java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.猎豹移动等10家互联网公司的校招Offer,因为某些自身原因最终选择了猎豹移动.6.7月主要是做系统复习.项目复盘.Leet ...

  6. MySQL索引解析（联合索引/最左前缀/覆盖索引/索引下推）

    本节内容: 1)索引基础 2)索引类型(Hash索引.有序数组.B+树) 3)索引的几个常见问题 1)联合索引 2)最左前缀原则 3)覆盖索引 4)索引下推 1. 索引基础 索引对查询的速度有着至关重 ...

  7. redis同步到磁盘

  8. 正确理解使用Vue里的nextTick方法

    最近,在项目中要使用Swiper做一个移动端轮播插件.需要先异步动态加载数据后,然后使用v-for渲染节点,再执行插件的滑动轮播行为.解决这个问题,我们通过在组件中使用vm.$nextTick来解决这 ...

  9. 使用pycharm开发web——django2.1.5（五）表单和通用视图

    看了刘江老师教程这么多天,卧槽,我才发现他也曾跻身于行伍之间,interesting 刘老师这波讲解很到位,告诉你如何编写单例视图的时候忽然告诉你,其实不用这么麻烦,我们有通用视图,那些总是要做相似的 ...

  10. 2.5路由网关：Zuul

    在原有的工程上,创建一个新的工程 创建service-zuul工程 其pom.xml文件如下: <?xml version="1.0" encoding="UTF- ...