分类 css3 下的文章

2024-08-13

CSS3的clip-path属性可以用来剪切图片。这个属性允许你创建一个只有元素的某个区域可以显示的剪切路径。

以下是几种使用clip-path属性的方法：

使用内置的剪切函数：




.clip-path {
  clip-path: inset(100px 50px);
}

使用自定义形状剪切：




.clip-path {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%);
}

使用圆形剪切：




.clip-path {
  clip-path: circle(50%);
}

使用椭圆形剪切：




.clip-path {
  clip-path: ellipse(50% 25%);
}

使用URL引用SVG数据：




.clip-path {
  clip-path: url(#svgClipPath);
}

在HTML中使用这些类：




<img src="image.jpg" class="clip-path">

请注意，clip-path属性可能不被所有的浏览器支持，特别是较旧的浏览器。可以使用工具如Can I use检查浏览器的支持情况。

- 阅读更多 -

Css提高——Css3的新增选择器

System

2024-08-13

所有,css3

在CSS3中，新增了一些选择器，以下是一些常用的CSS3选择器：

属性选择器：用于选择包含特定属性的元素，或者属性值满足特定模式的元素。




/* 选择所有具有data-info属性的元素 */
[data-info] {
  color: blue;
}
 
/* 选择所有name属性为"john"的元素 */
[name='john'] {
  background-color: yellow;
}
 
/* 选择所有name属性值开始为"john"的元素 */
[name^='john'] {
  border: 1px solid black;
}

结构性伪类选择器：用于选择基于文档结构的元素，如：父子关系、兄弟关系等。




/* 选择每个<p>的第一个子元素 */
p > :first-child {
  font-style: italic;
}
 
/* 选择每个<p>的最后一个子元素 */
p > :last-child {
  text-transform: uppercase;
}
 
/* 选择每个<ul>的第2个子元素 */
ul > :nth-child(2) {
  color: red;
}
 
/* 选择每个<ul>的最后一个子元素 */
ul > :last-child {
  color: green;
}

UI元素状态选择器：用于选择基于用户界面状态的元素，如：焦点、悬停、访问等。




/* 选择获得焦点的<input>元素 */
input:focus {
  border: 2px solid red;
}
 
/* 选择被鼠标悬停的<a>元素 */
a:hover {
  text-decoration: underline;
}
 
/* 选择被访问的<a>元素 */
a:visited {
  color: purple;
}

伪元素选择器：用于选择一些选择器所生成的内容，或者某些元素的特殊部分。




/* 选择每个<p>元素生成的内容之前 */
p::before {
  content: '[';
}
 
/* 选择每个<p>元素生成的内容之后 */
p::after {
  content: ']';
}
 
/* 选择每个<p>的第一个字母 */
p::first-letter {
  font-size: 200%;
}

这些选择器可以帮助您更精确地选择和样式化您的网页元素，从而创建更复杂和响应式的设计。

- 阅读更多 -

H5+CSS3+JS逆向前置——DIV+CSS百分比布局

System

2024-08-13

所有,css3

在CSS中，百分比布局允使元素的宽度、高度或者位置根据父元素的宽度、高度的百分比来设置。这是一种灵活的布局方式，适用于响应式设计。

以下是一个简单的HTML和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>
  .container {
    width: 100%;
    height: 300px;
  }
  .column {
    float: left;
    position: relative;
  }
  .column-1 {
    width: 33.33%;
    background-color: #f9f9f9;
    box-sizing: border-box;
    padding: 10px;
  }
  .column-2 {
    width: 33.33%;
    background-color: #f4f4f4;
    box-sizing: border-box;
    padding: 10px;
  }
  .column-3 {
    width: 33.33%;
    background-color: #fafafa;
    box-sizing: border-box;
    padding: 10px;
  }
</style>
</head>
<body>
<div class="container">
  <div class="column column-1">Column 1</div>
  <div class="column column-2">Column 2</div>
  <div class="column column-3">Column 3</div>
</div>
</body>
</html>

在这个例子中，.container 是一个包含块，.column 是列的基本样式，.column-1、.column-2 和 .column-3 分别为三列设置了背景色和内边距。每个.column 的宽度被设置为33.33%，这意味着每个列会占据父元素宽度的三分之一。使用box-sizing: border-box;可以确保内边距和边框不会导致列宽超出百分比指定的宽度。

- 阅读更多 -

js 实现拖拽效果

System

2024-08-13

所有,css3

在JavaScript中实现拖拽效果通常涉及监听鼠标事件并更新元素的位置。以下是一个简单的实现示例：

HTML:




<div id="draggable" style="width: 100px; height: 100px; background: red; position: absolute; cursor: pointer;"></div>

JavaScript:




var dragItem = document.getElementById('draggable');
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
 
dragItem.addEventListener('mousedown', function(event) {
    initialX = event.clientX - xOffset;
    initialY = event.clientY - yOffset;
 
    if (event.target === dragItem) {
        active = true;
    }
});
 
document.addEventListener('mouseup', function() {
    active = false;
});
 
document.addEventListener('mousemove', function(event) {
    if (active) {
        currentX = event.clientX - initialX;
        currentY = event.clientY - initialY;
        
        xOffset = currentX;
        yOffset = currentY;
 
        setTranslate(currentX, currentY, dragItem);
    }
});
 
function setTranslate(xPos, yPos, el) {
    el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

这段代码实现了一个可拖拽的红色方块。当用户点击方块时，mousedown 事件被触发，并记录下鼠标相对元素位置的偏移量。随后在 mousemove 事件中更新元素的位置。当用户释放鼠标按钮时，mouseup 事件被触发，停止拖拽操作。

- 阅读更多 -

CSS动画实现音频播放时柱状波动效果

System

2024-08-13

所有,css3




/* 定义音频播放时的柱状波动效果样式 */
.audio-wave-effect {
    position: relative;
    height: 100px; /* 波形的高度 */
    background: linear-gradient(to right, #5788fe, #b24592); /* 渐变背景色 */
    overflow: hidden; /* 超出容器部分隐藏 */
}
 
.audio-wave-effect::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20px; /* 波形的高度 */
    background: linear-gradient(to right, #5788fe, #b24592); /* 渐变背景色 */
    animation: wave-animation 1s infinite; /* 应用波动动画 */
}
 
@keyframes wave-animation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%); /* 波动范围 */
    }
}

这段代码定义了一个.audio-wave-effect类，它可以被用来创建一个音频播放时的柱状波动效果。::after伪元素用来生成波动的视觉效果，通过@keyframes定义了一个水平方向的波动动画。这个效果可以被应用在音频播放器的视觉表现上，以提升用户体验。

- 阅读更多 -

CSS实现横向滚动-x轴滚动

System

2024-08-13

所有,css3

要在CSS中实现横向滚动，可以使用overflow-x: auto;或overflow-x: scroll;属性，并为需要滚动的内部容器设置一个宽度大于容器本身宽度的宽度。

以下是一个简单的例子：

HTML:




<div class="scroll-container">
  <div class="content">
    <!-- 内容宽度大于.scroll-container的宽度 -->
  </div>
</div>

CSS:




.scroll-container {
  width: 100%; /* 容器宽度 */
  overflow-x: auto; /* 横向滚动条 */
}
 
.content {
  width: 2000px; /* 假设内容宽度很大 */
}

在这个例子中，.scroll-container是需要横向滚动的容器，.content是其中包含内容的子元素。通过设置.content的宽度大于.scroll-container的宽度，当内容宽度超出.scroll-container时，横向滚动条就会出现，允许用户滚动查看全部内容。

- 阅读更多 -

UniApp仿支付宝账单筛选

System

2024-08-13

所有,css3

在UniApp中，假设您需要实现类似支付宝账单筛选的功能，可以通过下面的示例代码来实现：




<template>
  <view class="container">
    <view class="filter-bar">
      <view class="filter" v-for="(item, index) in filters" :key="index">
        <text>{{ item.name }}</text>
        <view class="filter-options">
          <view
            class="option"
            v-for="(option, idx) in item.options"
            :key="idx"
            @click="selectOption(item.name, option)"
          >
            {{ option }}
          </view>
        </view>
      </view>
    </view>
    <!-- 筛选结果展示 -->
    <view class="result">
      <text>筛选结果：</text>
      <text v-for="(value, key) in selected" :key="key">{{ key }}: {{ value }} </text>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      filters: [
        {
          name: '类型',
          options: ['支出', '收入']
        },
        {
          name: '来源',
          options: ['转账', '转账', '支付']
        },
        // 可以根据需要添加更多筛选项
      ],
      selected: {}
    };
  },
  methods: {
    selectOption(filterName, option) {
      this.selected[filterName] = option;
    }
  }
};
</script>
 
<style>
.container {
  padding: 20px;
}
.filter-bar {
  margin-bottom: 10px;
}
.filter {
  margin-bottom: 10px;
}
.filter-options {
  display: flex;
  flex-wrap: wrap;
}
.option {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
}
.result {
  margin-top: 10px;
}
</style>

这段代码提供了一个简单的账单筛选示例，包括两个筛选项：“类型”和“来源”。用户可以从每个筛选项的选项列表中选择一个选项，选择后会更新筛选结果。这个示例可以根据需要扩展，添加更多的筛选项和选项。

- 阅读更多 -

flex伸缩布局看着一篇就够啦

System

2024-08-13

所有,css3

在Flex布局中，通过设置容器的display属性为flex或inline-flex，可以创建一个灵活的布局模型。以下是一个简单的Flex布局示例，它演示了如何使用Flex布局来排列子元素：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex; /* 或者 inline-flex */
  flex-direction: row; /* 默认值，也可以是 column 或 row-reverse 或 column-reverse */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: flex-start; /* 水平方向上的对齐方式 */
  align-items: center; /* 垂直方向上的对齐方式 */
}
 
.flex-item {
  margin: 5px; /* 为了更好的展示效果，给每个子元素加上一点外边距 */
  padding: 10px; /* 填充也可以让子元素更容易看清楚 */
  background-color: lightblue; /* 背景色，使得子元素更容易看清楚 */
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <!-- 更多的子元素 -->
</div>
 
</body>
</html>

在这个例子中，.flex-container 类使得容器使用Flex布局，.flex-item 类使得所有子元素有相同的样式。通过调整Flex容器的属性，可以控制布局的方向、换行、对齐等方面。

- 阅读更多 -

css和js两种方式实现div右移1000px动画

System

2024-08-13

所有,css3

CSS 方式：




@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(1000px);
  }
}
 
.div-move {
  animation: moveRight 2s forwards;
}

HTML:




<div class="div-move">我将向右移动。</div>

JavaScript 方式：




const div = document.querySelector('.div-move');
 
function animate(duration, callback) {
  const start = performance.now();
  requestAnimationFrame(function animate(time) {
    const progress = (time - start) / duration;
    if (progress < 1) {
      callback(progress);
      requestAnimationFrame(animate);
    }
  });
}
 
animate(2000, (progress) => {
  div.style.transform = `translateX(${progress * 1000}px)`;
});

HTML:




<div class="div-move">我将向右移动。</div>

在这两种方法中，我们都定义了一个动画，使得一个 div 元素在2秒内向右移动1000像素。CSS 方法使用了 @keyframes 规则和 animation 属性，而 JavaScript 方法使用了 requestAnimationFrame 函数来实现流畅的动画效果。

- 阅读更多 -

【CSS 布局】-多列布局

System

2024-08-13

所有,css3

CSS 多列布局可以使用 column 相关属性来实现。以下是一些常用的属性：

column-count：定义列数。
column-gap：定义列与列之间的间隙。
column-rule：定义列之间的分隔线（类似于边框的样式）。

示例代码：




.multi-column {
  column-count: 3;       /* 定义列数为3 */
  column-gap: 20px;      /* 列与列之间的间隙为20px */
  column-rule: 1px solid #ccc; /* 列之间的分隔线样式 */
}

HTML 代码：




<div class="multi-column">
  <p>
    这里是一些文本内容，将会被自动分布到三列中。
    可以包含任意文本内容，并且能够根据浏览器窗口大小自动调整列的数量。
  </p>
</div>

在上述示例中，.multi-column 类应用于一个 <div> 元素，该元素中包含一个 <p> 元素，其中包含文本内容。这段文本内容将会被分布到三列中，列与列之间的间隙为20px，列之间的分隔线颜色为灰色。

- 阅读更多 -