1. 首页
  2. 分类
  3. css
用HTML和CSS实现提示工具（tooltip）及HTML元素的定位
System
2024-08-07
所有,css



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Example</title>
<style>
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 可选的下划线提示 */
  }
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
 
    /* 位置 */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* 使用负的宽度来居中 */
  
    /* 动画效果 */
    opacity: 0;
    transition: opacity 0.3s;
  }
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
</style>
</head>
<body>
 
<p>悬停鼠标在文本上查看工具提示：
<span class="tooltip">悬停显示工具提示
  <span class="tooltiptext">工具提示文本</span>
</span>
</p>
 
</body>
</html>

这段代码展示了如何使用HTML和CSS创建一个简单的工具提示（tooltip）。.tooltip 类用于定义一个包含工具提示文本的元素，.tooltiptext 类用于定义工具提示的样式，并在鼠标悬停时显示。通过使用position属性和transition属性，实现了平滑的显示效果。

- 阅读更多 -
CSS-定位算法
System
2024-08-07
所有,css

CSS定位算法主要是指通过CSS属性来控制元素在页面中的位置，常用的定位属性包括position, top, right, bottom, left, 以及 z-index。

  1. position属性：

    • static：默认值，无定位。
    • relative：相对定位，相对于其正常位置进行定位。
    • absolute：绝对定位，相对于最近的非static定位父元素进行定位。
    • fixed：固定定位，相对于浏览器窗口进行定位。
    • sticky：粘性定位，根据用户的滚动位置在相对和固定定位之间切换。

  2. top, right, bottom, left属性：

    用来指定元素相对于其最近的定位父元素的偏移量。

  3. z-index属性：

    用来控制元素的堆叠顺序，值大的元素将会覆盖值小的元素。

实例代码：




/* 相对定位 */
.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}
 
/* 绝对定位 */
.absolute-box {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
/* 固定定位 */
.fixed-box {
  position: fixed;
  bottom: 0;
  left: 0;
}
 
/* 粘性定位 */
.sticky-box {
  position: sticky;
  top: 0;
}

HTML结构：




<div class="relative-box">相对定位</div>
<div class="absolute-box">绝对定位</div>
<div class="fixed-box">固定定位</div>
<div class="sticky-box">粘性定位</div>
- 阅读更多 -
用CSS+SVG做一个优雅的环形进度条
System
2024-08-07
所有,css



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>环形进度条示例</title>
<style>
  .circle-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
  }
 
  .circle-progress .circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 5;
  }
 
  .circle-progress .circle-progress-bar {
    fill: none;
    stroke-linecap: round;
    stroke-width: 5;
    stroke: #3498db;
    r: 45;
  }
 
  .circle-progress .circle-text {
    position: absolute;
    text-align: center;
    line-height: 1;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
</style>
</head>
<body>
<div class="circle-progress" data-progress="75">
  <svg viewBox="0 0 100 100">
    <circle class="circle-bg" r="45" cx="50" cy="50"/>
    <circle class="circle-progress-bar" r="45" cx="50" cy="50"
            stroke-dasharray="282.74" stroke-dashoffset="213.74"/>
  </svg>
  <div class="circle-text">75%</div>
</div>
 
<script>
  const circleProgress = document.querySelector('.circle-progress');
  const progressBar = circleProgress.querySelector('.circle-progress-bar');
  const progress = parseInt(circleProgress.dataset.progress, 10);
  const circumference = progressBar.r.baseVal.value * 2 * Math.PI;
  progressBar.style.strokeDashoffset = `${circumference - (progress / 100 * circumference)}`;
</script>
</body>
</html>

这段代码展示了如何使用SVG和CSS创建一个简洁的环形进度条。.circle-progress是容器，.circle-bg是进度条的背景环，.circle-progress-bar是进度条本身，.circle-text是显示进度百分比的文本。通过JavaScript动态计算进度条的stroke-dashoffset属性，实现进度条的绘制。

- 阅读更多 -
【uniapp】vue3+vite模版的uniapp引入tailwindcss
System
2024-08-07
所有,css

在uniapp项目中引入Tailwind CSS需要以下步骤：

  1. 创建或选择一个Vue3 + Vite模版的uniapp项目。
  2. 安装Tailwind CSS和postcss。
  3. 配置postcss和Tailwind。
  4. 使用Tailwind CSS类。

以下是具体步骤和示例代码：

  1. 确保你的项目是基于Vue3和Vite的uniapp项目。
  2. 安装Tailwind CSS和postcss：



npm install -D tailwindcss postcss postcss-loader autoprefixer
  1. 创建Tailwind CSS配置文件 tailwind.config.js 和 postcss.config.js：

tailwind.config.js:




module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js:




module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
  1. 在项目的入口文件（如 main.js 或 main.ts）中引入Tailwind CSS:



import 'tailwindcss/tailwind.css';
  1. 使用Tailwind CSS类：

在.vue文件中，可以这样使用Tailwind CSS类：




<template>
  <view class="text-center p-4 bg-blue-500 text-white">Hello Tailwind</view>
</template>

确保在实际使用时，Purge部分的配置是根据你的项目实际情况来配置的，以避免生成不必要的CSS。

以上步骤完成后，运行项目，Tailwind CSS应该已经可以正常工作了。

- 阅读更多 -
CSS：字体和文本样式
System
2024-08-07
所有,css



/* 设置字体大小 */
.text-size-12 {
    font-size: 12px;
}
 
/* 设置字体加粗 */
.text-bold {
    font-weight: bold;
}
 
/* 设置字体为斜体 */
.text-italic {
    font-style: italic;
}
 
/* 设置字体的行高 */
.text-line-height-150 {
    line-height: 150%;
}
 
/* 设置字体的颜色 */
.text-color-red {
    color: #FF0000; /* 红色 */
}
 
/* 设置字体的对齐方式 */
.text-align-center {
    text-align: center;
}
 
/* 设置字体的装饰线 */
.text-decoration-underline {
    text-decoration: underline;
}
 
/* 设置字体的缩进 */
.text-indent-20 {
    text-indent: 20px;
}
 
/* 设置字体的转换为小型大写字母 */
.text-transform-uppercase {
    text-transform: uppercase;
}

以上代码定义了不同的CSS类，用于设置文本的各种样式。开发者可以将这些类应用到HTML元素上，以实现对应的文本显示效果。

- 阅读更多 -
前端 CSS 3D 照片墙自动旋转案例（详细步骤）
System
2024-08-07
所有,css



/* 设置照片墙容器样式 */
.photo-wall-container {
    perspective: 1000px; /* 设置3D视图的距离，为子元素创建透视效果 */
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
 
/* 设置照片单元样式 */
.photo-wall-item {
    width: 200px;
    height: 200px;
    position: absolute;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
    transition: transform 1s; /* 设置过渡动画 */
}
 
/* 使用CSS动画实现自动旋转 */
.photo-wall-item:nth-child(1) {
    transform: rotateY(0deg) translateZ(300px);
    animation: rotateItem 10s infinite linear;
}
 
/* 其他照片样式... */
 
/* 定义动画 */
@keyframes rotateItem {
    0% {
        transform: rotateY(0deg) translateZ(300px);
    }
    100% {
        transform: rotateY(360deg) translateZ(300px);
    }
}

这个代码实例展示了如何创建一个自动旋转的3D照片墙。它设置了透视，定义了照片的样式，并使用CSS动画实现了照片的自动旋转效果。这个案例教导开发者如何利用CSS动画和3D转换创建复杂的交互效果。

- 阅读更多 -
纯css实现太极八卦图
System
2024-08-07
所有,css

使用纯CSS实现太极八卦图，可以通过使用CSS的@keyframes规则来创建动画，并使用transform属性进行旋转等变换。以下是一个简单的例子，展示了如何使用CSS创建一个基本的太极八卦图：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Taiji Icon</title>
<style>
  .taiji {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 50%;
    animation: rotate 4s infinite linear;
  }
 
  .taiji::before,
  .taiji::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: white;
    border-radius: 50%;
  }
 
  .taiji::before {
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
  }
 
  .taiji::after {
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
 
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
</head>
<body>
<div class="taiji"></div>
</body>
</html>

这段代码创建了一个简单的太极图标，其中.taiji代表天，而.taiji::before和.taiji::after分别代表地和阳。通过@keyframes rotate动画，它们会不断旋转和切换位置，模拟出太极旋律的动态效果。

- 阅读更多 -
CSS元素居中大全，2024年最新腾讯、阿里前端高级面试真题汇总
System
2024-08-07
所有,css

在CSS中，实现元素居中有多种方法，以下是一些常用的居中技术：

  1. 水平居中 - 行内元素或文本



.center-text {
  text-align: center;
}
  1. 水平居中 - 块级元素



.center-block {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* or any other value */
}
  1. 水平居中 - 使用Flexbox



.center-flexbox {
  display: flex;
  justify-content: center;
}
  1. 垂直居中 - 单行文本



.center-vertical-text {
  height: 100px;
  line-height: 100px; /* same as height to vertically center text */
}
  1. 水平和垂直居中 - 使用Flexbox



.center-flexbox-both {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. 水平和垂直居中 - 使用Grid



.center-grid {
  display: grid;
  place-items: center;
}
  1. 水平和垂直居中 - 定位与转换



.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上代码示例涵盖了常见的居中方式，可以根据实际需求选择合适的居中策略。

- 阅读更多 -
HTML5 满天繁星+流星划过动画效果（CSS 动画）
System
2024-08-07
所有,css



<!DOCTYPE html>
<html>
<head>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .stars {
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
            position: relative;
        }
        .stars-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateZ(0);
        }
        .star {
            position: absolute;
            top: 0;
            width: 2px;
            height: 2px;
            background: #fff;
            border-radius: 100%;
            opacity: 0.3;
            transform: translateZ(0);
            animation: twinkle 10s infinite alternate;
        }
        @keyframes twinkle {
            from { opacity: 0.3; }
            to { opacity: 0.8; }
        }
        .meteor {
            position: absolute;
            top: -100px;
            width: 2px;
            height: 100px;
            background: #fff;
            opacity: 0.5;
            transform: translateX(50%);
            animation: shoot 20s linear infinite;
        }
        @keyframes shoot {
            0% { top: -100px; opacity: 0.5; }
            20% { opacity: 0.8; }
            100% { top: 100%; opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="stars">
        <div class="stars-container">
            <!-- 生成随机的星星 -->
            <div class="star" style="left:100px;top:50px;"></div>
            <!-- 更多星星... -->
        </div>
        <!-- 流星 -->
        <div class="meteor"></div>
    </div>
    <script>
        const numStars = 1000; // 星星数量
        const starsContainer = document.querySelector('.stars-container');
 
        for (let i = 0; i < numStars; i++) {
            const star = document.createElement('div');
            star.className = 'star';
            // 随机位置和大小
            star.style.left = Math.random() * 100 + '%';
            s
- 阅读更多 -
CSS——scss中动态引入背景图
System
2024-08-07
所有,css

在SCSS中，你可以使用@each指令来遍历列表并动态地引入背景图。以下是一个简单的例子：




// 假设你有一个包含图片路径的列表
$background-images: 'image1.jpg', 'image2.jpg', 'image3.jpg';
 
// 遍历列表并为每个图片创建一个类
@each $image in $background-images {
  .bg-image-#{$image} {
    background-image: url(#{$image});
  }
}

编译后的CSS将是：




.bg-image-image1.jpg {
  background-image: url(image1.jpg);
}
 
.bg-image-image2.jpg {
  background-image: url(image2.jpg);
}
 
.bg-image-image3.jpg {
  background-image: url(image3.jpg);
}

这样，你可以将生成的类添加到HTML元素中，以应用对应的背景图。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号