标签 css3 下的文章

2024-08-17

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 允许你灵活地装饰你的网页元素。

- 阅读更多 -

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>

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

- 阅读更多 -

CSS3属性之text-overflow:ellipsis详解

System

2024-08-17

所有,css3

text-overflow: ellipsis 是 CSS3 的一个属性，它用来说明当文本溢出包含它的元素时，应该如何显示文本的溢出部分。这个属性通常与 white-space: nowrap 和 overflow: hidden 属性一起使用，以确保文本在一行内显示，并且溢出的部分被省略号（...）替换。

解决方案：

单行文本溢出显示省略号：




.ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 溢出的内容显示为省略号 */
}




<div class="ellipsis">这是一段很长的文本，但是我们只希望在一行内显示，并且超出的部分用省略号表示。</div>

多行文本溢出显示省略号：

对于多行文本溢出显示省略号，CSS3 还没有一个通用的解决方案，但是可以使用 -webkit-line-clamp 属性配合 display: -webkit-box 和 -webkit-box-orient: vertical 实现。




.multi-line-ellipsis {
  display: -webkit-box; /* 使元素成为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 设置盒子的垂直排列 */
  -webkit-line-clamp: 3; /* 设置文本的行数 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 溢出的内容显示为省略号 */
}




<div class="multi-line-ellipsis">这是一段很长的文本，但是我们只希望显示前面的几行，超出的部分用省略号表示。这样可以保持布局的整洁，同时用户可以点击查看更多内容。</div>

注意：-webkit-line-clamp 属性是一个不是标准的 CSS 属性，它仅在基于 WebKit 的浏览器中有效，比如 Chrome、Safari 和 Opera 浏览器。Firefox 和 Internet Explorer 并不支持这个属性。

- 阅读更多 -

探索DivSugar：CSS3的3D图形库

System

2024-08-17

所有,css3

DivSugar是一个用于创建3D图形的库，它使用CSS3的特性来创建3D图形。以下是一个使用DivSugar创建3D立方体的简单示例：




<!DOCTYPE html>
<html>
<head>
    <title>3D立方体示例</title>
    <script src="https://cdn.jsdelivr.net/npm/divsugar@0.3.0/dist/divsugar.min.js"></script>
    <style>
        .cube {
            width: 100px;
            height: 100px;
            transform-style: preserve-3d;
            perspective: 500px;
        }
        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #f0f0f0;
            border: 1px solid #ccc;
        }
        .front {
            background: #ffcccc;
        }
        .back {
            background: #ccccff;
            transform: rotateY(180deg);
        }
        .left {
            background: #ccffcc;
            transform: rotateY(90deg) rotateZ(90deg);
        }
        .right {
            background: #ccffcc;
            transform: rotateY(-90deg) rotateZ(90deg);
        }
        .top {
            background: #ffccff;
            transform: rotateX(90deg);
        }
        .bottom {
            background: #ffccff;
            transform: rotateX(-90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face left"></div>
        <div class="face right"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
    </div>
</body>
</html>

这段代码展示了如何使用DivSugar和CSS3创建一个简单的3D立方体。每个面都有不同的背景颜色，以便于区分。CSS中的transform-style: preserve-3d;属性使得子元素应用3D转换时能保持其3D位置，而perspective: 500px;属性为3D立方体添加了透视效果。每个面都通过不同的transform属性进行旋转以形成完整的立方体结构。

- 阅读更多 -

HTML5 & CSS3常见新特性

System

2024-08-17

所有,css3

HTML5 和 CSS3 的常见新特性包括：

语义化标签：如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等。
画布（Canvas）：使用 JavaScript 进行图形绘制。
视频和音频：<video> 和 <audio> 标签。
表单控件增强：如数值输入、日期输入、时间输入、颜色选择器等。
CSS3 特效和变换：如阴影、渐变、边框、圆角、变换等。
CSS3 布局：如弹性盒子（Flexbox）、网格（Grid）布局。
媒体查询：响应式设计。

以下是一些简单的示例代码：

HTML5 示例：




<header>头部信息</header>
<nav>导航链接</nav>
<section>
  <article>
    <h1>文章标题</h1>
    <p>这是一个段落。</p>
  </article>
</section>
<aside>侧边内容</aside>
<footer>底部信息</footer>

CSS3 示例：




/* 圆角边框和阴影效果 */
div {
  border-radius: 10px;
  box-shadow: 5px 5px 10px #888888;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* 媒体查询实现响应式设计 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

画布（Canvas）示例：




<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.beginPath();
  ctx.arc(70, 40, 30, 0, 2 * Math.PI);
  ctx.fill();
</script>

视频和音频示例：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

- 阅读更多 -

css3背景渐变

System

2024-08-17

所有,css3

CSS3 背景渐变可以使用 linear-gradient() 创建线性渐变或者 radial-gradient() 创建径向渐变。

线性渐变：




.linear-gradient {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

径向渐变：




.radial-gradient {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}

例子：

线性渐变从上到下，从红色到蓝色：




div {
  height: 100px;
  background: linear-gradient(to bottom, red, blue);
}

径向渐变从中心开始，由蓝色向透明色过渡：




div {
  height: 100px;
  background: radial-gradient(circle at center, blue, transparent);
}

System

2024-08-17

所有,css3




/* 设置文本的对齐方式 */
p.text-align {
  text-align: center; /* 文本居中对齐 */
}
 
/* 设置文本的装饰样式 */
p.text-decoration {
  text-decoration: underline; /* 文本下划线 */
}
 
/* 设置文本的缩进 */
p.text-indent {
  text-indent: 2em; /* 文本首行缩进2个字体大小 */
}
 
/* 设置文本的 Shadow 效果 */
p.text-shadow {
  text-shadow: 2px 2px 2px #000; /* 文本阴影，水平偏移2px，垂直偏移2px，模糊半径2px，颜色为黑色 */
}
 
/* 设置文本的样式 */
p.font-style {
  font-style: italic; /* 文本斜体 */
}
 
/* 设置文本的变体 */
p.font-variant {
  font-variant: small-caps; /* 小型大写字母 */
}
 
/* 设置文本的加粗 */
p.font-weight {
  font-weight: bold; /* 文本加粗 */
}
 
/* 设置文本的大小 */
p.font-size {
  font-size: 16px; /* 文本大小为16像素 */
}
 
/* 设置文本的字体系列 */
p.font-family {
  font-family: 'Times New Roman', Times, serif; /* 文本字体为'Times New Roman'，若无该字体则使用Times字体，最后为衬线字体 */
}
 
/* 设置文本行高，即行间距 */
p.line-height {
  line-height: 1.5; /* 行高为字体大小的1.5倍 */
}
 
/* 设置文本的空白处理方式 */
p.white-space {
  white-space: nowrap; /* 文本不换行 */
}
 
/* 设置文本的溢出处理方式 */
p.text-overflow {
  overflow: hidden; /* 文本溢出隐藏 */
  text-overflow: ellipsis; /* 文本溢出显示为省略号 */
}

这段代码展示了如何使用CSS3中的各种文本样式属性来对段落（<p>标签）进行样式设置，包括文本对齐、装饰、缩进、阴影、样式、变体、加粗、大小、字体系列、行高、空白处理和文本溢出处理。这些属性可以帮助开发者创建更加丰富多样的文本格式和布局。

- 阅读更多 -

CSS3 Animation：如何在动画播放完后停止在最后的状态

System

2024-08-17

所有,css3

在CSS3中，要让动画在最后一帧停止，可以使用animation-fill-mode属性，并将其设置为forwards。这样，动画完成后，元素会保持最后一帧的状态。

下面是一个简单的例子：




@keyframes example {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
.animated-element {
  animation-name: example;
  animation-duration: 2s;
  animation-fill-mode: forwards;  /* 保留动画结束状态 */
}

HTML部分：




<div class="animated-element">我会在动画完成后停留在完成状态。</div>

在这个例子中，.animated-element将执行一个淡入效果，当动画完成后，它会保持不透明的状态，即最后一帧的状态。

- 阅读更多 -