标签 css3 下的文章

2024-08-24




/* 定义基本的卡片样式 */
.card {
  width: 300px;
  height: 400px;
  perspective: 1000px;
}
 
/* 定义卡片容器的样式 */
.card-container {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 开启3D空间 */
  transition: transform 1s; /* 定义过渡动画 */
}
 
/* 定义卡片背面的样式 */
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 背面不可见 */
  background: url('back.jpg') no-repeat center center;
  background-size: cover;
}
 
/* 定义卡片正面的样式 */
.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('front.jpg') no-repeat center center;
  background-size: cover;
  backface-visibility: hidden; /* 正面不可见 */
}
 
/* 当卡片容器应用旋转时，正面和背面都旋转显示 */
.card-container.flip .card-front {
  transform: rotateY(180deg);
}
 
.card-container.flip .card-back {
  transform: rotateY(0deg);
}
 
/* HTML结构 */
<div class="card">
  <div class="card-container">
    <div class="card-front"></div>
    <div class="card-back"></div>
  </div>
</div>
 
<!-- 使用JavaScript触发卡片翻转 -->
<script>
  const container = document.querySelector('.card-container');
  container.addEventListener('click', function() {
    container.classList.toggle('flip');
  });
</script>

这段代码展示了如何使用CSS3创建一个点击后可以翻转的卡片动画。当用户点击卡片容器时，.flip 类被添加到容器上，导致卡片翻转并展示背面。背景图片和样式已简化，实际应用中需要替换为实际的图片路径和样式。

- 阅读更多 -

【CSS3】使用纯CSS做一个简易轮播图

System

2024-08-24

所有,css3

以下是一个使用纯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>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
    overflow: hidden;
  }
 
  .slider img {
    width: 1200px;
    height: auto;
    position: absolute;
    transition: all ease 1s;
  }
 
  .slider img:nth-child(n+2) {
    left: 300px;
  }
 
  .slider img:nth-child(n+3) {
    left: 600px;
  }
 
  .slider img:nth-child(n+4) {
    left: 900px;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>
 
<script>
  let currentIndex = 0;
  const images = document.querySelectorAll('.slider img');
  const imageCount = images.length;
 
  setInterval(function() {
    images[currentIndex].style.left = '-300px';
    currentIndex = (currentIndex + 1) % imageCount;
    images[currentIndex].style.left = '0px';
  }, 3000);
</script>
 
</body>
</html>

这段代码创建了一个简单的轮播图，通过JavaScript的setInterval函数每三秒更换一次图片。图片通过CSS的position和left属性进行定位切换。这个示例假设有四张图片，每张图片的宽度是300px，并且总宽度为1200px，以适配四张并排展示。

- 阅读更多 -

前端学习＜二＞CSS基础——17-CSS3的常见边框汇总

System

2024-08-24

所有,css3

CSS3提供了更多样化的边框样式，包括圆角、阴影、边框图片等。以下是一些CSS3的常用边框样式属性的示例代码：




/* 圆角 */
.box {
  border: 2px solid black;
  border-radius: 10px; /* 圆角大小 */
}
 
/* 阴影 */
.shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
 
/* 边框图片 */
.border-image {
  border: 10px solid transparent;
  border-image-source: url('border.png');
  border-image-slice: 27; /* 分割图片的宽度 */
  border-image-width: 3px; /* 边框的宽度 */
  border-image-outset: 2px; /* 边框图像超出边框宽度 */
  border-image-repeat: stretch; /* 图像的平铺方式 */
}

在HTML中使用这些样式：




<div class="box">带圆角和阴影的盒子</div>
<div class="shadow">带阴影的盒子</div>
<div class="border-image">带边框图片的盒子</div>

这些代码演示了如何使用CSS3的边框样式来增强网页的视觉效果。

System

2024-08-24

所有,css3

以下是一个简化的HTML+JavaScript+CSS3示例，用于演示如何捕获用户的摄像头图像并转换为File对象，以便可以通过前端进行人脸识别处理。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Face Recognition</title>
<style>
    video {
        width: 320px;
        height: 240px;
        margin: 10px;
        border: 1px solid black;
    }
    canvas {
        display: none;
    }
</style>
</head>
<body>
<video id="video" autoplay></video>
<button id="capture">Capture Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const captureButton = document.getElementById('capture');
 
    // 确保用户允许访问摄像头
    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (err0r) {
                console.log("Error: " + err0r);
            });
    }
 
    captureButton.addEventListener('click', function () {
        context.drawImage(video, 0, 0, canvas.width, canvas.height); // 绘制视频帧到canvas
        const base64Image = canvas.toDataURL('image/png'); // 将canvas转换为base64图片
 
        // 将base64转换为File对象
        fetch(base64Image)
            .then(res => res.blob())
            .then(blob => {
                // 创建File对象
                const file = new File([blob], "snapshot.png", {
                    type: 'image/png',
                    lastModified: Date.now()
                });
 
                // 这里可以将file对象传递给其他函数，例如用于人脸识别
                // processFaceRecognition(file);
                console.log(file);
            });
    });
</script>
</body>
</html>

在这个例子中，我们首先检查浏览器是否支持getUserMedia。如果支持，我们使用它来访问用户的摄像头，并在video元素中显示视频流。用户点击按钮后，我们捕获当前视频流中的一帧，将其绘制到canvas上，并将canvas转换为base64格式的图片。然后我们使用fetch和blob将base64图片转换为File对象。

注意：实际的人脸识别处理需要与后端服务配合，这里仅展示了前端的图片捕获和转换流程。

- 阅读更多 -

CSS3:图片边框

System

2024-08-24

所有,css3

要为图片添加边框，可以使用CSS3的border-image属性。这个属性允许你指定一个图片作为边框，并且可以对其进行切片、重复方式和填充方式的设定。

以下是一个简单的例子，演示如何为图片添加一个边框：

HTML:




<div class="image-border">
  <img src="image.jpg" alt="示例图片">
</div>

CSS:




.image-border {
  border: 10px solid transparent; /* 创建透明边框，为border-image提供空间 */
  border-image-source: url(border.png); /* 边框图片的路径 */
  border-image-slice: 30; /* 边框图片的分割比例，可以是数值或者百分比 */
  border-image-width: 10px; /* 边框图片的宽度 */
  border-image-outset: 5px; /* 边框图片外部的扩展距离 */
  border-image-repeat: stretch; /* 如何填充边框图片 */
}
 
.image-border img {
  display: block; /* 避免图片下方出现空隙 */
}

在这个例子中，.image-border 类定义了边框的样式，border-image-source 指向用作边框的图片，border-image-slice 切割图片以便边框可以填充整个容器，其他属性则控制边框的外观和行为。

请确保你的图片路径和切片值根据实际情况进行调整。

- 阅读更多 -

CSS3的新属性标签：让网页设计更丰富、更多样

System

2024-08-24

所有,css3

CSS3是CSS技术的一个版本，它在2011年被公布，并且持续进行更新。CSS3引入了许多新的属性和功能，这些新增的属性和功能让网页设计师可以创建出更加丰富和动态的网页设计。

以下是一些CSS3的新属性：

圆角（border-radius）：这个属性可以让你创建圆角矩形，而不是标准的直角。




div {
  border: 2px solid #a1a1a1;
  border-radius: 25px;
  background: #fff;
  padding: 20px;
  width: 300px;
  height: 100px;
}

阴影（box-shadow）：这个属性可以创建图形的阴影效果。




div {
  width: 300px;
  height: 100px;
  background: #fff;
  box-shadow: 10px 10px 5px #888888;
}

渐变（gradients）：这个属性可以创建从一种颜色平滑过渡到另一种颜色的效果。




div {
  width: 300px;
  height: 100px;
  background: linear-gradient(to right, red , yellow);
}

变换（transforms）：这个属性可以对元素进行旋转、缩放、倾斜等操作。




div {
  width: 100px;
  height: 100px;
  background: #3498db;
  transform: rotate(45deg);
}

动画（animations）：这个属性可以创建复杂的动画效果。




@keyframes myfirst
{
  from {background: red;}
  to {background: yellow;}
}
 
div
{
  width: 100px;
  height: 100px;
  animation-name: myfirst;
  animation-duration: 5s;
}

媒体查询（Media Queries）：这个属性可以让你根据显示屏幕的大小和分辨率来调整网页的布局。




/* 在屏幕宽度小于600px时应用这个样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

圆形图片（border-image）：这个属性可以让你创建圆形的图片。




div {
  border: 8px solid transparent;
  width: 100px;
  height: 100px;
  border-image: url(border.png) 30 round;
}

2D/3D转换（transform）：这个属性可以进行各种3D转换。




div {
  width: 100px;
  height: 100px;
  background: red;
  transform: rotateY(45deg);
}

过渡效果（transition）：这个属性可以在改变属性值时产生平滑的过渡效果。




div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
 
div:hover {
  width: 200px;
}

文字效果（text-shadow）：这个属性可以创建文字的阴影效果。




p {
  text-shadow: 5px 5px 5px #000000;
}

- 阅读更多 -

uniapp纯CSS3渐变线条脉冲动画效果

System

2024-08-24

所有,css3




/* 定义一个圆形进度条容器 */
.progress-ring {
  width: 100px;
  height: 100px;
  position: relative;
}
 
/* 定义圆形轮廓，并设置渐变背景 */
.progress-ring::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: conic-gradient(
    #3498db 0%,
    #3498db 50%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: auto 100%;
  background-repeat: no-repeat;
  transition: background-position 2s infinite; /* 设置背景位置的过渡动画，实现动态效果 */
}
 
/* 触发动画 */
.progress-ring:hover::after {
  background-position: 0 100%; /* 动画触发点，从上到下 */
}

这段代码定义了一个圆形容器，并在其伪元素中使用渐变背景创建了一个线条。通过改变伪元素的背景位置，我们可以触发一个从上到下的动画过渡效果，模拟出脉冲动画。这个例子展示了CSS3的 conic-gradient 和 background-position 的用法，以及如何通过伪类触发动画。

- 阅读更多 -

day11_2 CSS3弹性盒子flexbox

System

2024-08-24

所有,css3

弹性盒子（Flexible Box，Flexbox）是CSS3的一种新布局模式，主要用来提供一种更灵活的方式来对容器中的条目进行排列、对齐和分配空间。

以下是一个简单的弹性盒子示例代码：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:




.flex-container {
  display: flex; /* 使用弹性盒子布局 */
  width: 100%; /* 容器宽度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 间距 */
  padding: 15px; /* 填充 */
  color: white; /* 字体颜色 */
  font-size: 16px; /* 字体大小 */
  text-align: center; /* 文本居中 */
}
 
/* 这里可以添加更多的样式来定制弹性盒子的行为 */

这个例子中，.flex-container 类使用 display: flex; 属性使得其子元素（.flex-item 类）默认会使用弹性盒子布局。这意味着所有子元素会被排列在一行内，并根据容器的大小自动伸缩。

- 阅读更多 -

CSS3：绘制多边形

System

2024-08-24

所有,css3

在CSS3中，您可以使用clip-path属性来绘制多边形。clip-path属性允许您创建一个只有元素的某个区域可以显示的剪裁路径。您可以定义一个多边形的顶点，然后这个多边形将成为元素的剪裁区域。

以下是一个使用clip-path属性来绘制一个三角形的例子：




.triangle {
  width: 200px;
  height: 200px;
  background-color: red;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

HTML部分：




<div class="triangle"></div>

在这个例子中，.triangle类的clip-path属性设置为polygon(50% 0%, 100% 100%, 0% 100%)，这定义了一个三角形。每一对值定义了多边形顶点的x和y坐标（基于元素的宽度和高度）。

您可以根据需要调整clip-path属性中的坐标值来创建不同形状的多边形。

System

2024-08-24

所有,css3




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基础布局</title>
    <style>
        body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
    </style>
</head>
<body>
    <h1>我的第一篇博客</h1>
    <p>这是一个段落。</p>
    <hr>
    <!-- 文字强调 -->
    <p>这是<strong>粗体</strong>文本。</p>
    <p>这是<em>斜体</em>文本。</p>
    <p>这是<abbr title="Hypertext Markup Language">HTML</abbr>。</p>
    <hr>
    <!-- 图片 -->
    <img src="path/to/image.jpg" alt="描述文字">
    <hr>
    <!-- 链接 -->
    <a href="https://www.example.com">访问我的主页</a>
    <a href="mailto:someone@example.com">发送邮件</a>
    <hr>
    <!-- 音频 -->
    <audio controls>
        <source src="path/to/audio.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 元素。
    </audio>
</body>
</html>

这个代码示例展示了如何在HTML5中使用不同的标签来创建一个基础的网页布局，包括标题、段落、图片、链接和音频。同时，使用了CSS来设置字体样式。这些是前端开发的基础知识，对于学习前端开发的开发者来说具有很好的教育价值。

- 阅读更多 -