分类 css3 下的文章

2024-08-17

以下是实现红色心形loading特效的CSS3代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红色心形Loading特效</title>
<style>
  .loading-container {
    position: relative;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
  }
 
  .loading-container::before,
  .loading-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    background: red;
    border-radius: 100%;
    animation: pulse 2s infinite ease-in-out;
  }
 
  .loading-container::before {
    width: 50px;
    height: 50px;
    transform: translateX(-50%);
  }
 
  .loading-container::after {
    width: 80px;
    height: 80px;
    transform: translateX(-50%);;
    animation-delay: .5s;
  }
 
  @keyframes pulse {
    0% {
      transform: translateX(-50%) scale(.8);
      opacity: 1;
    }
    
    100% {
      transform: translateX(-50%) scale(1.2);
      opacity: 0;
    }
  }
</style>
</head>
<body>
<div class="loading-container">
  <div></div>
</div>
</body>
</html>

这段代码使用了CSS伪元素::before和::after来创建心形，通过animation属性实现放大和淡出的动画效果，从而模拟出加载等待的场景。

System

2024-08-17

所有,css3




/* 定义一个容器 */
.container {
  width: 500px;
  height: 300px;
  background-color: #f0f0f0;
  border: 2px solid #000;
}
 
/* 定义一个子元素 */
.child {
  width: 100px;
  height: 100px;
  background-color: #ff0;
  margin: 10px;
  padding: 20px;
  border: 5px solid #00f;
  box-sizing: border-box; /* 确保边框和内边距不会增加总尺寸 */
}
 
/* 针对不同浏览器的私有前缀 */
.child {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

这段代码定义了一个容器和一个子元素，并确保了子元素的边框和内边距不会影响其总尺寸，从而使得布局更加容易控制。同时，为了处理不同浏览器对CSS3属性的支持差异，代码中添加了各种私有前缀。

System

2024-08-17

所有,css3

由于原始代码较为复杂且涉及到大量的图形和动画处理，我们将提供一个简化版本的示例，演示如何使用HTML5 <canvas> 元素模拟电子彩票的刮刮乐效果。




<!DOCTYPE html>
<html>
<head>
    <title>Canvas Simulated Lotto Draw</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="lottoCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('lottoCanvas');
        const ctx = canvas.getContext('2d');
        let numbers = [];
 
        // 初始化随机数
        function initNumbers() {
            numbers = [];
            for (let i = 0; i < 7; i++) {
                let number;
                do {
                    number = Math.floor(Math.random() * 37) + 1;
                } while (numbers.includes(number));
                numbers.push(number);
            }
            numbers.sort((a, b) => a - b);
        }
 
        // 绘制彩票区域
        function drawLottoNumbers() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.font = '20px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            for (let i = 0; i < numbers.length; i++) {
                const x = 50 + i * 70;
                const y = 50;
                const radius = 30;
                ctx.beginPath();
                ctx.arc(x, y, radius, 0, 2 * Math.PI);
                ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
                ctx.fill();
                ctx.stroke();
                ctx.fillStyle = '#000';
                ctx.fillText(numbers[i], x, y);
            }
        }
 
        // 开始有声有色的电子彩票的机制
        function startSimulatedDraw() {
            initNumbers();
            setInterval(() => {
                drawLottoNumbers();
            }, 50);
        }
 
        startSimulatedDraw();
    </script>
</body>
</html>

这段代码将在网页上创建一个500x500像素的<canvas>元素，并在其中随机生成7个1到37之间的不重复整数，模拟电子彩票上的中奖号码。每50毫秒号码会更新一次，形成有趣的“刮刮乐”效果。这个简化的示例教学意义在于演示了如何使用HTML5 <canvas> 元素进行基本的图形绘制和动画制作。

- 阅读更多 -

css3前端开发，动态特效transform案例1-沿X轴倾斜和旋转

System

2024-08-17

所有,css3




/* 基础样式 */
.box {
  width: 100px;
  height: 100px;
  background-color: #333;
  margin: 50px;
  /* 设置动画名称和持续时间 */
  animation: rotateAndSkew 5s infinite alternate linear;
}
 
/* 关键帧定义 */
@keyframes rotateAndSkew {
  from {
    /* 初始状态：没有旋转和倾斜 */
    transform: rotate(0deg) skewX(0deg);
  }
  to {
    /* 结束状态：绕X轴旋转45度并且沿X轴倾斜20度 */
    transform: rotate(45deg) skewX(20deg);
  }
}

这段代码定义了一个名为.box的类，它将应用动画效果。动画名称为rotateAndSkew，通过变形（transform）属性实现沿X轴的倾斜（skewX）和绕X轴的旋转（rotate）。动画从初始状态开始，经过5秒，到达结束状态，并且是无限循环，每次循环的状态都会交替出现（alternate），动画的速度变化是线性的（linear）。

- 阅读更多 -

【CSS3】渐变阴影遮罩

System

2024-08-17

所有,css3

CSS3提供了多种方式来实现图形、文本的视觉效果，包括渐变、阴影、遮罩等。

渐变（Gradients）

线性渐变（Linear Gradients）:




.linear-gradient {
  background: linear-gradient(to right, red , blue);
}

径向渐变（Radial Gradients）:




.radial-gradient {
  background: radial-gradient(circle, red, yellow, green);
}

阴影（Box Shadow）




.box-shadow {
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

遮罩（Clipping）

通过clip-path属性，你可以创建一个只有元素的某个区域可以显示的剪裁路径。

圆形遮罩:




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

矩形遮罩:




.rectangle-mask {
  clip-path: inset(10% 20% 10% 20%);
}

伪元素（Pseudo-elements）

伪元素可以用来创建遮罩，例如使用:before或:after伪元素来创建一个遮罩层。




.mask::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;
  opacity: 0.5;
}

这些是CSS3中实现渐变、阴影和遮罩的基本方法。根据具体需求，可以结合使用这些技术，创造出丰富多样的视觉效果。

- 阅读更多 -

CSS3 自定义字体的常识与使用

System

2024-08-17

所有,css3

在CSS3中，我们可以使用@font-face规则来定义自定义字体，并在样式中使用它们。以下是如何使用自定义字体的步骤和示例代码：

准备字体文件：将字体文件（如.ttf, .otf, .woff, .woff2）放在网站服务器上的某个目录中。
使用@font-face规则：在CSS文件中定义字体。
应用字体：在CSS中使用定义的字体。

示例代码：




@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/fontfile.woff2') format('woff2'),
       url('path/to/fontfile.woff') format('woff'),
       url('path/to/fontfile.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 在字体下载过程中使用系统字体，提升性能 */
}
 
body {
  font-family: 'MyCustomFont', sans-serif;
}

在这个例子中，我们首先定义了一个名为MyCustomFont的自定义字体，并指定了三种不同格式的字体文件路径。然后，在body选择器中使用了这个自定义字体，并将它和无衬线字体作为后备字体。使用font-display: swap可以在自定义字体加载过程中使用系统字体，提升用户体验。

- 阅读更多 -

【css 动画】css实现奔跑的北极熊

System

2024-08-17

所有,css3

在CSS中，我们可以使用@keyframes规则来创建动画，实现北极熊奔跑的效果。以下是一个简单的例子：

HTML:




<div class="penguin"></div>

CSS:




@keyframes waddling {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}
 
.penguin {
  width: 80px;
  height: 80px;
  background: url('penguin.png') no-repeat;
  position: relative;
  animation: waddling 2s infinite ease-in-out;
}

在这个例子中，我们创建了一个名为waddling的动画，使北极熊的身体左右摇摆。我们假设北极熊的图片已经放在penguin.png文件中，并且该图片已经被定义为penguin类的背景。动画通过CSS的transform属性的translateX函数实现北极熊的行走效果。动画设置为无限循环，每2秒执行一次，并使用ease-in-out缓动函数来平滑动画过渡。

请注意，这只是一个简化示例，实际的北极熊可能需要更复杂的图像切换和动画来实现更逼真的效果。

- 阅读更多 -

position:sticky 粘性定位

System

2024-08-17

所有,css3

position: sticky 是 CSS 定位属性中的一个值。它的特点是 "sticky"，这意味着它既不是 relative 也不是 absolute，而是会在达到某个阈值时变为 fixed。

使用 position: sticky 时，你需要指定一个 top, bottom, left, 或 right 值，这个值定义了当元素达到这个位置时变为 sticky。

例如，如果你有一个头部导航，并希望在用户滚动页面时它首先固定在视口的某个位置，你可以这样做：




.nav {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* 当向下滚动页面时，导航栏会在视口顶部固定 */
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}




<div class="nav">我是固定在顶部的导航栏</div>
<p>滚动页面查看效果。</p>
<!-- 更多内容 -->

当用户滚动页面时，.nav 元素会在到达视口顶部时变得固定，不会随着页面滚动而移出视口。这对创建一些“悬浮”效果或者提供一种“顶部固定”的导航栏是很有用的。

- 阅读更多 -

css3背景与渐变

System

2024-08-17

所有,css3

CSS3 提供了线性渐变和径向渐变两种背景渐变效果。

线性渐变（Linear Gradients）：




/* 从上到下的渐变 */
.gradient-background {
  background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}
 
/* 从左到右的渐变 */
.gradient-background {
  background: linear-gradient(to right, #33ccff 0%, #ff99cc 100%);
}
 
/* 自定义角度的渐变 */
.gradient-background {
  background: linear-gradient(45deg, #33ccff 0%, #ff99cc 100%);
}

径向渐变（Radial Gradients）：




/* 圆形渐变 */
.gradient-background {
  background: radial-gradient(circle, #33ccff 0%, #ff99cc 100%);
}
 
/* 椭圆形渐变 */
.gradient-background {
  background: radial-gradient(ellipse, #33ccff 0%, #ff99cc 100%);
}
 
/* 自定义形状和尺寸的渐变 */
.gradient-background {
  background: radial-gradient(circle at center, #33ccff 0%, #ff99cc 100%);
}

这些是使用 CSS3 背景渐变的基本示例。您可以根据需要调整颜色和方向。

- 阅读更多 -

css3实现直角三角形，直角边为圆角

System

2024-08-17

所有,css3

要使用CSS3创建一个直角三角形，并且直角边有圆角，可以使用以下技巧：使用伪元素来创建三角形，并对伪元素应用圆角样式。

以下是实现这个效果的CSS代码示例：




.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: 50px solid transparent; /* 左边直角三角形 */
  border-right: 50px solid transparent; /* 右边直角三角形 */
  border-bottom: 100px solid #333; /* 底边直角三角形 */
  overflow: hidden; /* 隐藏溢出的伪元素 */
}
 
.triangle:after {
  content: '';
  position: absolute;
  top: 0;
  left: -50px; /* 位于左边直角三角形之上 */
  width: 100px; /* 伪元素的宽度 */
  height: 100px; /* 伪元素的高度 */
  background: #333; /* 伪元素的背景色 */
  border-radius: 50%; /* 圆角 */
  transform: rotate(45deg); /* 旋转45度 */
}

HTML结构：




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

这段代码创建了一个黑色的直角三角形，其直角边被设置成圆角。伪元素通过旋转和设置圆角达到类似于直角三角形的效果。

- 阅读更多 -