分类 css 下的文章

2024-08-21




/* 解决方案1：使用flex布局 */
.parent-flex {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
 
/* 解决方案2：使用grid布局 */
.parent-grid {
  display: grid;
  place-items: center; /* 水平垂直同时居中 */
}
 
/* 解决方案3：使用绝对定位 */
.parent-absolute {
  position: relative;
}
.child-absolute {
  position: absolute;
  top: 50%; /* 向下偏移50% */
  left: 50%; /* 向右偏移50% */
  transform: translate(-50%, -50%); /* 向左和向上各偏移50%，实现居中 */
}
 
/* HTML结构 */
<div class="parent-flex">
  <div>水平垂直居中内容</div>
</div>
 
<div class="parent-grid">
  <div>水平垂直居中内容</div>
</div>
 
<div class="parent-absolute">
  <div class="child-absolute">水平垂直居中内容</div>
</div>

这段代码提供了三种不同的方法来实现水平和垂直居中，分别使用了flex布局、grid布局和绝对定位。每种方法都有相应的HTML结构作为示例。

- 阅读更多 -

css图片保持比例and图片占满整个div

System

2024-08-21

所有,css

要使图片保持原有比例并占满整个div，可以使用CSS中的object-fit属性和width、height属性。以下是实现这个需求的CSS样式：




.div-class {
  width: 100%; /* 设置div的宽度为100% */
  height: 300px; /* 设置div的高度为300px */
  overflow: hidden; /* 超出div的图片部分隐藏 */
}
 
.div-class img {
  width: 100%; /* 图片宽度设置为100%，保持宽度比例不变 */
  height: 100%; /* 图片高度设置为100%，保持高度比例不变 */
  object-fit: cover; /* 图片将覆盖整个元素，保持宽高比 */
}

HTML结构：




<div class="div-class">
  <img src="path/to/image.jpg" alt="描述">
</div>

这样设置后，图片会保持原有的宽高比，并且尽管div的尺寸不同，图片都会占满整个div。如果div的宽度或高度有改变，图片会相应地调整尺寸，保持宽高比不变。

- 阅读更多 -

12有趣的CSS文字阴影代码示例，10大前端常用算法

System

2024-08-21

所有,css




/* 文字阴影效果 */
.shadowed-text {
  color: #f2f2f2; /* 文字颜色 */
  text-shadow: 
    1px 1px 0 #000, /* 水平和垂直偏移量都是1px，模糊半径0，颜色为黑色 */
    2px 2px 0 #000,
    3px 3px 0 #000,
    4px 4px 0 #000,
    5px 5px 0 #000,
    6px 6px 0 #000; /* 增加阴影的数量和大小可以创建更真实的阴影效果 */
}

这段代码展示了如何使用CSS为文字添加阴影。通过调整text-shadow属性中的偏移量、模糊半径和颜色，开发者可以创建出各种各样的文字阴影效果。在这个例子中，我们使用了6个阴影层次，从最小的偏移到较大的偏移，创建出一种层次感。

System

2024-08-21

所有,css

报错解释：

这个错误表明你的项目中使用的autoprefixer PostCSS插件需要PostCSS版本8，但是当前环境中的PostCSS版本不满足这个要求。

解决方法：

更新PostCSS到版本8。你可以通过以下命令来更新：
```
npm install postcss@latest --save-dev
```
或者，如果你使用yarn：
```
yarn add postcss@latest --dev
```
确保autoprefixer也是最新的，以兼容PostCSS版本8。你可以通过以下命令更新autoprefixer：
```
npm install autoprefixer@latest --save-dev
```
或者，如果你使用yarn：
```
yarn add autoprefixer@latest --dev
```
如果你的项目依赖于特定版本的PostCSS，你可能需要检查并更新这些依赖，以确保它们与PostCSS 8兼容。
在更新后，重新运行你的构建过程，以确保autoprefixer能正确工作。

确保在更新前备份你的项目，以防更新过程中出现问题。

- 阅读更多 -

05.CSS 缓动变量 && 首字下沉 & 放大缩小动画

System

2024-08-21

所有,css

在CSS中，我们可以使用--前缀来定义变量，这些变量可以在整个文档中使用。这些变量可以用于保存颜色值、长度值、宽度、高度、字体大小等任何CSS支持的属性值。

首先，我们需要定义一个变量，例如--animation-duration，然后在CSS的其他地方使用这个变量。

解法1：




:root {
  --animation-duration: 500ms;
}
 
.zoomIn {
  animation: zoomIn --animation-duration ease-in-out;
}

在上述代码中，我们首先在:root选择器中定义了一个名为--animation-duration的变量，然后在.zoomIn类中使用了这个变量。

解法2：




:root {
  --animation-duration: 500ms;
  --first-letter: 2em;
  --font-size: 16px;
}
 
p:first-letter {
  font-size: var(--first-letter);
}
 
.zoomIn {
  animation: zoomIn var(--animation-duration) ease-in-out;
}
 
.sans-serif {
  font-family: var(--font-family, sans-serif);
}

在上述代码中，我们定义了三个变量--animation-duration，--first-letter和--font-size，然后在不同的选择器中使用了这些变量。

注意：

变量名称对大小写敏感，所以--my-color和--My-color是两个不同的变量。
变量必须先定义后使用。
变量可以在任何选择器中定义，但只能在元素的子元素中使用。
变量可以使用var()函数来使用。

对于首字下沉，我们可以使用::first-letter伪元素来实现。

解法：




p::first-letter {
  font-size: 2em;
  float: left;
}

在上述代码中，我们为p元素的首字母定义了一个2em的字体大小和左侧浮动。

对于放大缩小的动画，我们可以使用CSS的@keyframes规则来定义动画，然后使用animation属性来应用动画。

解法：




@keyframes zoomIn {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}
 
.zoomIn {
  animation: zoomIn 500ms ease-in-out;
}

在上述代码中，我们定义了一个名为zoomIn的动画，这个动画会将元素的大小从0.5放大到1。然后我们将这个动画应用到了.zoomIn类上，动画的持续时间是500ms，动画的速度是ease-in-out。

- 阅读更多 -

如何判断是否需要 CSS 中的媒体查询

System

2024-08-21

所有,css

判断是否需要媒体查询通常依赖于你的设计需求。如果你需要你的网站在不同的设备上都能够有良好的显示效果，那么你可能需要使用媒体查询。

媒体查询可以根据不同的屏幕和视口大小来应用不同的CSS规则。例如，你可能会希望在小屏幕上使用全宽的布局，而在大屏幕上使用固定宽度的布局。

下面是一个简单的媒体查询示例，它会在屏幕宽度小于768像素时应用一组CSS规则，从而使得网站的导航菜单变为水平布局：




/* 默认样式 */
.navigation {
  display: flex;
  flex-direction: row;
}
 
/* 媒体查询 */
@media screen and (max-width: 768px) {
  .navigation {
    flex-direction: column;
  }
}

在这个例子中，.navigation 类在屏幕宽度大于768像素时使用flex布局的水平方向，而当屏幕宽度小于或等于768像素时，导航菜单会变为垂直布局。

要判断是否需要媒体查询，你需要考虑你的设计需求，并且通常需要一些实践经验来决定何时使用媒体查询。通常，如果你的网站需要在多种设备和屏幕尺寸上工作良好，那么媒体查询就是一个非常有用的工具。

- 阅读更多 -

「兔了个兔」玉兔踏青，纯CSS实现瑞兔日历

System

2024-08-21

所有,css

以下是一个简化版的纯CSS实现“兔了个兔”日历的示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rabbits Calendar</title>
<style>
  :root {
    --rabbit-color: #e99121;
    --rabbit-size: 10em;
  }
  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2d3e50;
    font-family: Arial, sans-serif;
  }
  .calendar {
    position: relative;
    width: calc(var(--rabbit-size) * 2);
    height: calc(var(--rabbit-size) * 2);
    transform: rotate(-45deg);
  }
  .calendar::before,
  .calendar::after {
    content: '';
    position: absolute;
    width: var(--rabbit-size);
    height: var(--rabbit-size);
    background-color: var(--rabbit-color);
    border-radius: 50%;
  }
  .calendar::before {
    top: 0;
    left: 0;
    background: conic-gradient(var(--rabbit-color), transparent 60%, var(--rabbit-color));
    animation: rotate-ear 2s infinite linear;
  }
  .calendar::after {
    bottom: 0;
    right: 0;
    background: conic-gradient(var(--rabbit-color), transparent 60%, var(--rabbit-color));
    animation: rotate-ear 4s infinite linear;
  }
  @keyframes rotate-ear {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
</head>
<body>
<div class="calendar"></div>
</body>
</html>

这段代码使用了CSS中的::before和::after伪元素来创建兔子的两只耳朵，并使用conic-gradient来实现耳朵旋转的效果。通过调整animation属性中的时长和次数，可以控制耳朵的旋转速度和频率。

System

2024-08-21

所有,css

在Tailwind CSS中，你可以使用自定义的主题来定义颜色。这些颜色可以在tailwind.config.js文件中的theme属性下定义。

以下是如何在Tailwind CSS中使用自定义颜色的步骤：

在tailwind.config.js文件中定义颜色：




module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-color': '#ff0000', // 使用 'custom-color' 作为颜色名称
      },
    },
  },
  // 其他配置...
};

在你的组件中使用这个颜色：




<!-- 使用类名 'text-custom-color' 来应用颜色 -->
<div class="text-custom-color">
  这是一段红色的文本。
</div>

如果你想要在自定义CSS中使用这个颜色，可以这样做：




/* 使用 CSS 变量 --tw-color-custom-color */
.custom-style {
  color: var(--tw-color-custom-color);
}

在HTML元素上应用自定义的CSS类：




<div class="custom-style">
  这是另一段红色的文本。
</div>

请注意，颜色名称'custom-color'可以根据你的需要更改，而颜色值'#ff0000'也应该替换为你想要使用的实际颜色代码。

- 阅读更多 -

【前端】用CSS实现div全屏铺满的方式

System

2024-08-21

所有,css

要使用CSS让一个div全屏铺满，可以使用vh（viewport height）和vw（viewport width）单位，或者设置position属性和width、height属性。以下是两种方法的示例代码：

方法1：使用vh和vw单位




.fullscreen-div {
  width: 100vw;
  height: 100vh;
}

方法2：使用绝对定位和100%的宽高




.fullscreen-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

在HTML中，只需将div的class设置为对应的全屏类名即可：




<div class="fullscreen-div"></div>

请注意，当使用绝对定位时，div的父元素应该有相对定位（position: relative;），否则div会相对于初始包含块（initial containing block）定位。如果父元素已有相对定位，则不需要额外设置。

- 阅读更多 -

CSS中如何实现优雅的图片懒加载与性能优化

System

2024-08-21

所有,css




/* 图片懒加载样式 */
img[lazy-src] {
    opacity: 0;
    transition: opacity 300ms;
}
img[lazy-src][loaded] {
    opacity: 1;
}
 
/* 图片懒加载脚本 */
<script>
document.addEventListener('DOMContentLoaded', function() {
    var lazyImages = [].slice.call(document.querySelectorAll('img[lazy-src]'));
 
    if ('IntersectionObserver' in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.getAttribute('lazy-src');
                    lazyImage.removeAttribute('lazy-src');
                    lazyImage.classList.add('loaded');
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
 
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // 降级方案：只加载可见的图片
        let nearBottom = 500; // 当距离底部500px时开始加载图片
        lazyImages.forEach(function(lazyImage) {
            setTimeout(function() {
                lazyImage.src = lazyImage.getAttribute('lazy-src');
                lazyImage.removeAttribute('lazy-src');
                lazyImage.classList.add('loaded');
            }, 200);
        });
    }
});
</script>

这段代码展示了如何使用IntersectionObserver实现图片懒加载，以及如何为不支持IntersectionObserver的浏览器提供一个简单的降级方案。代码中的img[lazy-src]选择器用于选择那些需要懒加载的图片，通过设置opacity: 0进行隐藏，然后在图片加载时逐渐提升不透明度，以实现平滑的用户体验。

- 阅读更多 -