css 实现相关案例

i小杨

已于 2024-08-22 10:29:10 修改

阅读量420

点赞数

文章标签： css 前端 javascript

于 2023-10-06 14:34:44 首次发布

本文链接：https://blog.youkuaiyun.com/i_Satan/article/details/133611217

版权

css 实现相关案例

抽屉案例(带吸附箭头)

<template>
  <div class="container">
    <div class="main-box">
      <div class="left-box">左边盒子</div>
      <!--下面两种方式皆可实现展示和隐藏  -->
      <div :style="{ flex: fontflag ? 1 : 0 }" class="right-box">
        <!-- <div :style="{ width: fontflag ? '300px' : 0 }" class="right-box"> -->
        <div class="right-content" v-if="fontflag">
          将需要<b>动态展示的内容</b>放在该元素中
          <slot></slot>
        </div>
        <i @click="fontclickHandler" class="fontflag el-icon-caret-left"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fontflag: true,
    };
  },
  methods: {
    fontclickHandler() {
      this.fontflag = !this.fontflag;
    },
  },
};
</script>

<style lang="scss" scoped>
.main-box {
  display: flex;
  padding: 20px;
  height: 100vh;
  .left-box {
    background-color: pink;
    flex: 5;
    margin-right: 20px;
  }
  .right-box {
    position: relative;
    background-color: tomato;
    transition: all 1s;
    .right-content {
      height: 100%;
      overflow: auto;
    }
    .fontflag {
      display: inline-block;
      width: 15px;
      height: 60px;
      background-color: lightblue;
      text-align: center;
      line-height: 60px;
      border-radius: 10px 0 0 10px;
      position: absolute;
      left: -15px;
      top: calc(100vh / 2);
    }
  }
}
</style>

css 好用的伪类选择器

:focus-within 当有元素被选中时，被选中的元素及后代元素发生聚焦事件时，css 样式生效。
:has(表达式) 当选中元素，符合表达式时 css 样式生效。
::selection 当文本被选中时 css 样式生效。
::first-letter 只对文本首字母 css 样式生效。

<!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>
      .label {
        text-align: center;
      }
      input:focus {
        outline-color: lightblue;
      }
      .label:focus-within {
        background-color: tomato;
      }
      .label span:has(+ input[data-required])::after {
        content: "*";
        color: tomato;
      }
      .content::selection {
        color: tomato;
        background-color: pink;
      }

      .content::first-letter {
        color: tomato;
        font-weight: bolder;
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <div class="label">
      <span>姓名</span>
      <input data-required type="text" />
    </div>
    <div class="label">
      <span>姓名</span>
      <input type="text" />
    </div>
    <div class="label">
      <span>姓名</span>
      <input data-required type="text" />
    </div>

    <p class="content">
      噫吁嚱，危乎高哉！ 蜀道之难，难于上青天！ 蚕丛及鱼凫，开国何茫然！
      尔来四万八千岁，不与秦塞通人烟。
    </p>
  </body>
</html>

按钮固定

.stickyHeaderButton {
  position: sticky;
  top: 0px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  text-align: right;
  z-index: 99;
}

css 给元素添加蒙层效果

实现: 利用元素的后缀伪元素 实现这一效果.

<!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>study-practice</title>
    <style>
      .box {
        border: dashed #ccc 1px;
        width: 500px;
        height: 500px;
        margin: 0 auto;
        background-color: tomato;
      }
      .box::after {
        background: hsla(0, 0%, 100%, 0.45);
        content: "";
        height: calc(100% - 6px);
        left: 0;
        margin: 3px;
        position: absolute;
        top: 0;
        width: calc(100% - 6px);
        z-index: 1999;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

flex 布局，横向滚动条（不压缩）

关键属性：给子元素添加 flex-shrink: 0; 属性.

<template>
  <div class="flexdemo">
    <div class="item" v-for="item in 10" :key="item"></div>
  </div>
</template>

<style lang="scss" scoped>
  .flexdemo {
    display: flex;
    overflow: auto; // 横向滚动条
    .item {
      width: 300px;
      height: 400px;
      border-radius: 10px;
      background-color: tomato;
      margin: 0 10px;
      flex-shrink: 0; //  关键属性 ，加了之后就会出现横向滚动条，不会压缩。
      // 看对比效果可以把最后一行css注释。
    }
  }
</style>

css 根据不同状态展示不同样式(案例实现)

思路: 通过给 dom 元素添加不同的 自定义属性, 然后通过 css 属性选择器 匹配到该元素, 并给其添加样式

<!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>study-practice</title>
    <style>
      #box {
        display: flex;
        flex-wrap: wrap;
      }
      /* 重要代码 */
      div[data-lv="1"] {
        background-color: tomato;
      }
      div[data-lv="2"] {
        background-color: lightblue;
      }
      div[data-lv="3"] {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <!-- 平替写法 (自定义属性) -->
    <!-- <div data-lv="1"></div>
    <div data-lv="2"></div>
    <div data-lv="3"></div> -->
    <script type="module">
      let box = document.getElementById("box");
      for (let i = 0; i < 10; i++) {
        let item = document.createElement("div");
        item.style.width = "200px";
        item.style.height = "200px";
        item.innerText = i;
        // 重要代码  vue 可以通过在标签上 添加属性, 然后通过 v-bind 绑定到属性上, 实现动态添加属性
        item.setAttribute("data-lv", i);
        box.appendChild(item);
      }
    </script>
  </body>
</html>

css 实现文字横向滚动效果

利用 marquee 标签实现文字横向滚动效果 (废弃标签，不推荐使用)
利用 css 动画实现文字横向滚动效果

marquee 标签@mdn 官方文档

css 动画实现文字横向滚动效果@IT 黄大大

<template>
  <div class="container">
    <!-- 利用原生 html 标签实现问文字横向滚动效果 -->
    <marquee>天生我材必有用</marquee>
    <!-- 利用纯 css 实现文字横向滚动效果 -->
    <div class="hdd" style="">
      <p class="gundong">
        千金散尽还复来千金散尽还复来千金散尽还复来千金散尽还复来千金散尽还复来千金散尽还复来千金散尽还复来
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Helloworld",
    components: { Drawer },
    mounted() {},

    data() {
      return {};
    },
    methods: {},
  };
</script>

<style lang="scss" scoped>
  .hdd {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ff6700;
    overflow: hidden;
  }

  .gundong {
    padding-left: 20px;
    font-size: 12px;
    color: #000;
    display: inline-block;
    white-space: nowrap;
    animation: 10s wordsLoop linear infinite normal;
  }

  .gundong:hover {
    /* 设置动画是否暂停 paused暂停*/
    animation: 10s wordsLoop linear infinite paused;
  }

  @keyframes wordsLoop {
    0% {
      transform: translateX(200px);
      -webkit-transform: translateX(200px);
    }

    100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
    }
  }

  @-webkit-keyframes wordsLoop {
    0% {
      transform: translateX(200px);
      -webkit-transform: translateX(200px);
    }

    100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
    }
  }
</style>