CSS入门八、CSS3动画

news2025/1/16 5:31:54

零、文章目录

文章地址

  • 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
  • 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

  • Gitee：https://gitee.com/bluecusliyou/TechLearn
  • Github：https://github.com/bluecusliyou/TechLearn

CSS入门八、CSS3动画

1、CSS3 过渡（重点）

  • 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
  • 过渡动画：是从一个状态渐渐的过渡到另外一个状态。
  • 可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
  1. 属性 ： 想要变化的 css 属性，宽度，高度，背景颜色，内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。
  2. 花费时间：单位是 秒（必须写单位），比如 0.5s。
  3. 运动曲线：默认是 ease （可以省略）。
  4. 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）。

image-20230104151427382

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写all就可以了 */
            /* transition: height .5s ease 1s; */
            /* 谁做过渡，给谁加 */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

image-20230104154748255

移上去变化

image-20230104154817630

进度条案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3过渡练习-进度条</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>
</html>

点上去，直接进度条到100%

image-20230104160828334

2、CSS3 2D转换

  • 转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。

  • 2D转换有三种方式

    • 移动： translate
    • 旋转： rotate
    • 缩放： scale
    • 倾斜：skew

（1）二维坐标系

  • 2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

image-20230106094120392

（2）移动translate

  • translate移动可以改变元素在页面中的位置，类似定位。

image-20230106100030917

  • 优点：不影响其他元素的位置。
  • 百分比单位是相对于自身元素的 translate:(50%,50%);
  • translate对行内标签没有效果。
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
  • x 就是 x 轴上水平移动
  • y 就是 y 轴上水平移动

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2D转换之位移translate</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
            /* transform: translate(x, y); */
            /* transform: translate(100px, 100px); */
            /* 1. 我们如果只移动x坐标 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
            /* 2. 我们如果只移动y坐标 */
            /* transform: translate(0, 100px); */
            /* transform: translateY(100px); */
        }
        
        div:first-child {
            background-color: pink;
            transform: translate(30px, 30px);
        }
        
        div:last-child {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

image-20230105150228196

让盒子实现水平和垂直居中：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>让盒子实现水平和垂直居中</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 1. 我们tranlate里面的参数是可以用 % */
            /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
            /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
            /* transform: translateX(50%); */
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%)  盒子往上走自己高度的一半   */
            transform: translate(-50%, -50%);
        }
        
        span {
            /* translate 对于行内元素是无效的 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <span>123</span>
</body>

</html>

image-20230105172107645

（3）旋转rotate

  • rotate旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

image-20230106100245790

  • 角度为正时，顺时针，负时，为逆时针。
transform:rotate(angle)
  • 可以设置旋转中心点。
  • 可以跟方位名词，transform-origin: left bottom。也可以是px像素或者百分比。
  • 默认旋转的中心点是元素的中心点，是 50% 50% 等价于 center center。
transform-origin: x y;

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2D转换之旋转rotate</title>
    <style>
        img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 0.3s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="media/pic.jpg" alt="">
</body>

</html>

搜索框三角旋转：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索框三角旋转</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        /* 伪元素添加三角 */
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }
        /* 鼠标经过div  里面的三角旋转 */
        
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

鼠标移到框里小三角旋转

image-20230106112117365

设置元素转换中心点：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置元素转换中心点</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 1.可以跟方位名词 */
            /* transform-origin: left bottom; */
            /* 2. 默认的是 50%  50%  等价于 center  center */
            /* 3. 可以是px 像素 */
            transform-origin: 50px 50px;
        }
        
        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

image-20230106114021051

旋转中心点案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转中心点案例</title>
    <style>
        div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 10px;
            float: left;
        }
        
        div::before {
            content: "隐藏内容";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.4s;
        }
        /* 鼠标经过div 里面的before 复原 */
        
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

移上去显示隐藏内容，以左下角为中心旋转出来

image-20230106114613322

（4）缩放scale

  • scale缩放，控制元素放大还是缩小。
  • 优点：不会影响其他的盒子。

image-20230106114747923

  • transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大。里面写的数字是倍数的意思，不跟单位。
  • transform:scale(2,2) ：宽和高都放大了2倍。
  • transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)。
  • transform:scale(0.5,0.5)：倍数小于1就是缩小。
transform:scale(x,y);
  • 可以设置缩放中心点。
  • 可以跟方位名词，transform-origin: left bottom。也可以是px像素或者百分比。
  • 默认旋转的中心点是元素的中心点，是 50% 50% 等价于 center center。
transform-origin: x y;

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2D转换之缩放scale</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* transform-origin: left bottom; */
        }
        
        div:hover {
            /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
            /* transform: scale(x, y); */
            /* transform: scale(2, 2); */
            /* 2. 修改了宽度为原来的2倍  高度 不变 */
            /* transform: scale(2, 1); */
            /* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法  以下是 宽度修改了2倍，高度默认和第一个参数一样*/
            /* transform: scale(2); */
            /* 4. 我们可以进行缩小  小于1 就是缩放 */
            /* transform: scale(0.5, 0.5); */
            /* transform: scale(0.5); */
            /* 5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
            /* width: 300px;
            height: 300px; */
            transform: scale(2);
        }
    </style>
</head>

<body>
    <div></div>
    123123
</body>

</html>

移上去放大，文字位置不受影响

image-20230106133101439

图片放大案例：移上去图片放大，外框不变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片放大案例</title>
    <style>
        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }
        
        div img {
            transition: all .4s;
        }
        
        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
</body>

</html>

鼠标移上去，图片放大

image-20230107210248778

分页按钮案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分页按钮案例</title>
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }
        
        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

</html>

鼠标移上去圆圈放大

image-20230106152529540

（5）综合写法

  • 同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等
  • 其顺序会影转换的效果。（先旋转会改变坐标轴方向）
  • 当我们同时有位移和其他嘱性的时候，记得要将位移放到最前。

案例如下，移上去，先移动后旋转最后放大：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2D转换综合写法顺序</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .5s;
        }
        
        div:hover {
            /* transform: rotate(180deg) translate(150px, 50px); */
            /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
            transform: translate(150px, 50px) rotate(180deg) scale(1.2);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

3、CSS3 动画

  • 动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
  • 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

（1）动画的基本使用

  • 动画的基本使用分成两步

    • 在 @keyframes 中规定某项 CSS 样式，用百分比来规定关键帧变化发生的时间，0% 是动画的开始，100% 是动画的完成。

    • 元素中调用动画，设定调用的动画名称和动画运行的时间长度。

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3动画基本使用</title>
    <style>
        /* 我们想页面一打开，一个盒子就从左边走到右边 */
        /* 1. 定义动画 */
        
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

（2）动画序列

  • @keyframe中可以使用关键词 “from” 和 “to”，等同于 0% 和 100%。
  • @keyframe可以定义多个关键帧，做多个状态的变化。
  • 里面的百分比要是整数，是对总的时间的划分。比如：25%*10=2.5s。

动画序列案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画序列</title>
    <style>
        /* from to 等价于  0% 和  100% */
        /* @keyframes move {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1000px, 0);
            }
        } */
        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe 关键帧 */
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0)
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

（3）动画常用属性

  • @keyframe用来定义动画关键帧。
  • 其他动画属性都是在元素上进行设置的。
  • animation-name和animation-duration是必须的。

image-20230106160717970

  • animation-timing-function:规定动画的速度曲线，默认是“ease"。

image-20230108200256307

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画属性</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
            /* 运动曲线 */
            /* animation-timing-function: ease; */
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
            /* animation-direction: alternate; */
            /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */
            /* animation-fill-mode: forwards; */
        }
        
        div:hover {
            /* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

（4）动画简写属性

  • animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画等待或者结束的状态;
  • animation: name duration timing-function delay iteration-count direction fill-mode;
  • 前面2个属性 name duration 一定要写。
animation: myfirst 5s linear 2s infinite alternate;

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画属性简写</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* animation: move 2s linear 0s 1 alternate forwards; */
            /* 前面2个属性 name  duration 一定要写 */
            animation: move 2s linear alternate forwards;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

（5）动画步长执行

  • 使用step(n)配置动画分n步执行。
  • 我们元素可以添加多个动画， 用逗号分隔 。

文字一个一个显示案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字一个一个显示</title>
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘我在这里等你</div>
</body>

</html>

奔跑的熊大：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>奔跑的熊大</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画， 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

（6）综合案例–热点图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大数据热点图</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        
        .tb {
            top: 500px;
            right: 80px;
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

image-20230106170637988

4、CSS3 3D转换

3D有什么特点

  • 近大远小。
  • 物体后面遮挡不可见。

当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

  • 在现实生活当中，当我们通过肉眼去看物体的时候和照片的成像是相同的。
  • 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。

（1）三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

  • x轴：水平向右 注意： x 右边是正值，左边是负值
  • y轴：垂直向下 注意： y 下面是正值，上面是负值
  • z轴：垂直屏幕 注意： 往外面是正值，往里面是负值

image-20230108204834879

（2）移动 translate3d

  • 3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
    • transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离，xyz是不能省略的，如果没有就写0。
    • translform:translateX(100px)：仅仅是在x轴上移动
    • translform:translateY(100px)：仅仅是在Y轴上移动
    • translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ只能跟px单位）
  • 因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动

（3）透视 perspective

  • 在2D平面产生近大远小视觉立体，但是只是效果二维的。
  • 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。透视也称为视距。
  • d：就是视距，视距就是一个人的眼睛到屏幕的距离。透视的单位是像素。
  • z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大。
  • 距离视觉点越近的在电脑平面成像越大，越远成像越小。
  • 透视写在被观察元素的父盒子上面的

image-20230108212137572

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D移动translate3d</title>
    <style>
        body {
            /* 透视写到被观察元素的父盒子上面 */
            perspective: 200px;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translateX(100px);
            transform: translateY(100px); */
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1. translateZ 沿着Z轴移动 */
            /* 2. translateZ 后面的单位我们一般跟px */
            /* 3. translateZ(100px) 向外移动100px （向我们的眼睛来移动的） */
            /* 4. 3D移动有简写的方法 */
            /* transform: translate3d(x,y,z); */
            /* transform: translate3d(100px, 100px, 100px); */
            /* 5. xyz是不能省略的，如果没有就写0 */
            transform: translate3d(400px, 100px, 100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

（4）移动 translateZ

  • translform:translateZ(100px)：仅仅是在Z轴上移动。有了透视，就能看到translateZ 引起的变化了
    • translateZ：单位只能是px
    • translateZ：往外是正值
    • translateZ：往里是负值

（5）旋转 rotate3d

  • 3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转.

  • 对于元素旋转的方向的判断 我们需要先学习一个左手准则。

    • 左手的手拇指指向 x轴的正方向

    • 其余手指的弯曲方向就是该元素沿着x轴旋转的方向

image-20230108215505187

  • transform:rotateX(45deg)：沿着x轴正方向旋转 45度
  • transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
  • transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
  • transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）

image-20230109064558934

rotateX案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rotateX</title>
    <style>
        body {
            perspective: 300px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            transform: rotateX(45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>

image-20230108215739511

rotateY案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rotateY</title>
    <style>
        body {
            perspective: 500px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>

image-20230108215826788

rotateZ+综合写法案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rotateZ</title>
    <style>
        body {
            perspective: 500px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        
        img:hover {
            /* transform: rotateZ(180deg); */
            /* transform: rotate3d(x,y,z,deg); */
            /* transform: rotate3d(1, 0, 0, 45deg); */
            /* transform: rotate3d(0, 1, 0, 45deg); */
            transform: rotate3d(1, 1, 0, 45deg);
        }
    </style>
</head>

<body>
    <img src="media/pig.jpg" alt="">
</body>

</html>

image-20230108220138295

（6）呈现 transfrom-style

  • transfrom-style控制子元素是否开启三维立体环境。
  • Transform-style: preserve-3d; 子元素开启立体空间，默认的值是 flat 不开启
  • 代码写在父元素之上，影响的是子元素。

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D呈现transform-style</title>
    <style>
        body {
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateY(60deg);
        }
        
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        
        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

</html>

image-20230109073417109

两面翻转的盒子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>两面翻转的盒子</title>
    <style>
        body {
            perspective: 400px;
        }
        
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            /* 让背面的紫色盒子保留立体空间 给父级添加的 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateY(180deg);
        }
        
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
        }
        
        .front {
            background-color: pink;
            z-index: 1;
        }
        
        .back {
            background-color: purple;
            /* 像手机一样 背靠背 旋转 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">正面啊</div>
        <div class="back">反面啊</div>
    </div>
</body>

</html>

image-20230109074133861

3D导航栏案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D导航栏案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            margin: 100px;
        }
        
        ul li {
            float: left;
            margin: 0 5px;
            width: 120px;
            height: 35px;
            list-style: none;
            /* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }
        
        .box:hover {
            transform: rotateX(90deg);
        }
        
        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        
        .front {
            background-color: pink;
            z-index: 1;
            transform: translateZ(17.5px);
        }
        
        .bottom {
            background-color: purple;
            /* 这个x轴一定是负值 */
            /* 我们如果有移动 或者其他样式，必须先写我们的移动 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">正面</div>
                <div class="bottom">底面</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">正面</div>
                <div class="bottom">底面</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">正面</div>
                <div class="bottom">底面</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">正面</div>
                <div class="bottom">底面</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">正面</div>
                <div class="bottom">底面</div>
            </div>
        </li>
    </ul>
</body>

</html>

image-20230109075347281

（7）综合案例–旋转木马

搭建HTML结构

  • 里面的6个div 分别是 6个狗狗图片
  • 注意最终旋转是section标签 旋转
<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS样式

  • 给body添加 透视效果 perspective: 1000px;
  • 给section 添加 大小，一定不要忘记添加 3d呈现效果控制里面的6个div 别忘记子绝父相，section要加相对定位
  • 里面6个div 全部绝对定位叠到一起，然后移动不同角度旋转和距离注意：旋转角度用rotateY 距离 肯定用 translateZ来控制
  • 给section 添加动画animation ，让它可以自动旋转即可
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例旋转木马</title>
    <style>
        body {
            perspective: 1000px;
        }
        
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
            background: url(media/pig.jpg) no-repeat;
        }
        
        section:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }
        
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/dog.jpg) no-repeat;
        }
        
        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        }
        
        section div:nth-child(2) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-child(3) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-child(4) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-child(5) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(240deg) translateZ(300px);
        }
        
        section div:nth-child(6) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

image-20230109103940475

（8）综合案例–3d立方体盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>3d立方体盒子</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            padding: 200px 300px;
        }
        
        ul {
            position: relative;
            list-style: none;
            width: 300px;
            height: 300px;
            transform: rotate3d(1, 1, 0, -45deg);
            transform-style: preserve-3d;
            /* perspective: 500;
			-webkit-perspective: 500;
			perspective-origin: 10% 10%; */
        }
        
        ul>li {
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 40px;
        }
        
        ul>li:nth-of-type(1) {
            background-color: #ccc;
            transform: translateZ(150px);
        }
        
        ul>li:nth-of-type(2) {
            background-color: skyblue;
            transform: translateZ(-150px) rotateY(180deg);
        }
        
        ul>li:nth-of-type(3) {
            background-color: greenyellow;
            transform: translateX(-150px) rotateY(-90deg);
        }
        
        ul>li:nth-of-type(4) {
            background-color: deeppink;
            transform: translateX(150px) rotateY(90deg);
        }
        
        ul>li:nth-of-type(5) {
            background-color: rebeccapurple;
            transform: translateY(-150px) rotateX(90deg);
        }
        
        ul>li:nth-of-type(6) {
            background-color: saddlebrown;
            transform: translateY(150px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>01-前面</li>
        <li>02-后面</li>
        <li>03-左面</li>
        <li>04-右面</li>
        <li>05-上面</li>
        <li>06-下面</li>
    </ul>
</body>

</html>

image-20230109115003176

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/156016.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

三、Gradle使用

三、Gradle使用

文章目录三、Gradle使用1 在 idea 中创建普通 java 工程2 在 idea 中创建 ssm 工程3 项目部署3.1 本地tomcat部署项目3.2 Gretty 部署项目3.3 具体使用4 Gradle 对测试支持4.1 默认测试目录及标准输出4.2 Junit 使用4.3 包含和排除特定测试【尚硅谷】Gradle教程-讲师&#xff1…
阅读更多...
Blender 物理属性 （一）刚体

Blender 物理属性 （一）刚体

文章目录添加与去除刚体查看刚体效果刚体属性刚体设置碰撞表面响应添加与去除刚体 1 添加&#xff1a;物体模式选中一个物体&#xff0c;属性栏/物理属性&#xff08;蓝色圆圈&#xff09;&#xff0c;选择刚体 2 去除&#xff1a;再次点击刚体按钮即可 查看刚体效果 1 点击…
阅读更多...
SpringCloud系列（八）[docker 篇] - 关于 Docker 的一些介绍及架构

SpringCloud系列（八）[docker 篇] - 关于 Docker 的一些介绍及架构

近几年 Docker 还是挺火的, 学习微服务也肯定要知道 Docker 的存在并最好掌握一些基本操作, 毕竟一些体量非常大的项目运行环境会比较复杂, 部署的时候难免会遇到某些问题, 如兼容性 / 生产环境有差异等问题… 本篇文章将以图文的形式对 Docker 进行介绍, 加深对 Docker 的印象…
阅读更多...
S2B2b2C电商框架图

S2B2b2C电商框架图

S2B2b2C电商框架图 以下是S2B2b2C系统的结构图和流程说明&#xff1a; 它是品牌商赋能门店流量&#xff0c;以用户为中心、提升用户体验的一种电商模式。 这个品牌商可以是工厂、连锁品牌、省代市代等商贸流通型企业&#xff0c;它可以一个或者多个仓库&#xff0c;甚至有自己…
阅读更多...
文件恢复软件哪个最好用？5 款最佳照片文件恢复软件

文件恢复软件哪个最好用？5 款最佳照片文件恢复软件

丢失照片很常见&#xff0c;但恢复它们取决于您选择的方法或软件。找到最好的照片恢复软件来恢复永久删除的照片并不容易。在许多网页上&#xff0c;您可以找到一大堆照片恢复工具&#xff0c;无论它们的性能如何。这可能会造成很多混乱&#xff0c;不知道优先使用什么照片恢复…
阅读更多...
Linux操作系统之线程创建

Linux操作系统之线程创建

文章目录一、了解线程二、线程的创建一、了解线程 什么是线程&#xff1f; 线程是进程内部的一条执行路径或执行序列 二、线程的创建 pthread_creat() //创建线程 pthread_exit() //只退出当前线程 pthread_join() //等待线程结束/合并线程 第一类题目&#xff1a;1、首先…
阅读更多...
Python玩人工智能：你的俯卧撑做对了吗？

Python玩人工智能：你的俯卧撑做对了吗？

1. 准备工作 1.1 安装Python3.8.x 1.2 安装PyCharm社区版 1.3 创建项目 1.4 安装项目使用工具包 1.1 下载安装Python3.8.x版本 首先我们的电脑上要安装Python3.8.x。Python 3.8.x : https://www.python.org/downlo... 1.2 下载安装PyCharm社区版 PyCharm: https://www.j…
阅读更多...
远程办公与Web3内核高度匹配 将重塑全球劳动力市场格局？

远程办公与Web3内核高度匹配 将重塑全球劳动力市场格局？

在过去两年半的时间里&#xff0c;全球有45%的工作转为了远程办公模式&#xff0c;不过即使疫情好转&#xff0c;大城市的办公室入驻率仍低于疫情前50%的水平。 这表明&#xff0c;现在越来越多的人更喜欢远程工作的生活方式。“远程办公”从疫情期间的无奈选择&#xff0c;正在…
阅读更多...
java基于ssm框架的企业人事管理系统企业工资考勤系统

java基于ssm框架的企业人事管理系统企业工资考勤系统

简介 Java基于ssm开发的企业人事考勤工资系统&#xff0c;员工可以打卡、请假。系统根据员工的打卡情况自动计算工资&#xff08;全勤、请假、旷工、加班、迟到、早退等计算出最终实发工资&#xff09;&#xff0c;员工还可以查看自己的考勤记录工资具体组成等。升级版加了部长…
阅读更多...
jedis是什么，为什么是线程不安全的

jedis是什么，为什么是线程不安全的

常用的操作redis的客户端工具 jedis Jedis 是 Redis 官方推荐的 Java 连接开发工具&#xff0c;jedis非线程安全。 但是可以通过JedisPool连接池去管理实例&#xff0c;在多线程情况下让每个线程有自己独立的jedis实例&#xff0c;可变为线程安全。 Lettuce Lettuce 是基于…
阅读更多...
嵌入式实时操作系统的设计与开发（七）

嵌入式实时操作系统的设计与开发（七）

内存管理机制 内存管理就是把物理的存储资源用一定的规则和手段管理起来&#xff0c;以供给操作系统和应用程序使用。 主要的操作&#xff1a;内存的分配和内存的回收。 内存的利用率、分配回收的效率和稳定性成为了评价内存管理模块的主要依据。 内存分配又包括静态和动态两种…
阅读更多...
Pinely Round 1 (Div. 1 + Div. 2) A. Two Permutations

Pinely Round 1 (Div. 1 + Div. 2) A. Two Permutations

来写一道*800的题&#xff0c;思路很简单&#xff0c;就是这道题我们应该怎么去严谨地思考Problem - 1761A - Codeforces思路&#xff1a;结论题的分类讨论一定要不重不漏一开始很容易想到&#xff0c;前缀和后缀不能有重合那么有重合部分就判No没有重合的情况&#xff1a;隔1个…
阅读更多...
Linux常用命令——xz命令

Linux常用命令——xz命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) xz POSIX 平台开发具有高压缩率的工具。 补充说明 xz命令XZ Utils 是为 POSIX 平台开发具有高压缩率的工具。它使用 LZMA2 压缩算法&#xff0c;生成的压缩文件比 POSIX 平台传统使用的 gzip、bzip2 生成的压缩…
阅读更多...
多线程进阶（二）Callable接口，JUC下常见类使用及线程安全集合类

多线程进阶（二）Callable接口，JUC下常见类使用及线程安全集合类

目录 前言&#xff1a; Callable接口 代码实现 JUC下常见类使用 ReentrantLock类 代码实现 信号量 代码实现 CountDownLatch类 代码实现 线程安全的集合类 多线程环境下使用ArrayList 多线程环境下使用队列 多线程环境下使用哈希表 小结&#xff1a; 前言&#…
阅读更多...
图解24种经典k线图

图解24种经典k线图

相信不少国内的老股民心中都藏着一份经典的K线图图解&#xff0c;当中也许有6种、12种或24种能揭示行情方向转变的“K线脸谱”&#xff0c;借由它们的对行情的预知作用&#xff0c;股民度过一次又一次的熊牛更替。其实只要善于变通&#xff0c;它们同样适用于贵金属投资&#x…
阅读更多...
再说多线程（一）

再说多线程（一）

世界是并行&#xff01;做过复杂项目的朋友一定遇到过并发的问题&#xff0c;无论是大项目如订票系统&#xff0c;还是小项目中的文件管理都会有并行需求。所以不同于上学时接触的大部分代码&#xff0c;实际的业务往往是为多人提供服务&#xff0c;必然天然的带有并发的需求。…
阅读更多...
Mybatis-plus 使用 typeHandler 将 String 拼接字符串转换为 List 列表

Mybatis-plus 使用 typeHandler 将 String 拼接字符串转换为 List 列表

一、需求描述 首先说明需求&#xff0c;有三张表&#xff1a; 学生表、角色表、以及一张关联的中间表。 学生可以有多个角色&#xff0c;但是这多个角色我是作为多条记录存储在另外一张表中的&#xff0c;现在想将这多条记录查询出来&#xff0c;注入到Student对象中的一个L…
阅读更多...
微服务之JVM调优

微服务之JVM调优

一、Xms Xmx Xss等定义及功能 1.Xms 是指设定程序启动时占用内存大小。一般来讲，大点，程序会启动的快一点，但是也可能会导致机器暂时间变慢。 2.Xmx 是指设定程序运行期间最大可占用的内存大小。如果程序运行需要占用更多的内存，超出了这个设置值，就会抛出OutOfMemory异…
阅读更多...
易基因｜14种全基因组DNA甲基化测序(WGBS)标准分析比对软件的比较| 生信专区

易基因｜14种全基因组DNA甲基化测序(WGBS)标准分析比对软件的比较| 生信专区

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。全基因组重亚硫酸盐测序&#xff08;WGBS&#xff09;是甲基化研究的重要技术。尽管已经开发了一系列工具来解决由亚硫酸盐处理引起的比对问题&#xff0c;但尚未对最新可用工具的reads比对…
阅读更多...
HashMap,Hashtable,ConcurrentHashMap

HashMap,Hashtable,ConcurrentHashMap

目录 一、多线程使用HashMap的一些线程安全问题 ①造成数据新增丢失 ②扩容时候&#xff0c;造成链表成环 二、Hashtable和HashMap的区别 ①核心方法加锁 ②其他语法上面的略微差异 三、引入ConcurrentHashMap【重要】 ①ConcurrentHashMap相比于Hashtable的优势 Hashtab…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023