10个css小技巧

最新推荐文章于 2023-04-24 17:22:27 发布
最新推荐文章于 2023-04-24 17:22:27 发布
阅读量178 收藏 2
点赞数 1
分类专栏： css 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45730243/article/details/125273475
版权

一、打字效果

在这里插入图片描述
代码

<!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>
南风number
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
要知道的10个CSS技巧
09-25
以下是你需要知道的10个CSS技巧，这些技巧能够帮助你提升设计能力，创造出更具吸引力和功能性的网页。 1. **@font-face**：通过`@font-face`规则，你可以引入网络上的自定义字体，让网页设计不受系统默认字体限制。...
CSS3 -- @keyframes动画
最新发布
qq_51248309的博客
05-04 5812
一篇文章教会你css3中的动画
12 个优秀的 CSS 技巧
CRMEB小程序商城的博客
11-03 974
使用 Shape-outside 在浮动图像周围弯曲文本 它是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域。css代码： .any-shape { width: 300px; float: left; shape-outside: circle(50%); } 复制代码 魔法组合 这个小组合实际上可以防止你在 HTML 中遇到的大多数布局错误的问题。我们确实不希望水平滑块或绝对定位的项目做他们想做的事情，也不希望到处都是随机的边距和填充。所以这是你们的魔法组合。 * .
10 个不错的 CSS 小技巧
祈澈菇凉
05-17 182
本文为译文，采用意译。CSS 大约有两百个属性。很多属性都是相互关联的，理清楚每一个属性细节是不可能的。所以，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考。1. 打字效果Typing-effect-for-text.gif网页设计变得越来越有创意。在 CSS 动画的协调下，你的网页会像活的一样。在这个例子中，我们将使用 animation 和 @keyfra...
9个非常实用的CSS 技巧
web前端开发
08-11 193
英文 | https://medium.muz.li/9-useful-css-tricks-that-you-should-know-39dd79f09d37翻译|杨小二CSS 世界...
css小技巧汇总
09-27
本文主要对css小技巧进行简单汇总。具有很好的参考价值，需要的朋友一起来看下吧
三个很特别的CSS小技巧分享
09-25
里给大家介绍3个CSS中非常不错的小技巧，非常的简单实用，使用得当，可以大大降低我们的工作强度。
29个常用的CSS小技巧汇总
12-13
【CSS小技巧详解】 在网页设计中，CSS（层叠样式表）是不可或缺的一部分，它负责控制网页元素的样式和布局。以下是一些常见的CSS小技巧，这些技巧可以帮助你更高效地实现各种视觉效果。 1. **清除图片下方空白间隙...
css滤镜属性渐变_使用滤镜对CSS渐变进行动画处理
cungui5726的博客
08-20 345
css滤镜属性渐变Officially, gradients can’t yet be animated. However, using CSS filters, you can animate the color values within them, with a few conditions. 正式而言，尚无法对渐变进行动画处理。 但是，使用CSS 过滤器 ，您可以在一些条件下为其中的颜色...
卡通头像图片怎么做，卡通头像图片制作方法分享！​
m0_69965428的博客
04-24 520
卡通头像图片怎么做，卡通头像图片是一种以卡通形式为基础的人物头像图片，通常用于社交媒体、聊天应用程序和个人资料等，这些图片通常具有明亮的颜色、夸张的表情和图像，以及简单的线条和形状，卡通头像图片可以是自己绘制的艺术作品，也可以是从互联网上下载的免费或付费图像，那么很多小伙伴不知道用什么软件进行制作，下面感兴趣的小伙伴就一起来看看吧！这个应用程序可以将你的照片转换成卡通形象，并且还有很多可爱的表情和滤镜可以选择，而且操作也不复杂，网上的教程大家找一下也是可以很轻松的就完成卡通头像的制作。
CSS3——@keyframe动画的基本用法，常见错误及解决方案
热门推荐
Erya Programming learning
08-04 3万+
文章目录一、基本用法1.关键帧@keyframes2.示例二、常见错误及解决方案（1）@keyframes 不能实现突变的状态变化display替代方案1.占据空间：visiblity2.不想占据空间：绝对定位+visiblity3.消失前占据空间但是消失后不占据空间：timeout和visiblity（2）@keyframes会增添/覆盖属性 一、基本用法 CSS3 动画 动画：指定一组或多组成套的动作，按照指定时间，指定的方式自动完成。 h5中动画的运用效率要高于使用js来体现动画效果，因为动画是渲染式
12个你可能不知道的CSS小技巧
web全栈开发的博客
10-25 242
本文整理出12个开发中你有可能没有用到过的CSS小技巧，一起来看看吧~1. 自定义光标（cursor）首先来看一下CSS的内置光标样式。平时开发中用到的基本上就是default、pointer、not-allowed、move这几个。其实内置的光标样式还有很多，大家可以把鼠标放到下面的颜色块上体验一下。自定义光标也很简单，只需要通过cursor: url(xxx)引入一张图片即可。有时候我们下载的...
20 个超级实用的 CSS 技巧，帮助你成为更好的开发者
JackChan
12-16 1891
css技巧
css小技巧
单眼皮的小熊
02-06 222
1.多行文字垂直居中： div> span>随便写点什么拿来测试span> div> div{ width: 100px; height: 100px; margin: 100px auto; border: 1px solid #000; display: table; } span{ line-height: 20px;
经常使用的20个css高级技巧（上）
成熟的小孩的博客
12-15 4909
1. 黑白图像 这段代码会让你的彩色照片显示黑白照片。img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: graysca
10个节约开发时间的CSS技巧
爱码农爱生活
01-03 270
      CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。 1.简单的纯CSS Tooltip 通过这些代码，你可以做出简单的Tooltip。这是CSS   代码：   以下为引用的内容： a:hover {background:#ffffff; /*...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值