关于html5:HTML5CSS3-2

157次阅读

共计 10979 个字符，预计需要花费 28 分钟才能阅读完成。

2D

transform

transform(转换)是 css3 新增的属性 能够实现元素的旋转 位移 缩放等成果

二维坐标系

2D 转换是扭转元素在二维立体上形态和地位的一种技术

translate(位移)

注意事项

  • 所谓的位移 是沿着 x 轴和 Y 轴挪动地位
  • 不会影响到其它元素的地位
  • 对行内元素有效

应用办法

  • translate(x,y)
  • translateX(n): 针对 X 轴
  • translateY(n): 针对 Y 轴
  • translate(50%,50%) 这里的百分比是依据本身宽度和高度进行挪动
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 20px 100px;
        }
        
        div[class="box"] {
            background-color: blue;
            transform: translate(200px, 50px);
        }
    </style>
</head>
 
<body>
    <div class="box"></div>
    <div></div>
</body>
 
</html>

让盒子实现程度和垂直居中对齐

留神：盒子必须是块级元素和行内块元素。能够用 tanslate 实现，用定位和 translate 配合更佳

<!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>
        div {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 200px auto;
            background-color: red;
        }
        
        p {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            background-color: blue;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
 
<body>
    <div>
        <p></p>
    </div>
</body>
 
</html>

旋转

注意事项

  • 旋转的单位为 deg
  • 正值为顺时针旋转 负值为逆时针旋转
  • 旋转的中心点为元素的中心点
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
            margin: 500px auto;
            border-radius: 20px;
            /* 过渡的成果 */
            transition: all 2s linear 0s;
        }
        
        img:hover {
            /* 旋转 180deg */
            transform: rotate(180deg);
        }
    </style>
</head>
 
<body>
    <img src="./image/ 形象.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">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid black;
        }
        /* 利用伪元素制作案例 */
        
        .box::after {
            position: absolute;
            top: 9px;
            left: 175px;
            content: '';
            width: 10px;
            height: 10px;
            border-right: 1px solid red;
            border-bottom: 1px solid red;
            transform: rotate(45deg);
            transition: all 2s linear 0s;
        }
        /* 鼠标通过 div 时旋转 */
        
        .box:hover::after {transform: rotate(-135deg);
            
        }
    </style>
</head>
 
<body>
    <div class="box"></div>
</body>
 
</html>

扭转旋转中心点

transform-origin:x y
  • x y 之间用空格相隔开
  • 默认的旋转中心点（50% 50%）
  • 能够用像素或者方位名词示意
<!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>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 200px auto;
            transition: all 6s linear 0s;
            /* 旋转中心点 左下角 */
            transform-origin: left top;
        }
        
        .box:hover {transform: rotate(360deg);
        }
    </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>
        * {
            margin: 0;
            padding: 0;
        }
       
        .box {
            height: 400px;
            width: 400px;
            border: 1px solid red;
            margin: 200px auto;
            overflow: hidden;
        }
        
        .box::after {
            display: block;
            content: "";
            width: 400px;
            height: 400px;
            background-color: red;
            transform-origin: right bottom;
            transform: rotate(90deg);
            transition: all 1s linear 0s;
        }
        
        .box:hover::after {transform: rotate(0deg);
        }
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>
 
</html>

缩放

scale(x,y)

注意事项

  • scale(1,1) 宽高及放大 1 倍
  • scale(2,3) 宽放大 2 倍 高放大 3 倍
  • scale(5) 宽高都放大 5 倍
    长处：能够设置旋转中心点，缩放的时候不会影响其它元素
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 应用过渡成果 */
            transition: all 2s linear 0s;
            /* 让盒子居中对齐  */
            margin: 200px auto;
        }
        
        .box:hover {
            /* 放大 2.0 倍  不会影响其它元素的地位 */
            transform: scale(2);
        }
    </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>
        /* img 放大 star */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            float: left;
            overflow: hidden;
            width: 450px;
            height: 288px;
            margin: 50px;
        }
        
        img {transition: all 2s linear 0s;}
        
        img:hover {transform: scale(2);
        }
        /* img 放大 end */
    </style>
 
    <body>
        <div><img src="./image/ 星空.jpg" alt=""></div>
        <div><img src="./image/ 星空.jpg" alt=""></div>
        <div><img src="./image/ 星空.jpg" alt=""></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>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            margin: 200px auto;
        }
        
        li {
            float: left;
            list-style: none;
            width: 30px;
            height: 30px;
            border: 1px solid #cccccc;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            margin: 50px 20px;
            transition: all 3s linear 0s;
        }
        
        li:hover {transform: scale(2);
        }
    </style>
</head>
 
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <div style="clear: both;"></div>
        </ul>
    </div>
</body>
 
</html>

2D 综合写法

注意事项

  • CSS 2D 的属性能够简写
  • transform:translate(x,y) rolate(n) scale(n) 依照这个程序来写，属性之间用空格相隔
  • 位移放在最后面 切记不能扭转程序
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 设置过渡成果 */
            transition: all 2s linear 0s;
        }
        
        .box:hover {
            /* 记住程序 先设置 * 位移 再设置旋转 最初设置缩放 */
            transform: translate(200px, 200px) rotate(200deg) scale(2);
        }
    </style>
</head>
 
<body>
    <div class="box"> </div>
</body>
 
</html>

动画

动画 相比于过渡 能够实现更多变动 更多管制 自动播放等

应用动画的步骤

  • 先定义动画
  • 再应用（调用）动画
  • 定义动画应用 @keyframes 0% 是起始状态 100% 是完结状态。
  • 调用动画必须须要的两个属性 animation-name ainimation-duration(动画的持续时间)
<!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>
    
        * {
            margin: 0;
            padding: 0;
        }
        /* 定义动画 */
        
        @keyframes move {
            0% {transform: translate(0px, 0px);
            }
            100% {/* 正告：translate(x,y)要加逗号 */
                transform: translate(1000px, 0px);
                background-color: blue;
                border-radius: 50%;
            }
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 动画的名字 */
            animation-name: move;
            /* 动画的持续时间 */
            animation-duration: 5s;
        }
    </style>
</head>
 
<body>
    <div class="box"></div>
</body>
 
</html>

动画的根本实现

注意事项

  • form to 等价于 0% 100%
  • 实现更多细节能够用百分比来实现
<!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>
        @keyframes move {
            0% {transform: translate(0, 0);
            }
            25% {transform: translate(1600px, 0);
             }
            50% {transform: translate(1600px, 800px);
            }
            75% {transform: translate(0px, 800px);
            }
            100% {transform: translate(0px, 0px);
            }
        }
        
        .box {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: blue;
            animation-name: move;
            animation-duration: 5s;
        }
    </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>
        * {
            margin: 0;
            padding: 0;
        }
        /* 定义动画 */
        
        @keyframes move {
            25% {transform: translate(1350px, 0px);
            }
            50% {transform: translate(1350px, 600px);
            }
            75% {transform: translate(0px, 600px);
            }
            100% {transform: translate(0px, 0px);
            }
        }
        
        .pic-con {
            width: 450px;
            height: 288px;
            overflow: hidden;
            border-radius: 40px;
            margin: 10px;
            
            /* 应用动画 */
            /* 动画名字 */
            animation-name: move;
            /* 动画的持续时间 */
            animation-duration: 4s;
            /* 动画的静止曲线 */
            animation-timing-function: linear;
            /* 动画的提早 */
            animation-delay: 0s;
            /* 动画的播放次数 */
            animation-iteration-count: infinite;
            /* 是否反方向播放 */
            animation-direction: alternate;
            /* 动画完结后放弃的状态 可省略 */
            /* animation-fill-mode: forwards; */
        }
        /* 鼠标挪动到此处 动画进行播放 */
        
        .pic-con:hover {animation-play-state: paused;}
    </style>
</head>
 
<body>
 
    <div class="pic-con">
        <img src="./image/ 星空.jpg" alt="">
    </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>
        @keyframes move {
            0% {transform: translate(0, 0);
            }
            25% {transform: translate(1600px, 0);
            }
            50% {transform: translate(1600px, 800px);
            }
            75% {transform: translate(0px, 800px);
            }
            100% {transform: translate(0px, 0px);
            }
        }
        
        .box {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: blue;
            /* 动画的简写 */
            animation: move 10s linear 0s infinite alternate;
        }
    </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>
        @keyframes move {
            0% {transform: translate(0, 0);
            }
            25% {transform: translate(1600px, 0);
            }
            50% {transform: translate(1600px, 600px);
            }
            75% {transform: translate(0px, 600px);
            }
            100% {transform: translate(0px, 0px);
            }
        }
        
        .box {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: blue;
            /* 动画的简写 */
            animation: move 10s linear 0s infinite alternate;
        }
        
        .box:hover {animation-play-state: paused;}
    </style>
</head>
 
<body>
    <div class="box"></div>
</body>
 
</html>

热点图

思路：利用定位和动画可做出成果，必须确保向外扩散的波浪线位于核心地位，且用盒子暗影色彩代替背景色

留神：为什么不必 scale 呢，因为 scale 会把盒子的暗影放大，视觉会受到影响

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {background-color: #333333;}
        
        .map {
            /* 应用定位  自绝父相 */
            position: relative;
            width: 747px;
            height: 617px;
            background: url(./image/map.png) no-repeat;
            margin: 200px auto;
        }
        
        .city {
            position: absolute;
            top: 194px;
            left: 500px;
            width: 80px;
            height: 80px;
        }
        
        div.city1 {
            position: absolute;
            top: 460px;
            left: 606px;
        }
        
        div.city2 {
            position: absolute;
            top: 508px;
            left: 500px;
        }
        
        .circle {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            background-color: blue;
            border-radius: 50%;
        }
        
        div[class^="wave"] {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0px 0px 20px skyblue;
            border-radius: 50%;
            /* 应用动画 */
            animation: move 2s linear 0s infinite;
        }
        
        .city .wave2 {
            /* 应用动画 */
            animation: move 2s linear 10s infinite;
        }
        
        .city .wave3 {
            /* 应用动画 */
            animation: move 2s linear 20s infinite;
        }
        /* 定义动画 */
        
        @keyframes move {
            50% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 80px;
                height: 80px;
                opacity: 0;
            }
        }
    </style>
</head>
 
<body>
    <div class="map">
        <div class="city">
            <div class="circle"></div>
            <div class="wave1"></div>
            <div class="wave2"></div>
            <div class="wave3"></div>
        </div>
        <div class="city city1">
            <div class="circle"></div>
            <div class="wave1"></div>
            <div class="wave2"></div>
            <div class="wave3"></div>
        </div>
        <div class="city city2">
            <div class="circle"></div>
            <div class="wave1"></div>
            <div class="wave2"></div>
            <div class="wave3"></div>
        </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">
    <title>Document</title>
    <style>
        /* 思路：利用步长可实现打字机成果 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 0px;
            height: 30px;
            /* 让文本强制一行显示 */
            white-space: nowrap;
            /* 剪裁 */
            overflow: hidden;
            font-size: 20px;
            background-color: pink;
            animation: move 2s steps(10) 0s infinite;
        }
        /* 定义动画 */
        
        @keyframes move {
            0% {width: 0px;}
            100% {width: 280px;}
        }
    </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>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {background: url(./image/ 形象.jpg) no-repeat fixed top center;
            background-size: cover;
        }
        
        .box {
            position: fixed;
            width: 200px;
            height: 100px;
            top: 50%;
            transform: translate(0px, -50px);
            background: url(./image/bear.png) no-repeat;
            animation: bear 0.4s steps(8) 0s infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {background-position: 0 0;}
            100% {background-position: -1600px 0px;}
        }
        
        @keyframes move {
            0% {left: 0;}
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>
 
</html>

正文完
html5
发表至： html5
2020-08-03
 0
关于html5:移动端播放器
关于html5:前端面试每日-31-第715天
关于html5:25D-组态案例合集-智慧园区数据中心SMT-生产线汽车制造
关于SegmentFault:解构标志性的-Apple-Watch-Bubble-UI