10个css小技巧

南风number

于 2022-06-14 10:48:57 发布

阅读量220

点赞数 1

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45730243/article/details/125273475

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、打字效果

在这里插入图片描述
代码

<!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>
      .typing {
        height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .typing-effect {
        width: 22ch;
        white-space: nowrap;
        overflow: hidden;
        border-right: 3px solid;
        font-family: monospace;
        font-size: 2em;
        animation: typing 2s steps(12), effect 0.5s step-end infinite alternate;
      }

      @keyframes typing {
        from {
          width: 0;
        }
      }

      @keyframes effect {
        50% {
          border-color: transparent;
        }
      }
    </style>
  </head>
  <body>
    <div class="typing">
      <div class="typing-effect">你好，coderMoney</div>
    </div>
  </body>
</html>

二、透明图片阴影效果

在这里插入图片描述
代码

<!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>
      .transparent-shadow {
        height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .margin-right {
        margin-right: 2em;
      }

      .margin-bottom {
        margin-bottom: 1em;
      }

      .align-center {
        text-align: center;
      }

      .box-shadow {
        box-shadow: 2px 4px 8px #3723a1;
      }

      .drop-shadow {
        filter: drop-shadow(2px 4px 8px #3723a1);
      }
    </style>
  </head>
  <body>
    <div class="transparent-shadow">
      <div class="margin-right">
        <div class="margin-bottom align-center">box-shadow</div>

        <img
          class="box-shadow"
          src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png"
          alt="box-shadow example (transparent)"
        />
      </div>

      <div>
        <div class="margin-bottom align-center">drop-shadow</div>

        <img
          class="drop-shadow"
          src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png"
          alt="drop-shadow example (transparent)"
        />
      </div>
    </div>
  </body>
</html>

三、自定义 Cursor

在这里插入图片描述
代码

<!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>
      .custom-cursor {
        display: flex;
        height: 80vh;
        align-items: center;
        justify-content: center;
        background: #f3f3f3;
        padding: 0 10px;
      }

      .card {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #d29a5a;
        margin-right: 10px;
        color: #fff;
        font-size: 1.4em;
        text-align: center;
      }

      .card-image-cursor {
        background-color: #d11a5a;
        cursor: url("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ac1d8cb2b1b46a384e986a7461df26a~tplv-k3u1fbpfcp-watermark.image?"),
          auto;
      }

      .card-emoji-cursor {
        background-color: #d29b22;
        cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='48' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"),
          auto;
      }
    </style>
  </head>
  <body>
    <div class="custom-cursor">
      <div class="card">Default</div>

      <div class="card card-image-cursor">Image</div>

      <div class="card card-emoji-cursor">Emoji</div>
    </div>
  </body>
</html>

四、attr() 展示 tooltip

在这里插入图片描述
代码

<!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>
      .custom-cursor {
        display: flex;
        height: 80vh;
        align-items: center;
        justify-content: center;
        background: #f3f3f3;
        padding: 0 10px;
      }

      .card {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #d29a5a;
        margin-right: 10px;
        color: #fff;
        font-size: 1.4em;
        text-align: center;
      }

      .card-image-cursor {
        background-color: #d11a5a;
        cursor: url("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ac1d8cb2b1b46a384e986a7461df26a~tplv-k3u1fbpfcp-watermark.image?"),
          auto;
      }

      .card-emoji-cursor {
        background-color: #d29b22;
        cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='48' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"),
          auto;
      }
    </style>
  </head>
  <body>
    <div class="custom-cursor">
      <div class="card">Default</div>

      <div class="card card-image-cursor">Image</div>

      <div class="card card-emoji-cursor">Emoji</div>
    </div>
  </body>
</html>

五、核算清单

在这里插入图片描述
代码

<!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>
      .checklist {
        padding: 50px;
        position: relative;
        background: #043b3e;
        border-top: 50px solid #03a2f4;
      }
      .checklist h2 {
        color: #f3f3f3;
        font-size: 25px;
        padding: 10px 0;
        margin-left: 10px;
        display: inline-block;
        border-bottom: 4px solid #f3f3f3;
      }
      .checklist label {
        position: relative;
        display: block;
        margin: 40px 0;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
      }
      .checklist input[type="checkbox"] {
        -webkit-appearance: none;
      }
      .checklist i {
        position: absolute;
        top: 2px;
        display: inline-block;
        width: 25px;
        height: 25px;
        border: 2px solid #fff;
      }
      .checklist input[type="checkbox"]:checked ~ i {
        top: 7px;
        height: 11px;
        width: 25px;
        border-top: none;
        border-right: none;
        transform: rotate(-45deg);
      }
      .checklist span {
        position: relative;
        left: 40px;
        transition: 0.5s;
      }
      .checklist span:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: #fff;
        transform: translateY(-50%) scaleX(0);
        transform-origin: left;
        transition: transform 0.5s;
      }
      .checklist input[type="checkbox"]:checked ~ span:before {
        transform: translateY(-50%) scaleX(1);
        transform-origin: right;
        transition: transform 0.5s;
      }
      .checklist input[type="checkbox"]:checked ~ span {
        color: #154e6b;
      }
    </style>
  </head>
  <body>
    <div class="checklist">
      <h2>任务列表</h2>
      <label>
        <input type="checkbox" name="" id="" />
        <i></i>
        <span>任务一:吃饭</span>
      </label>
      <label>
        <input type="checkbox" name="" id="" />
        <i></i>
        <span>任务二:睡觉</span>
      </label>
      <label>
        <input type="checkbox" name="" id="" />
        <i></i>
        <span>任务三:喝水</span>
      </label>
    </div>
  </body>
</html>

六、_使用:is和:where添加元素样式

在这里插入图片描述
代码

<!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>
        :where(h2,h3,h4) > b {
            color: blue;
        }
        :is(h2):where(.content-title) {
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <h2 class="content-title">Header 2 <b>content title</span></h2>
</body>
</html>

七、手风琴效果

在这里插入图片描述
代码

<!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>
      main {
        max-width: 400px;
        margin: 0 auto;
      }
      p {
        text-align: justify;
        font-family: monospace;
        font-size: 13px;
      }
      summary {
        font-size: 1rem;
        font-weight: 600;
        background-color: #f3f3f3;
        color: #000;
        padding: 1rem;
        margin-bottom: 1rem;
        outline: none;
        border-radius: 0.25rem;
        cursor: pointer;
        position: relative;
      }
      details[open] summary ~ * {
        animation: sweep 0.5s ease-in-out;
      }
      @keyframes sweep {
        0% {
          opacity: 0;
          margin-top: -10px;
        }
        100% {
          opacity: 1;
          margin-top: 0px;
        }
      }
      details > summary::after {
        position: absolute;
        content: "+";
        right: 20px;
      }
      details[open] > summary::after {
        position: absolute;
        content: "-";
        right: 20px;
      }
      details > summary::-webkit-details-marker {
        display: none;
      }
    </style>
  </head>
  <body>
    <main>
      <details open>
        <summary>标题 #1</summary>
        <div class="tab-content">
          <p>躯体日个宽三点零开始可能老师的麻烦老师的吗的历史风貌说了躯体日个宽三点零开始可能老师的麻烦老师的吗的历史风貌说了躯体日个宽三点零开始可能老师的麻烦老师的吗的历史风貌说了躯体日个宽三点零开始可能老师的麻烦老师的吗的历史风貌说了</p>
        </div>
      </details>
      <details>
        <summary>标题 #2</summary>
        <div class="tab-content">
          <p>躯体日个宽三点零开始可能老师的麻烦老师的吗的历史风貌说了</p>
        </div>
      </details>
      <details>
        <summary>标题 #3</summary>
        <div class="tab-content">
          <p>躯体日个宽三点零开始可能老师的麻烦老师的吗的历史风貌说了</p>
        </div>
      </details>
    </main>
  </body>
</html>

八、侧边栏hover效果

在这里插入图片描述

代码

<!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>
      .css-dynamic-sidebar {
        overflow: hidden;
        position: relative;
        height: 15em;
        max-width: 15em;
        margin: auto;
      }
      .site-content {
        margin: auto;
      }
      nav {
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 100%;
        padding: 1em;
        background-color: #f3f3f3;
        transform: translateX(1em);
        transition: 0.2s transform;
      }
      nav:hover,
      nav:focus-within {
        transform: translateX(100%);
      }
      a {
        white-space: pre;
        color: black;
      }
      p {
        font-size: 2em;
        font-family: monospace;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="css-dynamic-sidebar">
      <nav>
        <a class="" href="#">Menu #1</a>
        <a class="" href="#">Menu #2</a>
        <a class="" href="#">Menu #3</a>
      </nav>

      <div class="site-content">
        <p>Hover over the sidebar</p>
        <p>Also work with Tab selector (for accessibility)</p>
      </div>
    </div>
  </body>
</html>

九、使用 first-letter 实现首字母大写

在这里插入图片描述

代码

<!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>
      .content-section p:first-of-type::first-letter {
        color: #f3f3f3;
        float: left;
        font-size: 4rem;
        line-height: 4vw;
        padding-right: 8px;
        /* border: 0.25em double; */
      }
    </style>
  </head>
  <body>
    <div class="content-section">
      <p>
        here we target the wrapper and select the p element. then append
        first-of-type and target first-letter specifically. you can then reuse
        the same option in other parts of your design by changing the wrapper
        variable
      </p>
    </div>
  </body>
</html>

十、使用before添加按钮的图标

在这里插入图片描述
代码

<!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>
      .card .card-body .btn {
        display: block;
        width: 200px;
        height: 48px;
        line-height: 48px;
        background-color: blue;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        font-weight: 700;
      }
      .card .card-body .btn-docu:before {
        content: "\0000a0";
        display: inline-flex;
        height: 24px;
        width: 24px;
        line-height: 24px;
        margin: 0px 10px 0px 0px;
        position: relative;
        top: 0px;
        left: 0px;
        background: url(https://stackdiary.com/docu.svg) no-repeat left center
          transparent;
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="card-body">
        <a href="" target="_blank" class="btn btn-docu" rel="noopener"
          >Documentation</a
        >
      </div>
    </div>
  </body>
</html>