html高级篇

1.2D转换

转换(transform)你可以简单理解为变形

移动:translate

旋转:rotate

缩放:sCale

  1. 移动:translate
1.移动具体值
html 复制代码
         /* 移动盒子的位置: 定位   盒子的外边距  2d转换移动 */

        

        div {

            width: 200px;

            height: 200px;

            background-color: pink;

            /* 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 {

            transform: translate(30px, 30px);

        }

        

        div:last-child {

            background-color: purple;

        }
2.移动百分比
html 复制代码
  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; */;

            /* 盒子往上走自己高度的一半    */

            transform: translate(-50%, -50%);

        }

2. 旋转:rotate

1.图片旋转
html 复制代码
 img {

            width: 150px;

            /* 顺时针旋转45度 */

            /* transform: rotate(45deg); */

            border-radius: 50%;

            border: 5px solid pink;

            /* 过渡写到本身上,谁做动画给谁加 */

            transition: all 0.3s;

        }

        

        img:hover {

            transform: rotate(90deg);

        }

    </style>

</head>


<body>

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

</body>
2.小三角
html 复制代码
  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);

        }
  1. 设置旋转中心点

1.语法

transform-origin:xy;

2.重点

·注意后面的参数x和y用空格隔开

·xy默认转换的中心点是元素的中心点(50%50%)

·还可以给xy设置像素或者方位名词(top bottom left right center)

html 复制代码
  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: 80px 80px;         */

             /* transform-origin: top left; */

            transform-origin: bottom right ;

        }

        

        div:hover {

            transform: rotate(360deg);

        }
  1. 案例
html 复制代码
         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-image: url("./media/pig.jpg");          

            transform: rotate(180deg);

            transform-origin: left bottom;

            transition: all 0.4s;

        }

        /* 鼠标经过div 里面的before 复原 */

        

        div:hover::before {

            transform: rotate(0deg);

        }

    </style>

</head>


<body>

    <div></div>

    <div></div>

    <div></div>
  1. 缩放:sCale
1.用法
html 复制代码
         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
2.按钮案例
html 复制代码
 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>
3.综合案例
html 复制代码
      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);

        }

二.动画

制作动画分为两步:

1.先定义动画

2.再使用(调用)动画

1.用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称{

0%{

width:100px;

}

100%{

width:200px;

}

}

2.元素使用动画

div{

width:200px;height:200px;background-color:aqua;margin:100px auto;

/*调用动画*/

animation-name:动画名称;

/*持续时间*/

animation-duration:持续时间;}

1.简单的动画

html 复制代码
        /* 我们想页面一打开,一个盒子就从左边走到右边 */

        /* 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;

        }

2.动画序列

html 复制代码
 /* 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;

        }

3.动画属性

|---------------------------|-----------------------------------------------|
| 属性 | 描述 |
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性 |
| animation-name | 规定@keyframes动画的名称(必须的) |
| animation-duration | 规定动画完成一个周期花费的秒或毫秒,默认是0。(必须的) |
| aniamtion-timing-function | 规定动画的速度曲线,默认是'ease' |
| animation-delay | 规定动画何时开始,默认是0 |
| animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放,默认是'normal',alternate逆向播放 |
| animation-play-state | 规定动画是否正在运行或暂停,默认是'running',还有'pause' |
| animation-fill-mode | 规定动画结束后状态,保持forwards,回到起始backwards |

1.基本使用
html 复制代码
@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: 2s;

            /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */

            /* animation-iteration-count: infinite; */

            /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */

            /* animation-direction: alternate; */

            /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */

            /* animation-fill-mode: forwards; */

            /* 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; */

        }

        

        div:hover {

            /* 鼠标经过div 让这个div 停止动画,鼠标离开就继续动画 */

            animation-play-state: paused;

        }
2.大数据热图
html 复制代码
 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>
1.文字打印效果
html 复制代码
  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>
2.奔跑的熊大
html 复制代码
  body {

            background-color: #ccc;

        }

        

        div {

            position: absolute;

            width: 200px;

            height: 100px;

            background: url(media/bear.png) no-repeat;

            /* 我们元素可以添加多个动画, 用逗号分隔 */

            animation: bear .6s steps(8) infinite, move 4s 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>

三、3D转换

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

·x轴:水平向右注意:X右边是正值,左边是负值

·y轴:垂直向下注意:y下面是正值,上面是负值

·z轴:垂直屏幕注意:往外面是正值,往里面是负值

1.3D位移translate3d(x,y,z)

translform:translateX(100px):仅仅是在x轴上移动

translform:translateY(100px):仅仅是在Y轴上移动

translform:translateZ(100px):仅仅是在z轴上移动(注意:translateZ一般用px单位)transform:translate3d(x,y,):其中x、y、z分别指要移动的轴的方向的距离

html 复制代码
 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(200px, 100px, 100px);

        }
  1. 透视perspective
html 复制代码
  body {

            perspective: 600px;

            /* 透视写到被观擦元素的父盒子上面 */

        }

        

        div {

            width: 200px;

            height: 200px;

            background-color: pink;

            margin: 100px auto;

            transform: translateZ(0);

        }

    </style>

</head>


<body>

    <div></div>

    <div></div>

    <div></div>

</body>

3.3Drotate3d

html 复制代码
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 {

            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="">

4.3D呈现transform-style

·控制子元素是否开启三维立体环境。。

·transform-style:flat子元素不开启3d立体空间默认的

·transform-style:preserve-3d;子元素开启立体空间

·代码写给父级,但是影响的是子盒子

html 复制代码
      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>
  1. 双面反转

1.搭建HTML结构

<div class="box">

<div class="front">黑马程序员</div>

<div class="back">pink老师等你</div>

</div>

·box父盒子里面包含前后两个子盒子

·box是翻转的盒子front是前面盒子back是后面盒子

html 复制代码
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">pink老师这里等你</div>

    </div>
  1. 旋转导航案例
html 复制代码
  * {

            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">pink老师等你</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">黑马程序员</div>

                <div class="bottom">pink老师等你</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">黑马程序员</div>

                <div class="bottom">pink老师等你</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">黑马程序员</div>

                <div class="bottom">pink老师等你</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">黑马程序员</div>

                <div class="bottom">pink老师等你</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">黑马程序员</div>

                <div class="bottom">pink老师等你</div>

            </div>

        </li>

    </ul>
  1. 旋转木马
html 复制代码
  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;

        }

        /* 正对着的图片 z轴*/

        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>

四、浏览器私有前缀

-moz-:代表firefox 浏览器私有属性

-ms-:代表ie浏览器私有属性

-webkit-:代表safari、chrome私有属性

-o-:代表Opera私有属性

2.提倡的写法

-moz-border-radius:10px;

-webkit-border-radius:10px;

-o-border-radius:10px;border-radius:10px;

相关推荐
DogEgg_0016 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
黎金安7 小时前
前端第二次作业
前端·css·css3
阳光开朗大男孩 = ̄ω ̄=8 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小马哥编程10 小时前
【前端基础】CSS基础
前端·css
Justinc.10 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge11 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
As977_11 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891111 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾11 小时前
前端基础-html-注册界面
前端·算法·html
我要洋人死14 小时前
导航栏及下拉菜单的实现
前端·css·css3