分类 css3 下的文章

2024-08-17

在CSS中，可以使用display属性或visibility属性来控制元素的显示和隐藏。

使用display属性：
- display: none; 可以隐藏元素，并且元素不会占据任何空间。
- display: block; 可以显示元素，通常用于将元素转换为块级元素。
- display: inline; 可以显示元素，通常用于将元素转换为行内元素。
- display: flex; 可以显示元素，并使用弹性盒模型布局。
使用visibility属性：
- visibility: hidden; 可以隐藏元素，但元素仍然占据空间。
- visibility: visible; 可以显示元素。

示例代码：




/* 隐藏元素 */
.hide-display {
  display: none;
}
 
.hide-visibility {
  visibility: hidden;
}
 
/* 显示元素 */
.show-display {
  display: block; /* 或者 inline, flex 等 */
}
 
.show-visibility {
  visibility: visible;
}

在HTML中使用这些类：




<!-- 使用display属性隐藏 -->
<div class="hide-display">这个元素被隐藏了</div>
<div class="show-display">这个元素被显示了</div>
 
<!-- 使用visibility属性隐藏 -->
<div class="hide-visibility">这个元素被隐藏了，但仍占据空间</div>
<div class="show-visibility">这个元素被显示了</div>

使用display: none;时，元素不仅被隐藏，而且在文档流中不再占据空间。使用visibility: hidden;时，元素仍然存在于文档流中，但是被设置为不可见状态。根据需求选择合适的属性来显示或隐藏元素。

- 阅读更多 -

html实现文字滚动

System

2024-08-17

所有,css3

在HTML中实现文字滚动，可以使用<marquee>标签。不过请注意，<marquee>是一个非标准的HTML元素，已被W3C宣布弃用，不推荐在生产环境中使用。

以下是使用<marquee>实现文字滚动的简单示例：




<marquee behavior="scroll" direction="left">这是滚动的文字</marquee>

如果需要更现代的解决方案，可以使用CSS配合JavaScript实现滚动效果。以下是一个使用CSS Keyframes和无限动画实现的文字滚动效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动文字示例</title>
<style>
  .scroll-text {
    overflow: hidden;
    white-space: nowrap;
    animation: scroll 10s linear infinite;
  }
 
  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>
</head>
<body>
 
<div class="scroll-text">
  这是使用CSS和JavaScript实现的滚动文字效果。
</div>
 
</body>
</html>

这段代码会创建一个类名为scroll-text的容器，其中的文字会不断从右向左滚动。通过CSS @keyframes规则定义了一个名为scroll的动画，它将容器从右边界向左边界进行平移，并通过无限循环的动画实现连续滚动的效果。

- 阅读更多 -

【Layui】------table表格内容自动适应高度无省略号

System

2024-08-17

所有,css3

在使用 layui 的 table 组件时，如果你想让表格的内容自动适应列高，并且不出现省略号，可以通过设置 table 的 auto 参数来实现。

以下是一个简单的实例代码，展示如何让表格的内容自适应列高：




<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Table 自适应高度</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css"  media="all">
</head>
<body>
 
<table class="layui-table" lay-data="{height: 'full-200', autoSort: false}" id="demo">
  <thead>
    <tr>
      <th lay-data="{field:'title', width:200}">标题</th>
      <th lay-data="{field:'content', width:200}">内容</th>
    </tr>
  </thead>
</table>
  
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  // 假设你的数据源是一个返回 JSON 数据的地址
  table.render({
    elem: '#demo',
    url: 'your-data-source.json', // 数据接口
    cols: [[ // 表头
      {field: 'title', title: '标题', width: 200},
      {field: 'content', title: '内容', width: 200}
    ]]
  });
});
</script>
 
</body>
</html>

在这个例子中，我们设置了表格的 height 属性为 'full-200'，这意味着表格的高度会自动适应父容器的高度，并且减去 200px。这样，表格内容如果超出了设定的高度，就不会出现省略号，而是自动滚动。

请确保你的父容器有足够的高度，否则 'full-200' 的值可能需要根据实际情况调整。此外，数据源 your-data-source.json 需要替换为你实际的数据接口。

- 阅读更多 -

CSS3两个动画顺序衔接播放

System

2024-08-17

所有,css3

在CSS3中，要使两个动画顺序播放，可以使用animation-delay属性来设置动画开始的延迟时间。这样，第二个动画可以在第一个动画完成后开始。

以下是一个简单的例子，演示了如何使用animation-delay来实现这一效果：




/* 定义第一个动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 定义第二个动画 */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
 
/* 应用动画到元素上 */
.element {
  /* 第一个动画 */
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards; /* 保持动画结束状态 */
 
  /* 第二个动画 */
  animation-name: slideIn;
  animation-duration: 1s;
  animation-delay: 2s; /* 设置第二个动画开始的延迟 */
  animation-fill-mode: forwards; /* 保持动画结束状态 */
}

在这个例子中，.element将先执行fadeIn动画2秒钟，然后在动画结束后延迟2秒开始执行slideIn动画。通过设置animation-fill-mode为forwards，动画结束时元素将保持最后一帧的状态。

- 阅读更多 -

CSS3 边框、圆角、背景

System

2024-08-17

所有,css3

CSS3 提供了丰富的样式属性，可以用来创建各种效果。以下是如何使用 CSS3 的边框、圆角和背景属性来装饰一个元素的示例代码：




/* 设置边框宽度、样式和颜色 */
.box {
  border: 2px solid #000;
}
 
/* 设置圆角大小 */
.rounded-box {
  border-radius: 10px;
}
 
/* 设置背景图片 */
.background-box {
  background-image: url('background.jpg');
  background-size: cover; /* 背景图片覆盖整个元素 */
}
 
/* 设置背景颜色 */
.colored-box {
  background-color: #f0f0f0;
}

HTML 使用这些样式的元素：




<div class="box rounded-box colored-box">这是一个有边框、圆角和背景颜色的盒子</div>
<div class="box rounded-box background-box">这是一个有边框、圆角和背景图片的盒子</div>

在这个例子中，我们创建了两个 div 元素，分别应用了不同的样式类。第一个盒子有边框、圆角和背景颜色，第二个盒子有边框、圆角和背景图片。通过组合不同的类，CSS 允许你灵活地装饰你的网页元素。

- 阅读更多 -

DIV+CSS三种页面布局

System

2024-08-17

所有,css3

三种常用的CSS页面布局是：固定宽度布局、流体布局和响应式布局。以下是每种布局的简单示例：

固定宽度布局：




<div style="width: 960px; margin: 0 auto;">
  页面内容
</div>

流体布局：




<div style="width: 100%;">
  页面内容
</div>

响应式布局（使用媒体查询实现）：




<div class="container">
  页面内容
</div>
 
<style>
  .container {
    width: 100%;
  }
 
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
 
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
  }
 
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }
</style>

这些布局方式可以根据页面内容和设计需求灵活选择和组合使用。固定宽度布局适合静态或简单页面，流体布局适合响应式设计，而响应式布局可以在多种屏幕尺寸下保持良好的用户体验。

- 阅读更多 -

uniapp（vue3）cavans实现电子签名功能

System

2024-08-17

所有,css3

在uniapp中使用Canvas实现电子签名功能，你可以通过监听触摸事件来实现。以下是一个简单的示例，展示了如何在uniapp的Vue3项目中实现这一功能：




<template>
  <view>
    <canvas canvas-id="signature-canvas" @touchstart="startSign" @touchmove="drawSign" @touchend="endSign"></canvas>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      canvasCtx: null,
      isSigning: false,
      lastPoint: {},
    };
  },
  onReady() {
    this.canvasCtx = uni.createCanvasContext('signature-canvas', this);
    this.canvasCtx.setLineWidth(3); // 设置线宽
    this.canvasCtx.setLineCap('round'); // 设置线条样式为圆形端点
    this.canvasCtx.setStrokeStyle('#000'); // 设置笔触颜色
  },
  methods: {
    startSign(event) {
      this.isSigning = true;
      const { x, y } = event.touches[0];
      this.lastPoint = { x, y };
    },
    drawSign(event) {
      if (this.isSigning) {
        const { x, y } = event.touches[0];
        this.canvasCtx.moveTo(this.lastPoint.x, this.lastPoint.y);
        this.canvasCtx.lineTo(x, y);
        this.canvasCtx.stroke();
        this.lastPoint = { x, y };
      }
    },
    endSign() {
      this.isSigning = false;
    }
  }
};
</script>
 
<style>
/* 样式按需定制 */
canvas {
  width: 100%;
  height: 300px; /* 根据需要设置画布大小 */
}
</style>

在这个例子中，我们首先在data中初始化了canvasCtx和签名状态变量。在组件准备就绪时（onReady生命周期钩子），我们创建了Canvas上下文并设置了线条宽度和样式。

startSign方法在用户开始触摸时被调用，记录下起始点。drawSign方法在用户移动手指时被调用，记录下当前点并绘制线条。endSign方法在用户触摸结束时被调用，表示签名过程结束。

这个简单的例子提供了一个基础的电子签名实现，你可以根据需要对其进行扩展，比如添加清除签名、保存签名为图片等功能。

- 阅读更多 -

CSS3技巧36：让内容垂直居中的三种方式

System

2024-08-17

所有,css3

在CSS中，有几种方法可以使内容垂直居中。以下是三种常见的方法：

使用Flexbox布局:




.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

使用Grid布局:




.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}

使用绝对定位和transform:




.container {
  position: relative;
}
 
.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 如果需要水平居中，还需要设置左边距并加上transform: translate(-50%, -50%); */
}

这三种方法各有优缺点，Flexbox和Grid相对更简单易用，而绝对定位和transform则提供了更多的定制化选项。根据具体需求选择合适的方法。

- 阅读更多 -

css3 transform的旋转和位移制作太阳花

System

2024-08-17

所有,css3

要使用CSS3的transform属性来制作一个太阳花，你需要进行两个步骤：旋转和位移。以下是一个简单的例子：

HTML:




<div class="sunflower">
  <div class="petals"></div>
</div>

CSS:




.sunflower {
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(45deg);
}
 
.petals {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  border-radius: 100px 100px 0 0;
  transform-origin: 50% -50%;
}
 
.petals:before, .petals:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: inherit;
  border-radius: 100px 100px 0 0;
}
 
.petals:before {
  transform: rotate(-45deg);
}
 
.petals:after {
  transform: rotate(45deg);
}

这段代码创建了一个基本的太阳花，它有两个花瓣，通过旋转.petals类来实现，并通过:before和:after伪元素来创建两个额外的花瓣。这些花瓣是由.petals的父元素.sunflower旋转得到的。

- 阅读更多 -

HTML5 CSS3 诱人的实例：canvas 模拟实现电子彩票刮刮乐

System

2024-08-17

所有,css3

以下是一个简化的示例，展示了如何使用HTML5 <canvas> 元素和 JavaScript 来模拟电子彩票的刮刮乐效果：




<!DOCTYPE html>
<html>
<head>
<style>
  canvas {
    border:1px solid #000;
  }
</style>
</head>
<body>
 
<canvas id="canvas" width="300" height="300"></canvas>
 
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var isDrawing = false;
  var lastX = 0;
  var lastY = 0;
  var hue = 0;
 
  function draw(e) {
    if (!isDrawing) return;
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.strokeStyle = 'hsl(' + hue + ', 100%, 50%)';
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
 
    lastX = e.offsetX;
    lastY = e.offsetY;
 
    hue++;
  }
 
  canvas.addEventListener('mousedown', function(e) {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
  });
 
  canvas.addEventListener('mousemove', draw);
 
  canvas.addEventListener('mouseup', function() {
    isDrawing = false;
  });
 
  canvas.addEventListener('mouseleave', function() {
    isDrawing = false;
  });
</script>
 
</body>
</html>

这段代码实现了简单的绘画功能，并且在用户拖动鼠标时开始绘画，在鼠标松开时结束。通过监听鼠标的移动事件来实时绘制线条，并且为每条线条分配一个随机的色调以模拟多彩的彩票效果。当用户离开绘画区域时，也结束绘画。这个示例提供了基本的引导，可以根据需要添加更多高级功能，如重置、确认、记录奖励等。

- 阅读更多 -