标签 css 下的文章

2024-08-24




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5, CSS3 和 JavaScript 基础示例</title>
    <style>
        body { font-family: Arial, sans-serif; }
        header, nav, section, footer {
            border: 1px solid #000;
            margin-bottom: 10px;
            padding: 5px;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        nav ul li { display: inline; }
        section {
            width: 500px;
            margin: 0 auto;
            padding: 10px;
        }
        time {
            color: #888;
            font-size: 0.8em;
        }
        .highlight { background-color: yellow; }
    </style>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <section>
        <h2>最新文章</h2>
        <article>
            <h3><a href="#">文章标题</a></h3>
            <p>这里是文章的摘要...</p>
            <time datetime="2023-04-01">2023年4月1日</time>
        </article>
    </section>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script>
        // 这里可以编写JavaScript代码来增强网页功能
    </script>
</body>
</html>

这个代码实例展示了如何使用HTML5、CSS3和JavaScript为一个简单的网站创建基础的结构和样式，同时提供了一个<script>标签用于插入JavaScript代码。这个示例旨在教学如何搭建一个基本的网站架构，并提供了一个学习HTML、CSS和JavaScript的起点。

- 阅读更多 -

【CSS卡片翻转特效】CSS3实现3D旋转动画卡片翻转效果

System

2024-08-24

所有,css3




/* 定义基本的卡片样式 */
.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 的用法，以及如何通过伪类触发动画。

2024-08-24

以下是一个使用CSS实现跳动足球的简单示例：

HTML:




<div class="soccer-ball"></div>

CSS:




.soccer-ball {
  width: 100px;
  height: 100px;
  background: url('soccer-ball.png') no-repeat;
  background-size: cover;
  border-radius: 50%;
  position: relative;
  animation: bounce 2s infinite;
}
 
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-30px);
    animation-timing-function: ease-in;
  }
}

确保你有足球图片 soccer-ball.png 或者替换为你的足球图片路径。这段代码会创建一个在上下跳动的足球动画。

- 阅读更多 -

CSS:利用浮动实现多个盒子并排

System

2024-08-24

所有,css3

在CSS中，可以使用float属性来实现多个盒子并排排列。这里提供一个简单的例子，展示如何使用float来实现三个盒子并排排列。

HTML代码：




<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
</div>

CSS代码：




.box {
  float: left; /* 设置盒子向左浮动 */
  width: 100px; /* 设置盒子宽度 */
  height: 100px; /* 设置盒子高度 */
  margin: 5px; /* 设置盒子之间的间距 */
  background-color: #f0f0f0; /* 设置盒子背景色 */
  text-align: center; /* 设置文本居中 */
  line-height: 100px; /* 设置文本行高居中 */
}

在这个例子中，.box类定义了盒子的共同样式，包括浮动、宽度、高度、背景色和文本居中样式。.box类应用于每个盒子元素，使它们并排排列。通过设置float: left;，每个盒子会尽可能地向左浮动并排排列。如果父容器（.container）的宽度不足以并排放下所有盒子，那么后面的盒子会自动移到前一个盒子下方。

- 阅读更多 -