分类 css3 下的文章

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）的宽度不足以并排放下所有盒子，那么后面的盒子会自动移到前一个盒子下方。

- 阅读更多 -

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来设置字体样式。这些是前端开发的基础知识，对于学习前端开发的开发者来说具有很好的教育价值。

- 阅读更多 -

CSS3动画实现多个跳动小球（语音输入动画）

System

2024-08-24

所有,css3




/* 定义基本的小球样式 */
.ball {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  animation: bounce-animation 1s infinite alternate;
}
 
/* 定义跳动动画 */
@keyframes bounce-animation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
 
/* 定义不同大小和颜色的小球，通过类名区分 */
.small-ball {
  width: 30px;
  height: 30px;
  background-color: red;
}
 
.medium-ball {
  width: 40px;
  height: 40px;
  background-color: green;
}
 
.large-ball {
  width: 60px;
  height: 60px;
  background-color: purple;
}
 
/* HTML结构 */
<div class="ball small-ball" style="left: 10px;"></div>
<div class="ball medium-ball" style="left: 60px;"></div>
<div class="ball large-ball" style="left: 110px;"></div>

这段代码定义了一个小球的基本样式和跳动动画，并展示了如何通过添加不同的类来创建不同大小和颜色的小球。在HTML结构中，我们创建了三个不同大小和颜色的小球，并通过style属性设置了它们在屏幕上的位置。这样，我们就实现了一个简单的语音输入动画。

- 阅读更多 -

【css】相对定位，绝对定位和固定定位

System

2024-08-24

所有,css3

在CSS中，有三种基本的定位方式：

静态定位（Static Positioning）
相对定位（Relative Positioning）
绝对定位（Absolute Positioning）
固定定位（Fixed Positioning）
静态定位：
静态定位是默认的定位方式。在这种方式下，元素按照正常的文档流进行布局。




div {
  position: static;
}

相对定位：
相对定位是一种较为特殊的定位方式，它对元素进行相对于其正常位置的定位。




div {
  position: relative;
  top: 20px;
  left: 40px;
}

绝对定位：
绝对定位是一种强大的定位方式，它对元素进行相对于其最近的已定位（即非 static）的祖先元素的定位。




div {
  position: absolute;
  top: 20px;
  right: 15px;
}

固定定位：
固定定位是一种特殊的绝对定位，其要点在于元素相对于浏览器窗口是固定位置。




div {
  position: fixed;
  bottom: 10px;
  left: 5px;
}

以上就是CSS中的四种基本定位方式。每种定位方式都有其特点，可以根据实际需求选择使用。

- 阅读更多 -

超实用CSS技巧总结——背景和边框

System

2024-08-24

所有,css3




/* 简化的CSS样式，用于创建一个具有边框和背景图案的元素 */
.element {
  /* 设置元素的宽度和高度 */
  width: 200px;
  height: 200px;
 
  /* 添加背景图案 */
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
 
  /* 设置背景图案的大小和位置 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
 
  /* 添加边框效果 */
  border: 2px solid #d6452b;
 
  /* 圆角边框 */
  border-radius: 50%;
 
  /* 其他样式，如阴影等 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

这段代码展示了如何使用CSS为一个元素添加具有边框和背景图案的效果，包括圆角和阴影等装饰效果。这是一个简化的例子，主要用于教学目的，展示了如何将背景图案和边框组合在一起，创建一个具有高级视觉效果的网页元素。

- 阅读更多 -

让交互更加生动！巧用CSS实现鼠标跟随 3D 旋转效果

System

2024-08-23

所有,css3




/* 定义基本的div样式 */
.box {
  width: 100px;
  height: 100px;
  background: #7F589F;
  margin: 50px;
  perspective: 1500px; /* 设置3D效果的视角 */
}
 
/* 鼠标悬停时触发动画 */
.box:hover .card {
  transform: rotateY(360deg); /* 鼠标悬停时旋转360度 */
  transition: transform 1s ease-in-out; /* 动画过渡效果 */
}
 
/* 定义包裹div的样式 */
.card {
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
  transition: transform 1s ease-in-out; /* 初始过渡效果 */
}
 
/* 定义包裹div内部元素的样式 */
.card > div {
  width: 100%;
  height: 100%;
  line-height: 100px;
  text-align: center;
  backface-visibility: hidden; /* 隐藏背面 */
  position: absolute;
}
 
/* 定义正面样式 */
.card .face.front {
  background: #7F589F;
  z-index: 2;
}
 
/* 定义背面样式 */
.card .face.back {
  background: #95D48A;
  transform: rotateY(180deg); /* 将背面旋转180度 */
}

这段代码展示了如何使用CSS创建一个鼠标悬停时的3D旋转效果。.box是最外层的容器，它有一个3D视角，.card是实际旋转的元素，.face定义了两个面，分别是正面和背面，通过悬停.box触发.card的旋转动画。

- 阅读更多 -

纯css实现信封效果

System

2024-08-23

所有,css3

要使用纯CSS实现信封效果，可以通过使用CSS的变换和阴影等特性来创造出类似信封的视觉效果。以下是一个简单的例子：

HTML:




<div class="envelope">
  <div class="envelope-content">
    <p>这里是信封内容</p>
  </div>
</div>

CSS:




.envelope {
  width: 300px;
  height: 200px;
  background-color: #f3f3f3;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transform: rotate(-3deg);
}
 
.envelope::before,
.envelope::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: #dcdcdc;
  top: 20px;
  left: 30px;
  border-radius: 5px;
  z-index: 1;
}
 
.envelope::before {
  transform: rotate(-2deg);
}
 
.envelope::after {
  top: 60px;
  left: 60px;
  transform: rotate(2deg);
}
 
.envelope-content {
  position: absolute;
  top: 50px;
  left: 40px;
  width: 220px;
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
  z-index: 2;
}

这段代码创建了一个具有倾斜视角的信封效果，其中.envelope类代表整个信封，其中包含两个伪元素::before和::after来模拟信封的弯曲部分。.envelope-content类用于信封内的内容，确保内容在信封内部显示。

- 阅读更多 -

HTML拖拽

System

2024-08-23

所有,css3

在HTML中实现拖拽功能，可以使用JavaScript监听鼠标事件来完成。以下是一个简单的实现示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Example</title>
<style>
#draggable {
  width: 150px;
  height: 150px;
  background: skyblue;
  color: white;
  text-align: center;
  line-height: 150px;
  border: 2px dashed #333;
  cursor: move;
}
 
#dropzone {
  width: 300px;
  height: 150px;
  background: orange;
  color: white;
  text-align: center;
  line-height: 150px;
  border: 2px dashed #333;
  margin-top: 10px;
  position: relative;
}
</style>
</head>
<body>
 
<div id="draggable">Drag me!</div>
<div id="dropzone">Drop here!</div>
 
<script>
// 获取可拖拽元素和放置区域元素
var dragItem = document.getElementById('draggable');
var dropZone = document.getElementById('dropzone');
 
var dragging = false;
var mouseOffset;
 
// 鼠标按下时记录鼠标位置
dragItem.addEventListener('mousedown', function(e) {
  dragging = true;
  mouseOffset = {x: e.clientX - dragItem.offsetLeft, y: e.clientY - dragItem.offsetTop};
  dragItem.style.position = 'relative';
  dragItem.style.zIndex = 1000;
});
 
// 鼠标移动时更新元素位置
document.addEventListener('mousemove', function(e) {
  if (dragging) {
    var x = e.clientX - mouseOffset.x;
    var y = e.clientY - mouseOffset.y;
    dragItem.style.left = x + 'px';
    dragItem.style.top = y + 'px';
  }
});
 
// 鼠标抬起时结束拖拽
document.addEventListener('mouseup', function(e) {
  if (dragging) {
    dragging = false;
    // 检查拖拽结束位置是否在放置区域内
    if (checkWithin(dropZone, dragItem)) {
      dragItem.style.left = dropZone.offsetLeft + 'px';
      dragItem.style.top = dropZone.offsetTop + 'px';
      // 处理放置逻辑
      alert('Dropped!');
    } else {
      // 处理未放置逻辑
    }
  }
});
 
// 检查元素是否在另一个元素的范围内
function checkWithin(outerElement, innerElement) {
  var outerRect = outerElement.getBoundingClientRect();
  var innerRect = innerElement.getBoundingClientRect();
  return (
    innerRect.top >= outerRect.top &&
    innerRect.left >= outerRect.left &&
    innerRect.bottom <= outerRect.bottom &&
    innerRect.right <= outerRect.right
  );
}
</script>
 
</body>
</html>

在这个例子中，我们创建了一个可拖拽的元素#draggable和一个放置区域#dropzone。通过监听鼠标事件，我们可以移动#draggable元素，并且在鼠标抬起时检查它是否在#dropzone内部，如果是，则执行相关的放置逻辑（在这个例子中是弹出一个警告框）。如果不在放置区域内，则可以执行其他逻辑。

- 阅读更多 -