1. 首页
  2. 分类
  3. css3
CSS进阶总结
System
2024-08-15
所有,css3

CSS进阶内容涵盖了CSS的高级特性，如伪类、盒模型、布局、动画、响应式设计等。以下是一些关键概念的简要概述和示例代码：

  1. 伪类：

    • :hover：当鼠标悬停时改变元素样式。
    


button:hover {
    background-color: #3498db;
}

  2. 盒模型：

    • box-sizing: border-box;：保证元素的宽度和高度包含边框和内边距。
    


div {
    width: 300px;
    height: 200px;
    padding: 10px;
    border: 5px solid #000;
    box-sizing: border-box;
}

  3. 布局：

    • 使用Flexbox进行布局：
    


.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

  4. 响应式设计：

    • 使用媒体查询实现响应式设计：
    


@media (max-width: 768px) {
    .column {
        flex-direction: column;
    }
}

  5. 动画：

    • 使用关键帧和animation属性创建动画：
    


@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
.slide-in {
    animation: slideIn 1s ease forwards;
}

这些是CSS进阶内容的一些关键点，实际应用中还会涉及到更多高级特性，如Custom Properties（变量）、Selectors（选择器）等。

- 阅读更多 -
CSS3新增的部分属性
System
2024-08-15
所有,css3

CSS3中新增了许多属性，以下是一些常见的CSS3新增属性及其简单示例：

  1. 圆角（border-radius）:



div {
  border: 2px solid #a1a1a1;
  border-radius: 25px; /* 圆角的半径 */
}
  1. 阴影（box-shadow）:



div {
  box-shadow: 10px 10px 5px #888888; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
  1. 文字阴影（text-shadow）:



p {
  text-shadow: 2px 2px 2px #888888; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
  1. 线性渐变（linear-gradient）:



div {
  background: linear-gradient(to right, red , yellow); /* 方向 起始颜色 结束颜色 */
}
  1. 旋转（transform: rotate）:



div {
  transform: rotate(45deg); /* 旋转的角度 */
}
  1. 缩放（transform: scale）:



div:hover {
  transform: scale(1.5, 1.5); /* 水平方向缩放倍数 垂直方向缩放倍数 */
}
  1. 变换原点（transform-origin）:



div {
  transform-origin: bottom left; /* 变换的原点位置 */
}
  1. 过渡效果（transition）:



div:hover {
  transition: all 0.5s ease-in-out; /* 过渡的属性 完成过渡所需时间 缓动函数 */
}
  1. 用户界面样式（user-select）:



p {
  user-select: none; /* 禁止选中文本 */
}
  1. 媒体查询（@media）:



@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这些只是CSS3中众多新增属性的一小部分。实际开发中，根据需求选择合适的属性，并搭配选择器和其他CSS规则使用。

- 阅读更多 -
【css3】06-css3新特性之网页布局篇
System
2024-08-15
所有,css3



/* 设置容器以便内容可以在容器内居中 */
.container {
  display: flex; /* 使用弹性盒布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 高度设置为视口高度 */
}
 
/* 设置网格布局的列和间距 */
.grid {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(3, 1fr); /* 设置三个等宽列 */
  grid-gap: 20px; /* 设置网格间距 */
  padding: 20px; /* 设置内边距 */
}
 
/* 设置网格项的动画效果 */
.grid-item {
  transition: all 0.3s ease; /* 设置过渡效果 */
}
 
/* 鼠标悬停时改变网格项的颜色和缩放效果 */
.grid-item:hover {
  background-color: #f0f0f0; /* 悬停时背景色改变 */
  transform: scale(1.05); /* 放大效果 */
}
 
/* 设置多列文本的样式 */
.multi-column {
  column-count: 3; /* 设置列数 */
  column-gap: 40px; /* 设置列间隙 */
}

这段代码展示了如何使用CSS3的布局特性，包括弹性盒布局、网格布局以及列的多列文本布局。通过简单的样式设置，可以实现网页布局的优化和用户界面的改善。

- 阅读更多 -
CSS3-新增的属性，教你用CSS清除样式
System
2024-08-15
所有,css3

CSS3 提供了一些新的属性和方法来清除样式，以下是一些常用的方法：

  1. all: unset; - 复原所有属性到它们的初始值或继承值。
  2. all: initial; - 复原所有属性到它们的默认初始值。
  3. all: inherit; - 复原所有属性到它们的继承值。
  4. all: revert; - 复原所有属性到浏览器默认样式。
  5. all: revert-layer;- 复原所有属性到最接近的浏览器层级的样式。

例如，要清除一个元素的所有样式，可以这样做：




.clear-styles {
  all: unset;
}

使用这个类时，.clear-styles 将会清除元素上的所有样式，包括继承的和直接设置的样式。

请注意，all: revert 和 all: revert-layer 在某些旧浏览器中可能不被支持。因此，在使用这些属性之前，请确保它们在目标浏览器中有效。

- 阅读更多 -
HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量
System
2024-08-15
所有,css3

以下是一个简化的HTML和JavaScript代码示例，用于实现一个支持拖拽上传图片和预览的功能。这个示例不包括完整的错误处理和兼容性检测，但提供了核心功能。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Image Upload</title>
<style>
    #drop_area {
        width: 300px;
        height: 200px;
        border: 2px dashed #aaa;
        margin-bottom: 20px;
        text-align: center;
        line-height: 200px;
        font-size: 24px;
    }
    .preview {
        width: 100px;
        height: 100px;
        margin: 10px;
        float: left;
        overflow: hidden;
    }
    .preview img {
        width: 100%;
        height: auto;
    }
</style>
</head>
<body>
 
<div id="drop_area">Drag images here</div>
 
<script>
// JavaScript 代码
document.getElementById('drop_area').addEventListener('drop', handleDrop, false);
 
function handleDrop(evt) {
    evt.stopPropagation();
    evt.preventDefault();
 
    var files = evt.dataTransfer.files; // 获取拖拽进来的文件对象列表
    // 处理文件，这里只是简单地在控制台输出文件名
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue; // 不是图片则跳过
        }
 
        var reader = new FileReader();
 
        reader.onload = (function(theFile) {
            return function(e) {
                // 创建图片预览
                var img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'preview';
                document.body.appendChild(img);
            };
        })(f);
 
        reader.readAsDataURL(f); // 读取文件内容
    }
}
 
// 允许拖拽
document.getElementById('drop_area').addEventListener('dragover', function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy';
}, false);
</script>
 
</body>
</html>

这段代码实现了基本的拖拽上传图片的功能，并在用户拖拽图片到指定区域时，创建图片的预览。它使用了HTML5的Drag and Drop API以及FileReader API来读取文件内容并显示为图片。这个例子不包括任何的错误处理，如检查浏览器是否支持所需的API或处理文件上传的逻辑。

- 阅读更多 -
H5实现录屏功能代码
System
2024-08-15
所有,css3

HTML5 提供了 MediaRecorder API 来实现录屏功能。以下是一个简单的例子，展示如何使用 MediaRecorder 来录制视频：




<!DOCTYPE html>
<html>
<head>
<title>Media Recorder Example</title>
</head>
<body>
 
<button id="start-recording">开始录制</button>
<button id="stop-recording" disabled>停止录制</button>
<button id="download-recording" disabled>下载录制</button>
 
<script>
  const startRecordingButton = document.getElementById('start-recording');
  const stopRecordingButton = document.getElementById('stop-recording');
  const downloadButton = document.getElementById('download-recording');
  let mediaRecorder;
  let recordedBlobs;
 
  startRecordingButton.addEventListener('click', () => {
    navigator.mediaDevices.getDisplayMedia({ video: true })
      .then(stream => {
        mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
        recordedBlobs = [];
 
        mediaRecorder.ondataavailable = event => {
          if (event.data && event.data.size > 0) {
            recordedBlobs.push(event.data);
          }
        };
 
        mediaRecorder.start();
        stopRecordingButton.disabled = false;
        console.log('Recording started');
      })
      .catch(error => console.error('Error:', error));
  });
 
  stopRecordingButton.addEventListener('click', () => {
    mediaRecorder.stop();
    stopRecordingButton.disabled = true;
    console.log('Recording stopped');
  });
 
  mediaRecorder.onstop = () => {
    const superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });
    downloadButton.href = URL.createObjectURL(superBuffer);
    downloadButton.download = 'recording.webm';
    downloadButton.disabled = false;
  };
</script>
 
</body>
</html>

这段代码中，我们首先获取屏幕媒体流，然后创建 MediaRecorder 实例来录制视频。录制开始和结束时相关按钮会被禁用或启用。录制停止时，录制的视频会被保存到一个 Blob 中，并可以通过创建一个临时的 URL 并设置下载链接来进行下载。

- 阅读更多 -
给Vue项目快速加上炫酷的动画
System
2024-08-15
所有,css3

在Vue项目中添加炫酷的动画，可以使用第三方库如Animate.css来简化过程。以下是如何在Vue项目中使用Animate.css的步骤：

  1. 安装Animate.css库：



npm install animate.css --save
  1. 在Vue组件中引入Animate.css：



<template>
  <div :class="{'animate__animated': animate, 'animate__bounce': bounceAnimation}">
    Hi, I'm an animated element!
  </div>
</template>
 
<script>
import 'animate.css';
 
export default {
  data() {
    return {
      animate: false,
      bounceAnimation: false
    };
  },
  mounted() {
    setTimeout(() => {
      this.animate = true;
      this.bounceAnimation = true;
 
      // 动画完成后可以添加事件监听器或者清除动画类
      const animationEnd = () => {
        this.$el.removeEventListener('animationend', animationEnd);
        this.animate = false;
        this.bounceAnimation = false;
      };
      this.$el.addEventListener('animationend', animationEnd);
    }, 500);
  }
};
</script>

在这个例子中，我们在组件被挂载后500毫秒开始动画。动画类通过条件渲染到元素上，动画完成后通过事件监听器移除这些类。

注意：确保在Vue组件的<style>标签或外部CSS文件中正确引入Animate.css，以便正确设置动画关键帧。

- 阅读更多 -
VUE环境下 CSS3+JS 实现发牌 翻牌
System
2024-08-15
所有,css3

在Vue环境下，你可以使用CSS3和JavaScript来实现发牌（分发牌）和翻牌（翻转牌片）的效果。以下是一个简单的示例：

  1. 安装Vue CLI并创建一个新项目（如果你还没有）。
  2. 在你的Vue组件中，设置一个牌组的数据结构，并添加一些牌。
  3. 使用CSS3来制作牌的样式和翻牌的动画。
  4. 使用JavaScript来处理牌的分发和翻转逻辑。

以下是一个简单的Vue组件示例：




<template>
  <div id="poker-container">
    <div
      v-for="(card, index) in cards"
      :key="index"
      class="poker-card"
      :style="{ backgroundColor: card.color }"
      @click="flipCard(index)"
    >
      <div class="card-face card-face-front"></div>
      <div class="card-face card-face-back">{{ card.value }}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      cards: [
        { value: 'A', color: 'red' },
        { value: '2', color: 'black' },
        // ... 其他牌
      ],
    };
  },
  methods: {
    flipCard(index) {
      const card = this.$el.querySelectorAll('.poker-card')[index];
      card.classList.add('card-flipped');
      // 可以添加setTimeout来设置翻牌动画结束后的回调（如发牌逻辑）
    },
  },
};
</script>
 
<style scoped>
.poker-card {
  width: 100px;
  height: 150px;
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}
 
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
 
.card-face-front {
  background-color: #ccc;
}
 
.card-face-back {
  background-color: #fff;
  font-size: 50px;
  text-align: center;
  line-height: 150px;
}
 
.card-flipped {
  transform: rotateY(180deg);
}
</style>

在这个例子中，每当你点击一张牌时，它会立即翻转。你可以通过添加更多的逻辑来实现发牌的功能，例如随机排列牌组、发牌动画等。

- 阅读更多 -
前端提高篇CSS3进阶15：animation动画
System
2024-08-15
所有,css3

在CSS3中，animation属性是用来创建动画的。它是一个简写属性，用于设置六个动画相关的CSS属性：

  • animation-name：定义关键帧的名称。
  • animation-duration：定义动画完成一个周期所需的时间。
  • animation-timing-function：定义动画的速度曲线。
  • animation-delay：定义动画何时开始。
  • animation-iteration-count：定义动画应该播放的次数。
  • animation-direction：定义是否应该轮流反向播放动画。

下面是一个简单的例子，展示了如何使用animation属性创建一个简单的动画：




@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
div {
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  width: 100px;
  height: 100px;
  background-color: red;
}

在这个例子中，div元素的背景颜色会从红色变为黄色，动画的持续时间是4秒，每次动画的持续时间是2秒，动画无限次数循环播放，并且动画在每次迭代中方向会反向。

- 阅读更多 -
CSS3网页常见动态效果……，web前端开发项目经验
System
2024-08-15
所有,css3

CSS3 提供了许多创建动态效果的工具，例如变换（transforms）、动画（animations）、和过渡（transitions）。以下是一些常见的动态效果的实现方法：

  1. 图片轮播效果：

HTML:




<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS:




.slider {
  animation: slide 10s infinite;
}
 
.slider img {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
 
.slider img:first-child {
  opacity: 1;
  display: block;
}
 
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  
  20% {
    transform: translateX(-100%);
  }
  
  40% {
    transform: translateX(-200%);
  }
  
  60% {
    transform: translateX(-300%);
  }
  
  80% {
    transform: translateX(-400%);
  }
  
  100% {
    transform: translateX(-500%);
  }
}
  1. 鼠标悬停时的动画效果：

HTML:




<button class="hover-effect">Hover Over Me!</button>

CSS:




.hover-effect {
  background-color: #4CAF50;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: background-color 0.5s;
}
 
.hover-effect:hover {
  background-color: #008CBA;
}
  1. 加载时的进度条动画效果：

HTML:




<div class="loading-bar">
  <div class="loading"></div>
</div>

CSS:




.loading-bar {
  width: 100%;
  background-color: #ddd;
  position: relative;
  height: 5px;
}
 
.loading {
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
  animation: loading-bar 2s infinite;
  text-align: center;
  line-height: 5px; /* Center the text vertically */
  color: white;
}
 
@keyframes loading-bar {
  0% {
    width: 0%;
  }
  
  100% {
    width: 100%;
  }
}

这些例子展示了如何使用 CSS3 的关键帧动画（@keyframes）和过渡（transitions）来创建动态效果。这些基本技术可以应用于创建各种动态交互，从简单的按钮悬停效果到复杂的页面内容切换。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号