10个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>
      .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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值