HTML基础--CSS3（二）

已于 2022-08-10 22:08:10 修改
阅读量186 收藏 1
点赞数 1
文章标签： css3 html css 前端 vscode
于 2022-08-10 22:05:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50315078/article/details/126275219
版权

1.响应式布局

1.常见的布局方案

在这里插入图片描述

2.常用的几个布局原则

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3.媒体查询

在这里插入图片描述

在这里插入图片描述

4.响应式布局

在这里插入图片描述

在这里插入图片描述

5.示例代码

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            height: 100%;
        }
        /*注意这里的and两边必须有空格*/
        @media screen and (min-width:1000px) {
            body {
                background-color: yellow;
            }
        }

        @media screen and (max-width:1000px) and (min-width:500px) {
            body {
                background-color: red;
            }

        }
        @media screen and (max-width:500px) {
            body {
                background-color: green;
            }
        }
    </style>
</head>
<body>
</body>
  • 横屏与竖屏
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            flex-wrap: wrap;
        }

        div {
            height: 100px;
            background-color: yellow;
            border: 2px solid red;
            box-sizing: border-box;
            /* width: 25%; */
        }

        /* 竖屏 */
        @media screen and (orientation:portrait) {
            div {
                width: 33.333%;
            }
        }

        /* 横屏 */
        @media screen and (orientation:landscape) {
            div {
                width: 25%;
            }
        }
    </style>
</head>

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

2.响应式布局案例

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .top>div {
            width: 49%;
        }

        .top img {
            width: 100%;
        }

        .right {
            display: flex;
            justify-content: space-between;
        }

        .right>img {
            width: 49%;
        }

        @media screen and (max-width:768px) {
            .top>div {
                width: 100%;
            }
        }

        .bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .bottom>div {
            width: 23%;
            padding: 5px;
            box-sizing: border-box;
            border: 1px solid grey;
            margin-top: 10px;
            box-shadow: 0 0 5px black;
        }

        .bottom img {
            width: 100%;
        }

        @media screen and (max-width:1024px) and (min-width:768px) {
            .bottom>div {
                width: 31%;
            }
        }

        @media screen and (max-width:768px) and (min-width:450px) {
            .bottom>div {
                width: 48%;
            }
        }

        @media screen and (max-width:450px) {
            .bottom>div {
                width: 90%;
            }
        }
    </style>
</head>

<body>


    <!-- 
        top:flex wrap
    >768px 左49% 右边49%
    < 上100% 下100%


    bottom:flex,wrap
    >1024 23%*4
    >768 <1024 31%*3
    >450 <768 48%*2
    <450 90%*1 
-->

    <div class="top">
        <div class="left">
            <img src="../img/2054377.jpg" alt="">
        </div>
        <div class="right">
            <img src="../img/2054509.jpg" alt="">
            <img src="../img/2054783.jpg" alt="">
        </div>
    </div>


    <div class="bottom">

        <div>
            <img src="../img/2055030.jpg" alt="">
            <span>我滴任务完成啦</span>
        </div>
        <div>
            <img src="../img/2055077.jpg" alt="">
            <span>我滴任务完成啦</span>
        </div>
        <div>
            <img src="../img/2055090.jpg" alt="">
            <span>我滴任务完成啦</span>
        </div>
        <div>
            <img src="../img/2055093.jpg" alt="">
            <span>我滴任务完成啦</span>
        </div>
    </div>
</body>

3.em与rem

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 16px;
        }

        .div1,
        .div2 {
            border: 1px solid red;
            font-size: 16px;
        }

        .div1 p {
            font-size: 32px;
        }

        .div2 p {
            /* font-size: 2em; */
            font-size: 2rem;

        }
    </style>
</head>

<body>

    <!-- 
        px em rem
    px:css像素
    em:相对单位，相对于父元素的字体大小
    rem:相对单位，相对于根元素(html)字体大小 
-->
    <div class="div1">
        <p>1111</p>
    </div>
    <div class="div2">
        <p>2222</p>
    </div>
</body>
  • 相关插件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 3.75rem;
            height: 6.25rem;
            background-color: yellow;
            width: 46.875rem;
        }

        html {
            font-size: 16px;
        }

        body {
            font-size: 1rem;
        }
    </style>
    <script>
        // fontSize计算代码
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px'
        //font-size=档期啊 设备的css布局宽度/物理分辨率(设计稿的宽度)*基准font-size
    </script>
</head>

<body>
    <div class="box">
        赵钱孙李
    </div>
</body>

4.足球圈rem案例

  • rem===等比例缩放

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../font-icon/font_3573520_gov0k2wzlya/iconfont.css">
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column
        }

        header {
            height: 2.2rem;
            background-color: green;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* header */
        header div {
            width: 3rem;
            height: 1.25rem;
            line-height: 1.25rem;
            text-align: center;
            color: white;
            font-size: .6rem;
        }

        header div:nth-child(1) {
            border-radius: .65rem 0 0 .65rem;
            background-color: #63d985;
        }

        header div:nth-child(2) {
            border-radius: 0 .65rem .65rem 0;
            background-color: #3dd066;
            opacity: 0.9;
        }

        /* section */
        section {
            flex: 1;
            overflow: auto;
        }

        section ul {
            display: flex;
            text-align: center;
            height: 1.75rem;
            line-height: 1.75rem;
            justify-content: space-around;
            border-bottom: .05rem solid #d9d9d9;
            font-size: .7rem;

            position: sticky;
            top: 0rem;
            background-color: white;
        }

        section ul li {
            flex: 1;

        }

        /* 默认选中 */
        section ul li:nth-child(1) {
            color: green;
            border-bottom: .15rem solid #3dd066;
        }

        section li:hover {
            color: green;
            border-bottom: .15rem solid #3dd066;

        }

        section div {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            text-align: center;
            align-items: center;
        }

        section div>div {
            margin-top: .2rem;
        }

        section div div {
            width: 49%;
            border: 1ps solid grey;
            /* margin-top: .2rem; */
        }

        section div img {
            height: 11.35rem;
            width: 100%;
            border: 1ps solid grey;
        }

        section div div p {
            width: 100%;
            border: .05rem solid rgba(128, 128, 128, 0.295);
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: .6rem;

        }

        /* footer */
        footer {
            height: 2.2rem;
            background: white;
            color: #d5d5d7;

        }

        footer ul {
            display: flex;

        }

        footer li {
            height: 100%;
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        footer li i {
            height: 1.05rem;
            font-size: .8rem;
            line-height: 1.05rem;
        }

        footer li span {
            font-size: .6rem;
            height: .85rem;
            line-height: .85rem;
        }

        footer li:hover {
            color: #08ca43;
        }


        footer li:nth-child(3) {
            height: 2.5rem;
            width: 2.5rem;
            border: .05rem solid grey;
            border-radius: 50%;
            position: relative;
            line-height: 2.5rem;
            top: -0.7rem;
            background-color: white;
        }

        footer li:nth-child(3) i {
            font-size: 1.5rem;
        }


        html {
            font-size: 20px;
        }

        .iconfont {
            font-size: .8rem;
        }
    </style>

    <script>
        // fontSize计算代码
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 20 + 'px'
    //font-size=档期啊 设备的css布局宽度/物理分辨率(设计稿的宽度)*基准font-size
    </script>

    <header>
        <div>热点</div>
        <div>关注</div>
    </header>
    <section>
        <ul>
            <li>足球现场</li>
            <li>足球生活</li>
            <li>足球美女</li>
        </ul>

        <div class="list">
            <div>
                <img src="../img/2054377.jpg" alt="">
                <p>方天画戟</p>
            </div>
            <div>
                <img src="../img/2054509.jpg" alt="">
                <p>小丸子</p>
            </div>
            <div>
                <img src="../img/2054783.jpg" alt="">
                <p>千鸟</p>
            </div>
            <div>
                <img src="../img/2055030.jpg" alt="">
                <p>也许</p>
            </div>
            <div>
                <img src="../img/2055077.jpg" alt="">
                <p>悲哀</p>
            </div>
            <div>
                <img src="../img/2055090.jpg" alt="">
                <p>不过</p>
            </div>
            <div>
                <img src="../img/2055093.jpg" alt="">
                <p>伤害</p>
            </div>
            <div>
                <img src="../img/2055094.jpg" alt="">
                <p>天下</p>
            </div>

        </div>

    </section>
    <footer>
        <ul>
            <li>
                <i class="iconfont icon-shouye1"></i>
                <span>首页</span>
            </li>
            <li>
                <i class="iconfont icon-sousuo"></i>
                <span>发现</span>
            </li>
            <li>
                <i class="iconfont icon-xiangji1"></i>

            </li>
            <li>
                <i class="iconfont icon-wode"></i>
                <span>我的</span>
            </li>
            <li>
                <i class="iconfont icon-shibai"></i>
                <span>退出</span>
            </li>
        </ul>
    </footer>
</body>

5.vw和vh

  • vw与vh是view-width与view-height的缩写

    • 100vh==视口的高度

    • 100vw==视口的宽度

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 26.67vw;
        }

        div {
            width: 3.75rem;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
  • 与百分比的区别：百分比实际上是作用于父盒子，主要在于滚动条的区别
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 1000px;
            height: 300px;
            background-color: red;
        }

        .box2 {
            width: 1000px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <!-- 主要区别是在有没有滚动条时，100%是不包含滚动条的，占满剩余空间，vw是包含滚动条的 -->
</body>

6.渐变

在这里插入图片描述

1.线性渐变

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 10px solid grey;
            /* 可以使用逗号无限添加颜色 */
            /* 第一个参数表示方向，默认（不写是从上到下），
            to top,
            to right,
            to top right ... */
            /* 还可以使用角度来进行渐变:0deg(注意单位之间不能加空格) */
            background: linear-gradient(10deg, red, yellow, blue, green, purple);
        }
    </style>
</head>

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

2.径向渐变

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3.重复渐变

在这里插入图片描述

7.太极案例

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: lightblue;
        }
        div {
            width: 200px;
            height: 200px;
            background: linear-gradient(white 50%, black 50%);
            margin: 10px auto;
            display: flex;
            align-items: center;
            border-radius: 50%;
        }

        div::before {
            content: "";
            width: 100px;
            display: block;
            height: 100px;
            width: 100px;
            background: radial-gradient(white 25%, black 30%);
            border-radius: 50%;
        }

        div::after {
            content: "";
            width: 100px;
            display: block;
            height: 100px;
            width: 100px;
            background: radial-gradient(black 25%, white 30%);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>

8.过渡

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: all 2s linear;
        }

        /* all所有属性，除了display:none/block
        2s动画时间
        linear匀速
        2s延迟加载 */


        div:hover {
            height: 600px;
            height: 400px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
  • 使用单一属性：
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background:yellow;
            transition-property: height background;
            transition-duration: 2s;
            transition-timing-function: linear;
            transition-delay: 2s;
        }
        div:hover{
            height: 600px;
            background:red;
        }
    </style>
</head>
<body>
    <div></div>
</body>

9.动画过渡类型

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }

        li{
            width: 200px;
            height: 50px;
            border:1px solid gray;
        }

        ul:hover li:nth-child(1){
            width: 600px;
            transition:all 2s linear;
        }
        ul:hover li:nth-child(2){
            width: 600px;
            transition:all 2s ease;
        }
        ul:hover li:nth-child(3){
            width: 600px;
            transition:all 2s ease-in;
        }
        ul:hover li:nth-child(4){
            width: 600px;
            transition:all 2s ease-out;
        }
        ul:hover li:nth-child(5){
            width: 600px;
            transition:all 2s ease-in-out;
        }

        ul:hover li:nth-child(6){
            width: 600px;
            transition:all 2s cubic-bezier(.51,1.19,.73,.49);
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

10.2D属性–平移

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background:red;
            transition:all 1s;
            /* margin: 10px auto; */
            transform: translateX(50px);
        }
        div:hover{
            /* transform:translateX(100px) translateY(100px); */
            transform: translate(100px,100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
  • 面试题：与relative的区别

在这里插入图片描述

  • 设置left–合成图层

在这里插入图片描述

在这里插入图片描述

  • 设置translate–独立图层

在这里插入图片描述

在这里插入图片描述

11.2D属性–缩放

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            /* height: 300px; */
            border:5px solid red;
            margin:100px auto;
             overflow:hidden; 
        }

        img{
            width: 100%;
            transition:all 2s;

            transform-origin:center;

            /* 
              改变中心点的位置

              center 
              left top
              left bottom
              left center
              right top
              right bottom
              right center
             */
        }

        div:hover img{
            /* width: 150%; */
            transform: scale(1.5);

            /* 负值-倒像放大效果 
                支持x轴 y轴单独放大

                scaleX
                scaleY
            */
            /* transform: scaleY(1.5); */
        }
    </style>
</head>
<body>
    <div>
        <img src="1.png" alt="">
    </div>
</body>

12.2D属性–旋转

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{
            background:lightblue;
        }
        div{
            width: 200px;
            height: 200px;
            background:linear-gradient(white 50%,black 50%);
            margin:200px auto;
            display: flex;
            align-items: center;
            border-radius: 50%;
            transition:all 2s;
            transform: rotateZ(0deg);

            /* transform-origin: left top; */
            /* 
            rotate 中心 ==== rotateZ
               正值 顺时针
               负值 逆时针
             */

            /* transform: rotateY(0deg); */
        }

        div:hover{
            transform: rotate(360deg);
        }

        div::before{
            content:"";
            display: block;
            width:100px;
            height: 100px;
            background:radial-gradient(white 25%,black 30%);
            border-radius: 50%;
        }
        div::after{
            content:"";
            display: block;
            width:100px;
            height: 100px;
            background:radial-gradient(black 25%,white 30%);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>

13.折扇效果案例

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style: none;
        }

        ul{
            margin:10px auto;
            width: 600px;
            height: 400px;
            border:5px solid gray;
            position: relative;
        }

        li{
            width: 60px;
            height: 200px;
            position: absolute;
            left: 50%;
            margin-left: -30px;
            bottom: 30px;
            text-align: center;
            transform-origin: bottom center;

            /* 调整中心点 */

            border-radius: 10px;
            transition:all 2s;
        }
        /* 除了第7个， 其他的都透明 */

        ul li:not(:nth-child(7)) {
            opacity: 0;
        }

        ul:hover li {
            opacity: 1;
        }

        ul li:nth-child(1),ul li:nth-child(13){
            background:purple;
        }

        ul li:nth-child(2),ul li:nth-child(12){
            background:darkblue;
        }
        ul li:nth-child(3),ul li:nth-child(11){
            background:deeppink;
        }

        ul li:nth-child(4),ul li:nth-child(10){
            background:deepskyblue;
        }

        ul li:nth-child(5),ul li:nth-child(9){
            background:green;
        }

        ul li:nth-child(6),ul li:nth-child(8){
            background:yellow;
        }

        ul li:nth-child(7){
            background:red;
        }
        ul:hover li:nth-child(1){
            transform: rotate(90deg);
        }
        ul:hover li:nth-child(13){
            transform: rotate(-90deg);
        }
        ul:hover li:nth-child(2){
            transform: rotate(75deg);
        }
        ul:hover li:nth-child(12){
            transform: rotate(-75deg);
        }
        ul:hover li:nth-child(3){
            transform: rotate(60deg);
        }
        ul:hover li:nth-child(11){
            transform: rotate(-60deg);
        }
        ul:hover li:nth-child(4){
            transform: rotate(45deg);
        }
        ul:hover li:nth-child(10){
            transform: rotate(-45deg);
        }
        ul:hover li:nth-child(5){
            transform: rotate(30deg);
        }
        ul:hover li:nth-child(9){
            transform: rotate(-30deg);
        }
        ul:hover li:nth-child(6){
            transform: rotate(15deg);
        }
        ul:hover li:nth-child(8){
            transform: rotate(-15deg);
        }
    </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>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
    </ul>
</body>

14.2D属性–多属性值的书写

  • 写法是使用空格隔开，后面写的会覆盖前面写的，注意调整不同的顺序会出现不同的效果
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            border:2px solid gray;
        }

        .box div{
            width: 200px;
            height: 200px;
            background:red;
            border:1px solid black;
        }

        .box div:nth-child(1){
            transform: translateX(400px);
        }
        /*先位移后移动*/
        .box div:nth-child(2){
            transform: translateX(400px) scale(0.5);
        }

        /*先缩放,后移动*/
        .box div:nth-child(3){
            transform:  scale(0.5) translateX(400px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
  • 注意旋转后X,Y轴会改变

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            border:2px solid gray;
        }

        .box div{
            width: 100px;
            height: 100px;
            background:red;
            border:1px solid black;
        }

        .box div:nth-child(1){
            transform: translateX(400px);
        }
        .box div:nth-child(2){
            transform: translateX(400px) rotate(45deg);
        }

        .box div:nth-child(3){
            transform:  rotate(45deg) translateX(400px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

15.2D属性–倾斜

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            line-height: 200px;
            text-align: center;
            border:1px solid black;
            font-size: 50px;
            margin:0 auto;
            /* transform: skewY(30deg); */

            transform: skew(30deg,30deg);

            /* skewX 正值， 拽右下角， 往右边拉动， 形成30deg
            skewY
            skew(x,y) 正值， 拽右下角， 往右下边拉动， 形成30deg*/
        }
    </style>
</head>
<body>
    <div>kerwin</div>
</body>

16.明星资料卡案例

在这里插入图片描述

<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;
        }

        .box{
            width: 350px;
            border:5px solid red;
            margin:0 auto;
            position: relative;
            overflow: hidden;
        }

        .box img{
            width: 100%;
            transition:all 1s;
        }

        .box:hover img{
            transform: translateX(50px);
            opacity: 0.5;
        }

        .box h2{
            position: absolute;
            left: 50px;
            top:10px;
            color:white;
            transition:all 1s 1s;
        }

        .box:hover h2{
            /* left: 100px; */
            transform: translateX(100px);
        }

        .box p{
            position: absolute;
            left:50px;
            width: 100px;
            color:white;
            background: darkblue;
            transition:all 1s;
        }

        .box .p1{
            top:100px;
            transform: translateY(400px);
        }
        .box:hover .p1{
            /* top:100px; */
            transform: translateY(0px);
        }


        .box .p2{
            top:200px;
            transform:translateX(500px);
        }

        .box:hover .p2{
            transform:translateX(0px);
        }

        .box .p3{
            top:300px;
            transform: translateX(-500px);
        }
        .box:hover .p3{
            /* top:300px; */
            transform: translateX(0px);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/1.png" alt="">
        <h2>title</h2>
        <p class="p1">1111</p>
        <p class="p2">2222</p>
        <p class="p3">3333</p>
    </div>
</body>

在这里插入图片描述

<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;
        }
        .box{
            width: 350px;
            margin:0 auto;
            border:5px solid red;
            position: relative;
        }

        img,p,h2{
            transition:all 1s;
        }
        .box .pic{
            width: 100%;
        }
        .box:hover .pic {
            transform: translateY(-20px);
            opacity: 0.5;
        }

        .box h2{
            position: absolute;
            left:60px;
            top:100px;
            color:white;
            transform: translateY(-200px);
        }

        .box:hover h2{
            transform: translateY(0px);
        }

        .box p{
            position: absolute;
            bottom: 0px;
            left:80px;
            /* transform: translateY(30px); */
            opacity: 0;
        }
        .box:hover p{
            transform: translateY(-100px);
            opacity: 1;
        }

        .box .musicBtn{
            position: absolute;
            right: 10px;
            top:10px;
            width: 40px;
            height: 40px;
            
        }
        .box:hover .musicBtn{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/3.png" alt="" class="pic">
        <div>
            <h2>title</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non, nesciunt id, porro quo aliquam nisi obcaecati similique eaque suscipit natus modi distinctio eos aspernatur molestiae atque facere praesentium ut dolores!</p>
        </div>

        <img src="img/musicBtn.png" alt="" class="musicBtn">
    </div>
</body>
孤影&碧空
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS基础-11-文本缩进
weixin_63562705的博客
12-07 3790
一、文本样式 1.文本缩进: text-indent 2.文本水平对齐方式: text-align 3.文本修饰: text-decoration 2.1文本缩进 ★属性名:text-indent ★取值: ·数字+px ·数字+em (推荐: 1em =当前标签的font-size的大小) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
网页设计基础-HTML、CSS和JavaScript
01-10
网页设计基础-HTML、CSS和JavaScript 超星阅读
H5之动效
weixin_43852916的博客
11-02 420
动效
【一个让你停不下来的动效】——难道不来瞅瞅？（含源码+思路）
小新的博客
08-18 763
一个停不下来的动效！！！ 首先看静态的东西，我们可以把这个动效拆成容器，按钮和滑块 容器：在被点击时需要添加**css透视**和一定幅度的**Y轴旋转**， 按钮：选中和未选中的两种不同状态............
CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）
热门推荐
油墨香^-^的博客
06-22 3万+
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活，对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。 语法 CSS 代码: /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | bl
html如何设置图层间的层次,CSS Layers(层级)
weixin_36184985的博客
06-17 2772
CSS Layers(层级)CSS z-index属性可以与position属性结合使用，以创建诸如Photoshop之类的图层效果。使用z-index属性在图层中层叠元素通常将HTML页面视为二维页面，因为文本，图像和其他元素在页面上排列而没有重叠。但是，除了它们的水平和垂直位置外，还可以使用CSS z-index属性沿z轴堆叠盒子，也就是一个堆叠在另一个堆叠之上。该属性指定一个盒子，其堆叠水平...
【HTML基础-4】CSS样式详解
m0_64378913的博客
03-27 2201
目录1 CSS样式概述2 CSS与HTML的三种组合方式2.1 内联样式2.2 内部样式表2.3 外部引用3 总结参考文章 1 CSS样式概述 定义： CSS是Cascading Style Sheets的简称，中文名称为层叠样式表、级联样式表或样式表。 作用：实现内容与样式相分离，提高代码的可重用性和可维护性。 CSS样式：①元素内容的颜色color；元素内容的背景色background-color；③字体大小font-size等等。 CSS与HTML： 对比关系：HTML好比好比定义了一个文章
HTML5 + CSS3
坏蛋阿土的博客
10-29 8426
HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言。 HTML不是一种编程语言，而是一种标记语言(markup language)。 标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义∶ 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。浏
零基础学习CSS---04.CSS列表属性详解
m0_52136934的博客
10-20 3610
零基础学习CSS---04.CSS列表属性（list-style-type、list-style-image、list-style-position、list-style复合写法）详解。
jQuery基础----修改CSS样式
u011863822的博客
07-21 5061
本篇就是简单的聊一写css操作，或者说是简单的演示。其中有css()操作属性的三种不同，以及addClass，removeClass，还有最神奇的操作toggleClass切换状态的神奇操作。
HTML-CSS结合-基础讲解2022优秀文档.ppt
11-14
HTML-CSS结合-基础讲解2022优秀文档.ppt
HTML5+CSS3入门基础知识
12-29
HTML5+CSS3入门基础知识 HTML5 是下一代的 HTML 标准，旨在提高网页的可读性、可访问性和可维护性。CSS3 是最新的样式表语言标准，旨在提高网页的视觉效果和用户体验。本节课程将介绍 HTML5 和 CSS3 的基础知识，...
html5 css3 简单基础知识笔记
01-27
html5 css3 简单基础知识笔记
HTML - DIV+CSS
10-17
HTML - DIV+CSS 课件，DIV标签介绍 CSS基础 MARGIN,PADDING介绍 BORDER介绍 FLOAT介绍 综合练习
【HTML-CSS】概念及介绍
joker_Ling的博客
11-17 236
表单标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <!-- from(表单标签)：用于定义表单的,可以定义一个范围，这个范围代表 * 属性 * action：指定提交数据的URL
动画的js动画于css3区别？
最新发布
tianxianghuiwei的博客
06-14 308
总体来说，选择CSS3动画还是JavaScript动画取决于你的具体需求和项目的情况。对于简单的动画效果，推荐使用CSS3动画以获得更好的性能和简便性；而对于复杂的动画逻辑或需要更精细控制的情况，则使用JavaScript动画可能更合适。所有用户在使用是要根据需求进行选择，希望可以帮到大家。
404 页面代码
梦寻汝的博客
06-12 330
【代码】404 页面代码。
css3新增伪元素有哪些？
tianxianghuiwei的博客
06-13 353
这些伪元素允许开发者通过 CSS 控制页面上特定部分的样式和内容，例如添加装饰性内容或改变选中文本的样式。使用伪元素可以增强页面的视觉效果和交互性。CSS3 中引入了一些新的伪元素，用于向文档添加特定样式或内容。
HTML5+CSS3网站设计基础教程
11-01
HTML5+CSS3网站设计基础教程是一本介绍如何使用HTML5和CSS3来设计网站的教材。HTML5是一种用于创建网页的标准语言，而CSS3则是一种用于控制网页样式和布局的语言。这本教材主要包括以下内容： 1. HTML5和CSS3的基础...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值