分类 css3 下的文章

2024-08-12

要使用原生JavaScript实现步骤条，你可以创建一个HTML结构，然后用JavaScript来处理步骤的显示和交互。以下是一个简单的实现示例：

HTML:




<div id="step-bar">
  <div class="step" data-step="1">步骤1</div>
  <div class="step" data-step="2">步骤2</div>
  <div class="step" data-step="3">步骤3</div>
  <div class="step" data-step="4">步骤4</div>
</div>

CSS:




#step-bar {
  display: flex;
}
 
.step {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
}
 
.step.active {
  color: #fff;
  background-color: #007bff;
}

JavaScript:




document.querySelectorAll('.step').forEach(function(step) {
  step.addEventListener('click', function() {
    // 移除所有步骤的active类
    document.querySelectorAll('.step').forEach(function(s) {
      s.classList.remove('active');
    });
    
    // 添加当前点击的步骤的active类
    this.classList.add('active');
    
    // 这里可以添加更多的逻辑，比如显示或隐藏内容区域等
  });
});

这个实现允许用户点击步骤条上的任何一个步骤，然后该步骤会被高亮显示，同时其他步骤保持不变。你可以根据需要添加更多的功能，比如显示对应步骤的内容等。

- 阅读更多 -

CSS3如何实现元素的固定不滚动

System

2024-08-12

所有,css3

在CSS3中，可以使用position: sticky;属性来实现元素的固定效果，即使元素在滚动时仍然保持在某个位置。position: sticky;的工作需要基于一些条件：

必须指定top, right, bottom或left四个方向之一来指定sticky元素所需要达到的位置，才能使粘性定位生效。
其父元素不能有任何overflow属性设置为visible的情况，否则sticky定位不会生效。

下面是一个简单的例子，演示如何使用position: sticky;来实现元素的固定效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body, html {
    height: 200%;
    margin: 0;
    padding: 0;
  }
  .sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0; /* 距离顶部的距离 */
    background-color: yellow;
    padding: 50px;
    font-size: 20px;
  }
</style>
</head>
<body>
 
<p>向下滚动页面。</p>
 
<div class="sticky">我在滚动时保持固定。</div>
 
<p>继续向下滚动页面...</p>
 
</body>
</html>

在这个例子中，.sticky类使得包含文本的<div>在滚动时保持在顶部。当用户向下滚动页面时，sticky元素会固定在顶部，并不会随着页面的其余部分滚动。

System

2024-08-12

所有,css3




/* 设置图片初始大小 */
img {
  width: 200px;
  height: auto;
}
 
/* 鼠标悬停时，缩小图片 */
img:hover {
  transform: scale(0.8);
}

这段代码示例中，我们首先为所有img元素设置了一个初始宽度，并让其高度自动调整。然后，我们使用CSS的:hover伪类选择器来定义当鼠标悬停在图片上时的变换效果，使用transform属性中的scale函数将图片缩小到原始大小的80%。这种效果在用户希望在用户交互时增加页面视觉效果时非常有用。

- 阅读更多 -

【CSS应用篇】——CSS如何实现圆角边框

System

2024-08-12

所有,css3

CSS提供了border-radius属性，可以用来创建圆角边框。




/* 创建一个圆角矩形 */
.rounded-rectangle {
  width: 200px;
  height: 100px;
  background-color: skyblue;
  border: 2px solid black;
  border-radius: 15px; /* 设置圆角的半径为15px */
}
 
/* 创建一个圆角圆形 */
.rounded-circle {
  width: 100px;
  height: 100px;
  background-color: pink;
  border: 2px solid black;
  border-radius: 50%; /* 设置border-radius为50%，形成圆形 */
}

HTML部分：




<div class="rounded-rectangle"></div>
<div class="rounded-circle"></div>

border-radius属性可以接受不同的值：

单一值：如15px，将创建四个相等的圆角。
两个值：第一个值是水平半径，第二个值是垂直半径（例如15px 5px）。
三个值：第一个和第二个值是水平半径，第三个值是垂直半径（例如15px 5px 10px）。
四个值：分别指定左上角、右上角、右下角、左下角的圆角（例如15px 5px 10px 20px）。
百分比值：可以用百分比指定圆角的大小，相对于元素的宽度或高度（例如20% 40% 60% 80%）。

- 阅读更多 -

antd选择器下拉菜单样式修改

System

2024-08-12

所有,css3

在Ant Design中，如果你想要修改选择器（Select）组件的下拉菜单样式，你可以使用dropdownRender属性来自定义下拉菜单的渲染。以下是一个简单的例子，演示如何使用dropdownRender来修改样式：




import React from 'react';
import { Select } from 'antd';
import './style.css'; // 假设你有一个CSS文件用于定义样式
 
const { Option } = Select;
 
const customDropdown = (menu) => (
  <div className="custom-dropdown">
    {menu}
    // 在这里添加更多的样式或组件
  </div>
);
 
const App = () => (
  <Select
    dropdownRender={customDropdown}
    placeholder="请选择"
    style={{ width: 200 }}
  >
    <Option value="option1">Option 1</Option>
    <Option value="option2">Option 2</Option>
  </Select>
);
 
export default App;

在style.css文件中，你可以定义.custom-dropdown的样式：




.custom-dropdown {
  background-color: #fafafa;
  /* 添加其他需要的样式 */
}

请注意，dropdownRender属性接受一个React元素或一个函数，该函数接受下拉菜单的内容作为参数，并返回一个React元素。你可以在返回的元素中加入任何你想要的自定义样式。

- 阅读更多 -

如何将img标签水平居中

System

2024-08-12

所有,css3

要将img标签在其父元素中水平居中，可以使用CSS的display: block属性和margin属性。以下是具体实现方法：

给img标签添加display: block属性。
设置margin-left和margin-right属性为auto。

HTML代码：




<div class="image-container">
    <img src="path/to/your/image.jpg" alt="Sample Image">
</div>

CSS代码：




.image-container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

这段CSS代码会使得img标签在其父元素div中水平居中显示。如果你想要使用其他方法，比如Flexbox或Grid布局，也可以实现相同的效果。

- 阅读更多 -

Vue 实现全屏滚动效果

System

2024-08-12

所有,css3




<template>
  <div class="fullpage">
    <div class="section" v-for="section in 3" :key="section">
      <h1>第 {{ section }} 页</h1>
    </div>
  </div>
</template>
 
<script>
import Vue from 'vue'
import VueFullpage from 'vue-fullpage.js'
 
Vue.use(VueFullpage)
 
export default {
  data() {
    return {
      // 定义全屏滚动的配置
      fullpageOptions: {
        navigation: true, // 是否显示导航
        navigationTooltips: ['第一页', '第二页', '第三页'], // 导航按钮的 Tooltip
      }
    }
  },
  // 使用 computed 属性返回配置
  computed: {
    fpOptions() {
      return this.fullpageOptions
    }
  }
}
</script>
 
<style>
.section {
  text-align: center;
  font-size: 30px;
  color: #fff;
  background-color: #35495e;
}
</style>

这个代码实例展示了如何在 Vue 应用中使用 vue-fullpage.js 插件来创建一个具有全屏滚动效果的页面。它定义了三个滚动区域，每个区域都包含一个标题。通过Vue.use(VueFullpage)全局引入插件，并通过计算属性fpOptions提供全屏滚动的配置。

- 阅读更多 -

css3滤镜属性filter实现网页变黑白效果

System

2024-08-12

所有,css3

CSS3的filter属性可以用来实现各种视觉效果，包括图片灰度化。要将网页上的所有内容变成黑白效果，可以对<body>元素使用filter: grayscale(100%);。

下面是实现这种效果的CSS代码：




body {
  filter: grayscale(100%);
}

将以上CSS代码添加到你的样式表中，或者在<head>标签内使用<style>标签包含上述代码，然后刷新你的网页，你会看到整个网页已经变成了黑白效果。这种效果可以通过调整grayscale()函数的参数值来进行调整，以达到不同的灰度级别。100%是完全的灰度效果，而更低的值会让图片呈现更多的颜色。

- 阅读更多 -

CSS定位

System

2024-08-12

所有,css3

CSS定位主要是通过position属性来实现的，它有四个值：static、relative、absolute和fixed。

static（默认值）：无特殊定位，元素出现在正常的流中。
relative（相对定位）：不脱离文档流，参照自身在文档流中的位置进行定位。可使用top、right、bottom、left属性进行微调。
absolute（绝对定位）：脱离文档流，参照最近的已定位（即position不是static）的父元素进行定位。如果没有，则以浏览器窗口为参照。
fixed（固定定位）：类似absolute，但参照浏览器窗口进行定位，并且不随滚动条滚动。

实例代码：




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

在HTML中使用：




<div class="relative">相对定位的元素</div>
<div class="absolute">绝对定位的元素</div>
<div class="fixed">固定定位的元素</div>

- 阅读更多 -

不要图片？CSS实现大屏常见不规则边框（系列二）

System

2024-08-12

所有,css3




/* 定义基本样式 */
.border-irregular {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
}
 
/* 定义伪元素来创建不规则边框 */
.border-irregular:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: #ff0000;
    clip-path: polygon(
        0 0,
        random() * 100%  random() * 100%,
        random() * 100%  random() * 100%,
        100% 100%,
        100% 0
    );
}

这段代码定义了一个.border-irregular类，它会生成一个宽高为200px的方形容器，并在其上应用不规则的红色边框。伪元素通过clip-path属性和polygon函数随机生成不规则的多边形边框。random()函数用于生成随机数，以此创建每次都不同的不规则边框效果。

- 阅读更多 -