【每日CSS3代码】

牛小小小婷～

已于 2023-03-03 23:34:30 修改

阅读量2.7k

点赞数 4

分类专栏：面试文章标签： css3 css 前端

于 2023-01-28 22:04:46 首次发布

本文链接：https://blog.csdn.net/hannah2233/article/details/128758758

版权

面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

- 1-18 进度条【2023/3/3】

1-1 两栏布局【1/27】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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;
    }
      .outer {
        height: 100px;
        margin-bottom: 10px;
    }
    .left {
        background: tomato;
        height: 100px;
    }
    .right {
        background: gold;
        height: 100px;
    }
    /* 浮动 */
    .outer1 .left {
        width: 200px;
        float: left;
        /* margin-top: 30px; */
    }
    .outer1 .right {
        width: auto;
        margin-left: 200px;
    }
    /* flex */
    .outer2 {
        display: flex;
    }
    .outer2 .left {
        flex-grow: 0;    /* // flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
        flex-shrink: 0;  /* flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 */
        flex-basis: 200px;
    }
    .outer2 .right {
        flex: auto; /* 1 1 auto */
    }
    /* position */
    .outer3 {
        position: relative;
    }
    .outer3 .left {
        position: absolute;
        width: 200px;
    }
    .outer3 .right {
        margin-left: 200px;
    }
    /* position again */
    .outer4 {
        position: relative;
    }
    .outer4 .left {
        width: 200px;
    }
    .outer4 .right {
        position: absolute;
        top: 0;
        left: 200px;
        right: 0;
    }  
    </style>
</head>
<body>
    <!-- 垂直两栏，左边固定右边自适应 -->
    <div class="outer outer1">
        <p class="left">1-left</p>
        <p class="right">1-right</p>
    </div>
    <div class="outer outer2">
        <p class="left">2-left</p>
        <p class="right">2-right</p>
    </div>
    <div class="outer outer3">
        <p class="left">3-left</p>
        <p class="right">3-right</p>
    </div>
    <div class="outer outer4">
        <p class="left">4-left</p>
        <p class="right">4-right</p>
    </div>
</body>
</html>

1-2 三栏布局【1/28、29双飞翼，圣杯】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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;
        }
        .outer{
          margin-top: 40px;   
        }
        .left {
            height: 20px;
            background-color: aqua;
        }
        .center {
            height: 20px;
            background-color:brown;
        }
        .right {
            height: 20px;
            background-color:blue;
        }

        /* // flex */
        .outer1 {
            display: flex;
        }
        .outer1 .left{
            width: 200px;
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: auto;
        }
        .outer1 .center {
            width: auto;
            flex: 1 1 auto;
        }
        .outer1 .right {
            width: 200px;
            flex: none;
        }


        /* postion */
        .outer2 {
            position: relative;
        }
        .outer2 .left {
            position: absolute;
            width: 200px;
        }
        .outer2 .right {
            position: absolute;
            width: 200px;
            top:0;
            right:0;
        }
        .outer2 .center{
            margin-left: 200px;
            margin-right: 200px;
        }

    
        /* 浮动 */
        /* .outer3 {
            position: relative;
        } */
        .outer3 .left {
            float:left;
            width: 200px;
        }
        .outer3 .right {
            float: right;
            width: 200px;
        }
        .outer3 .center{
            margin: 0 200px 0 200px;
        }


        /* 圣杯布局 ： 浮动+负边距 : 和三栏布局要求相同，不过中间列要写在前面保证优先渲染*/
        .outer4 {
            padding: 0 200px 0 100px;
        }
        .outer4 .center {
            width: 100%;
            float: left;
        }
        .outer4 .left {
            width: 100px;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }
        .outer4 .right {
            width: 200px;
            float: left;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
       

        /* 双飞翼  :和三栏布局要求相同，不过中间列要写在前面保证优先渲染*/
        .outer5 {
            margin-top: 100px;
        }
        .outer5 .center {
            width: 100%;
            float: left;
        }
        .outer5 .middle {
            margin: 0 200px 0 100px;
        }
        .outer5 .left {
            width: 100px;
            float: left;
            margin-left: -100%;
        }
        .outer5 .right {
            width: 200px;
            float: left;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="outer outer1">
        <p class="left"></p>
        <p class="center"></p>
        <p class="right"></p>
    </div>
    <div class="outer outer2">
        <p class="left"></p>
        <p class="center"></p>
        <p class="right"></p>
    </div>
    <div class="outer outer3">
        <p class="left"></p>
        <p class="right"></p>
        <p class="center"></p>
    </div>
    <div class="outer outer4">
        <p class="center">圣杯-center</p>
        <p class="left">圣杯-left</p>
        <p class="right">圣杯-right</p>
    </div>
    <div class="outer outer5">
        <div class="center">
            <p class="middle">双飞翼布局-center</p>
        </div>
        <p class="left">双飞翼布局-left</p>
        <p class="right">双飞翼布局-right</p>
    </div>
</body>
</html>

1-3 实现三角形【2023/1/30】

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <title>三角形</title>
  <style type="text/css">
    .triangle {
    		height: 0px;
    		width: 0px;
            border-top:200px solid red;
            border-left:400px solid blue;
            border-bottom:200px solid green;
            border-right:400px solid transparent;
    }
    .box1, .box2, .box3, .box4 {
      height: 0px;
      width: 0px;
      border-style: solid;
      margin: 10px;
    }
    .box1 { /* 等腰直角 */
      border-width: 100px;
      border-color: tomato transparent transparent transparent;
    }
    .box2 { /* 等边 */
      border-width: 100px 173px;
      border-color: transparent tomato transparent transparent;
    }
    .box3 { /* 等腰 */
      border-width: 100px 80px;
      border-color: transparent transparent tomato transparent;
    }
    .box4 { /* 其他 */
      border-width: 100px 90px 80px 70px;
      border-color: transparent transparent transparent tomato;
    }
</style>
</head>
<body>
  <div class="triangle"></div>
  <p class="box1"></p>
  <p class="box2"></p>
  <p class="box3"></p>
  <p class="box4"></p>
</body>
</html>

1-4 块级子元素水平垂直居中【2023/1/31】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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>
        .parent {
            height: 200px;
            width: 200px;
            margin-top: 30px;
            background-color: aqua;
        }
        .child {
            width: 50px;
            height: 50px;
            background-color:black;
        }

        /* position和margin居中 */
        .parent1 {
            position: relative;
        }
        .child1 {
            position: absolute;
            top: 0;
            left:0;
            right: 0;
            bottom:0;
            margin: auto;
        }

        /* position和transform居中 */
        .parent2 {
            position: relative;
        }
        .child2 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        /* flex居中 */
        .parent3 {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child3 {
          /* align-self:center; */
        }

        /* * 通过 position 和 margin 居中 */
        .parent4 {
            position: relative;
        }
        .child4 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -25px;
        }
    </style>
</head>
<body>
    <!-- position和margin居中 -->
   <div class="parent parent1">
    <div class="child child1"></div>
   </div> 
   <div class="parent parent2">
    <div class="child child2"></div>
   </div> 
   <div class="parent parent3">
    <div class="child child3"></div>
   </div> 
   <!-- * 通过 position 和 margin 居中:知道子盒子宽高 -->
   <div class="parent parent4">
    <div class="child child4"></div>
   </div> 
</body>
</html>

1-5实现自适应的正方形【2023/2/1】

在这里插入图片描述


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      /* 都是像对于屏幕宽度的比例 */
      .square1 {
        width: 10%;
        height: 10vw;
        background: red;
      }
      /* margin/padding 百分比是相对父元素 width 的 */
      .square2 {
        width: 20%;
        height: 0;
        padding-top: 20%;
        background: orange;
      }
      /* 通过子元素 margin */
      .square3 {
        width: 30%;
        overflow: hidden; /* 触发 BFC */
        background: yellow;
      }
      .square3::after {
        content: '';
        display: block;
        margin-top: 100%; /* 高度相对于 square3 的 width */
      }
</style>
  </head>
  <!-- 画一个正方形 -->
  <body>
    <p class="square1"></p>
    <p class="square2"></p>
    <p class="square3"></p>
  </body>
</html>

1-6 清除浮动【2023/2/2】

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <title>清除浮动</title>
  <style type="text/css">
    .outer {
      width: 200px;
      background: tomato;
      margin: 10px;
      position: relative;
    }
    .inner {
      height: 100px;
      width: 100px;
      background: pink;
      margin: 10px;
      float: left;
    }
    /* 伪元素 */
    .outer1::after {
      content: '';
      display: block;
      clear: both;
    }
    /* 创建 BFC */
    .outer2 {
      overflow: hidden;
    }
</style>
</head>
<body>
  <p class="outer outer1">
    <p class="inner"></p>
  </p>
  <p class="outer outer2">
    <p class="inner"></p>
  </p>
</body>
</html>

1-7 实现滚动条导航栏【2023/2/3】

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 方法一： inline-block以及 */
        div:nth-child(1){
            border: 1px solid red;
            height: 30px;
            padding: 3px;
            overflow-x: auto;
            white-space: nowrap;           /* 记住这行代码 */
        } 
        div:nth-child(1)::-webkit-scrollbar {           /* 记住这行代码 */
            display: none;
        }
        div:nth-child(1) .item{
            display: inline-block;
            width: 200px;
            height: 20px;
            background-color: #eee;
        }

        /* 方法二：  */
        div:nth-child(2){
            display: flex;
            border: 1px solid black;
            height: 30px;
            padding: 3px;
            overflow-x: auto;
            white-space: nowrap;           /* 记住这行代码 */
        } 
        div:nth-child(2)::-webkit-scrollbar{           /* 记住这行代码 */
            display: none;
        }
        div:nth-child(2) .item{
            height: 20px;
            flex: 0 0  200px;
            margin-right: 20px;
            background-color: red;
        }
    </style>
</style>
</head>
<!-- 水平滚动导航栏 -->
<body>
    <div>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
    </div>
    <div>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
    </div>
</body>
</html>

1-8 hover下拉菜单【2023/2/4】

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<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>
        .positi{
            position: relative;
        }
        .dropDown {
            position: absolute;
            top: 20px;
            width: 100px;
            background-color: #eee;
            border: 1px solid red;
            display: none;

        }
        .positi:hover .dropDown {
                display: block;
        }
        li{
            list-style: none;
        }
        
    </style>
</head>
<body>
    <div class="positi">
        <button>下拉菜单</button>
        <div class="dropDown">
            <li><a href="">菜单一</a></li>
            <li><a href="">菜单一</a></li>
            <li><a href="">菜单一</a></li>
        </div>
    </div>
    <script>
        
    </script>
</body>
</html>

1-9 onclick下拉菜单【2023/2/5】

classList.toggle/contains/remove

<!DOCTYPE html>
<html lang="en">
<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>
        .dropdown .show {
            display: block;
        }
        .dropdown-content {
            display: none;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">下拉菜单</button>
        <div id="myDropdown" class="dropdown-content">
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </div>
        </div>
    <script>
        /* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
        function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
        }

        // 点击下拉菜单意外区域隐藏
        window.onclick = function(event) {
            if (!event.target.matches('.dropbtn')) {
                var dropdowns = document.getElementsByClassName("dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }    

    </script>
</body>
</html>

1-10 css实现轮播图片【2023/2/6】

请添加图片描述

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

<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>轮播图</title>
</head>
<!-- style 里面是css样式 因为代码较少就没有再次创建 -->
<style>
    /* 盒子1的样式 */
    .box1 {
        width: 722px;
        height: 358px;
        margin: 0 auto;
        /* 超出的位置将隐藏并且不占位 */
        overflow: hidden;
        background-color: red;
    }

    .box {
        width: 2200px;
        height: 352px;
        animation: move 4s infinite;
    }

    @keyframes move {
        0% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(-722px);
        }

        75% {
            transform: translateX(-1422px);
        }
        100% {
            transform: translateX(-1422px);
        }
    }

    .box img {
        float: left;
        height: 352px;
        width: 722px;
    }
</style>

<body>
    <div class="box1">
        <div class="box">
            <img src="https://yiyaobingo.oss-cn-beijing.aliyuncs.com/typora/5.21img1202301301420412.png" alt="">
            <img src="https://yiyaobingo.oss-cn-beijing.aliyuncs.com/typora/5.21img1202212162306119.png" alt="">
            <img src="https://yiyaobingo.oss-cn-beijing.aliyuncs.com/typora/5.21img1202212162305364.png" alt="">
        </div>
    </div>
</body>

</html>

1-10 渐变实现轮播图片【2023/2/7】`

<!DOCTYPE html>
<html lang="en">
<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>轮播图</title>
</head>
<!-- style 里面是css样式 因为代码较少就没有再次创建 -->
<style>
    /* 盒子1的样式 */
    .focus{
        margin:0 auto;
        width: 700px;
        height: 322px;
        animation: focus 20s infinite;
    }
    @keyframes focus {
       0%{
         background-image: url("https://yiyaobingo.oss-cn-beijing.aliyuncs.com/typora/5.21img1202301301420412.png");
       }
       50%{
        background-image: url("https://yiyaobingo.oss-cn-beijing.aliyuncs.com/typora/5.21img1202212162306119.png");
       }
       100%{
        background-image: url("https://yiyaobingo.oss-cn-beijing.aliyuncs.com/typora/5.21img1202212162305364.png");
       }
    }
</style>
<body>
    <div class="focus">
            <!-- <img src="" alt="">
            <img src="" alt="">
            <img src="" alt=""> -->

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

1-11 字体多行显示省略号【2023/2/8】

<!DOCTYPE html>
<html lang="en">
<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>
        .p3 {
            margin-top: 10px;
            color: rgb(129, 128, 128);
            -webkit-line-clamp: 1; /*【此处控制显示行数】*/
            -webkit-box-orient: vertical;
            overflow: hidden;
            display: -webkit-box;
          }
    </style>
   
    
</head>
<body>
    <span class="p3">yhfdsjbdjksf非哟杜师傅不过事故发生的开发和不断思考嘎你你在干涉么我什么也没有做呀</span>
</body>
</html>

1-12 隐藏元素【2023/2/9】

overflow: hidden; : 防止溢出，把超出范围的元素隐藏，一般用于文字过多或者图片特效以及自适应中div没法设置高度时使用
display: none;
opacity: 0;
- 表示元素的透明度，将元素的透明度设置为0之后，元素也是隐藏的
visibility: hidden;
- 元素在页面消失后，其占据的空间依旧保留，只会导致浏览器重绘而不会重排
position 定位：放置在可视区域外，不会影响布局，能够让元素保持可操作性
```
.box{
	position：absolutely；
	top：-4555px；
	left：-45545px
}
```
设置height，width等盒模型属性为0

.hiddenBox {
     margin:0;
     border:0;
     padding:0;
     height:0;
     width:0;
     overflow:hidden;
}

1-12 前端实现红绿灯

1-12-1 简易实现【2023/2/10】

<script>
function timeout(){
    return new Promise(function(resolve,reject){
        setTimeout(resolve,1000,"绿灯");
}
function timeout2(){
    return new Promise(function(resolve,reject){
        setTimeout(resolve,2000,"黄灯");
    })
}
function timeout3(){
    return new Promise(function(resolve,reject){
        setTimeout(resolve,3000,"红灯");
    })
}
(function restart(){
    timeout().then((value)=>{
        console.log(value);
    })
    timeout2().then((value)=>{
        console.log(value);
    })
    timeout3().then((value)=>{
        console.log(value);
        restart();
    })
})()
</script>

1-12-2 Promise+async/await【2023/2/11】

<script>
	   function timer(current, delay, next) {
        return new Promise((resolve) => {
            console.log(`当前是${current}灯，${delay}秒后变成${next}灯`);
            setTimeout(() => {
            resolve();
            }, delay * 1000);
        });
        }

        async function lingt() {
        await timer("红", 3, "绿");
        await timer("绿", 5, "黄");
        await timer("黄", 2, "红");
        await lingt();
        }
        lingt();
</script>

1-12-2 Promise【2023/2/12】

<script>
	  function red() {
    console.log("当前红灯");
    }
    function green() {
    console.log("当前绿灯");
    }
    function yellow() {
    console.log("当前黄灯");
    }

    function lingt(fn, timer) {
    return new Promise((resolve) => {
        fn();
        setTimeout(() => {
            resolve();
        }, 1000 * timer);
    });
    }

    function step() {
    Promise.resolve()
        .then(() => {
        return lingt(red, 3); //红灯3秒
        })
        .then(() => {
        return lingt(green, 5); //绿灯5秒
        })
        .then(() => {
        return lingt(yellow, 2); //黄灯2秒
        })
        .then(() => {
        return step();
        });
    }

    step();
</script>

1-13 扇形【2023/2/13】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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>
    /* 通过 border 和 border-radius 实现 1/4 圆 */
    .sector1 {
        height: 0;
        width: 0;
        border: 100px solid;
        border-radius: 50%;
        border-color: turquoise tomato tan thistle;
    }

    /* 通过子元素 rotateZ 和父元素 overflow: hidden 实现任意弧度扇形（此处是60°） */
    .sector3 {
        height: 100px;
        width: 100px;
        border-top-right-radius: 100px;
        overflow: hidden;
        /* background: gold; */
    }
    .sector3::after {
        content: '';
        display: block;
        height: 100px;
        width: 100px;
        background: tomato;
        transform: rotateZ(-30deg);
        transform-origin: left bottom;
    }
    /* 通过 skewY 实现一个60°的扇形 */
    .sector4 {
        height: 100px;
        width: 100px;
        border-top-right-radius: 100px;
        overflow: hidden;
    }
    .sector4::after {
        content: '';
        display: block;
        height: 100px;
        width: 100px;
        background: tomato;
        transform: skewY(-30deg);
        transform-origin: left bottom;
    }
    /* 通过渐变设置60°扇形 */
    .sector5 {
        height: 200px;
        width: 200px;
        background: tomato;
        border-radius: 50%;
        background-image: linear-gradient(150deg, transparent 50%, #fff 50%),
        linear-gradient(90deg, #fff 50%, transparent 50%);
    }
    </style>
</head>
<body>
    <div style="display: flex; justify-content: space-around;">
        <p class="sector1"></p>
        <p class="sector3"></p>
        <p class="sector4"></p>
        <p class="sector5"></p>
    </div>
</body>
</html>

1-14 弹出框【2023/2/17】

<!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>Document</title>
    <style>
        .bg {
            height: 666px;
            width: 100%;
            font-size: 60px;
            text-align: center;
        }
        .dialog {
            z-index: 999;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
        }
        .dialog .content {
            min-height: 300px;
            width: 600px;
            background: #fff;
            border-radius: 5px;
            border: 1px solid #ebeef5;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
</style>
</head>
<body>
    <div class="bg">
        页面内容
    </div>
    <div class="dialog">
        <p class="content">
            弹出框
        </p>
    </div>
</body>
</html>

1-15 梯形【2023/2/18】

.tab {
    width: 300px;
    height: 80px;
    position: relative;
    margin: 100px auto;
    font-size: 60px;
    text-align: center;
}
 
.tab::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: red;
    transform: perspective(.5em) rotateX(5deg);
}

请添加图片描述

1-16 画一条0.5px的线【2023/2/19】

transform: scale(0.5,0.5);

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果

1-17 【2023/2/19】前端文字竖向排列

直接使用css属性：writing-mode（最直接）

#text{
	writing-mode:vertical-rl;
	// writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向
}

设置width为一个字的font-size大小（比较灵活）

#text{
	font-size:30rpx;
	width:30rpx;
}

1-18 进度条【2023/3/3】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <!-- 利用 HTML style 属性填写完整的 width 值，譬如 <div class="g-progress" style="width: 50%"></div>
或者利用 CSS 自定义属性 <div class="g-progress" style="--progress: 50%"></div> 配合实际 CSS 中的 width: var(--progress)
完全的自定义样式，以及可以轻松的添加辅助丰富的动画和交互效果 -->
    <div class="g-container">
        <div class="g-progress">

        </div>
    </div>
    <style>
        .g-container {
            width: 240px;
            height: 25px;
            border-radius: 25px;
            background: #eee;
        }
        .g-progress {
            width: 50%;
            height: inherit;
            border-radius: 25px 0 0 25px;
            background: #0f0;
            transition: width .2s linear;
            background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
        }
    </style>

<div class="g-progress2"  style="--progress: 70%"></div>
<style> 
@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.g-progress2 {
    margin: auto;
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
    border: 1px solid #eee;
    transition: .3s --progress;
}

</style>
</body>
</html>

牛小小小婷～

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【每日CSS3代码】

1-1 两栏布局【1/27】1-2 三栏布局【1/28、29双飞翼，圣杯】1-3 实现三角形【2023/1/30】1-4 块级子元素水平垂直居中【2023/1/31】1-5实现自适应的正方形【2023/2/1】1-6 清除浮动【2023/2/2】1-7 实现滚动条导航栏【2023/2/3】1-8 hover下拉菜单【2023/2/4】1-9 onclick下拉菜单【2023/2/5】1-10 css实现轮播图片【2023/2/6】1-10 渐变实现轮播图片【2023/2/7】`1-11
复制链接

扫一扫