分类前端技术下的文章

2024-08-21




/* 定义一个旋转按钮的基本样式 */
.rotating-button {
  display: inline-block;
  padding: 15px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 50px;
  box-shadow: 0 4px #2980b9;
  text-shadow: 0 -1px #674ea7;
  transform-origin: center;
  animation: rotation 5s infinite linear;
}
 
/* 定义按钮的旋转动画 */
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
 
/* 定义鼠标悬停时按钮的颜色变化 */
.rotating-button:hover {
  background-color: #34495e;
}
 
/* 定义按钮在不同状态下的颜色变化，这里只展示了一个状态，可以根据需要添加更多状态 */
.rotating-button:active {
  background-color: #2980b9;
  box-shadow: 0 2px #276c91;
  transform: translateY(4px);
}

这段代码定义了一个旋转的按钮，按钮在不同状态下的颜色会有所变化，并且按钮的旋转动画是通过CSS3的@keyframes规则实现的，无需使用JavaScript。按钮在鼠标悬停时背景色会变深，在点击（激活）时会有一个轻微的上移效果，并且颜色有所变化，为用户界面增加了活力和交互性。

- 阅读更多 -

CSS resize 调整元素大小属性，可改变右下角滑块样式和监听重置高宽事件

System

2024-08-21

所有,css3




/* 设置元素可调整大小，并隐藏默认的右下角大小调整滑块 */
.resizable {
  resize: both;
  overflow: auto;
  width: 200px;
  height: 100px;
}
 
/* 自定义右下角大小调整滑块样式 */
.resizable::-webkit-resize-corner {
  background-image: url('path/to/corner-icon.png');
  background-size: contain;
  height: 16px;
  width: 16px;
}
 
/* 自定义水平或垂直调整滑块样式 */
.resizable::-webkit-resizer {
  background-color: #ccc;
  height: 100%;
  width: 16px;
}
 
/* 使用JavaScript监听元素的大小调整事件 */
document.querySelector('.resizable').addEventListener('resizemove', function(event) {
  if (event.target === event.currentTarget) {
    // 当触发事件的元素等于当前监听的元素时
    const width = event.target.offsetWidth;
    const height = event.target.offsetHeight;
    // 执行相关的操作，例如更新数据模型或界面显示
    console.log(`Size changed to: width = ${width}, height = ${height}`);
  }
});
 
// 当需要重置元素大小时，可以直接设置CSS属性或通过JavaScript来更改
document.querySelector('.resizable').style.width = '200px';
document.querySelector('.resizable').style.height = '100px';

这个代码实例展示了如何使用CSS的resize属性来让一个元素可调整大小，以及如何通过CSS伪元素自定义调整滑块的样式。同时，它也演示了如何使用JavaScript来监听和处理大小调整事件，并在需要时重置元素的大小。

System

2024-08-21

所有,css3

以下是一个简单的响应式网页设计示例，使用HTML5和CSS3技术：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Responsive Web Design</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        .content {
            margin: 15px;
            padding: 20px;
            background-color: #fff;
        }
        @media (max-width: 768px) {
            .content {
                margin: 10px;
                padding: 15px;
            }
        }
    </style>
</head>
<body>
 
<div class="header">
    <h1>Responsive Web Design</h1>
</div>
 
<div class="content">
    <p>This is a simple responsive web design example using HTML5 and CSS3. The content will adjust to the width of the screen, allowing for a great user experience on all devices.</p>
</div>
 
</body>
</html>

这个示例展示了一个简单的响应式网页设计。通过在CSS中使用@media查询，我们可以为不同的屏幕尺寸定义不同的样式规则，使得内容在各种设备上都能显示得合适。

- 阅读更多 -

CSS查缺补漏之《说一说CSS3有哪些新特性？》

System

2024-08-21

所有,css3

CSS3 引入了许多新特性，以下是一些主要的 CSS3 新特性：

边框（Borders）
- 圆角边框（border-radius）
- 阴影效果（box-shadow）
背景和图像
- 线性渐变（linear-gradient）
- 径向渐变（radial-gradient）
- 背景图片多背景（multiple background images）
文字效果
- 文字阴影（text-shadow）
- 字体（@font-face）
2D/3D转换
- 转换（transform）
- 转换原点（transform-origin）
动画（Animations）
- 关键帧（keyframes）
- 动画函数（animation）
多列布局
- 列数（column-count）
- 列间隔（column-gap）
用户界面
- 滚动条样式（::-webkit-scrollbar）
多媒体
- 视频（<video>标签）
- 音频（<audio>标签）
选择器
- 属性选择器（[attribute]）
- 结构伪类选择器（:nth-child, :last-child）
其他
- 颜色预定义值（rgba, hsla）
- 盒模型（box-sizing）

这些新特性使得 CSS 更加丰富和强大，可以创建出更加生动和复杂的网页设计。

- 阅读更多 -

通过Vue小型项目todoList清单搞懂组件化编码流程，建议收藏

System

2024-08-21

所有,css3




<template>
  <div id="app">
    <h2>ToDo List</h2>
    <input type="text" v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
        <button @click="handleDelete(index)">删除</button>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      inputValue: '',
      list: []
    }
  },
  methods: {
    handleSubmit() {
      if (this.inputValue.trim() === '') {
        alert('输入内容不能为空！');
        return;
      }
      this.list.push(this.inputValue.trim());
      this.inputValue = '';
    },
    handleDelete(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>
 
<style>
#app {
  text-align: center;
}
 
h2 {
  margin-bottom: 20px;
}
 
input {
  margin-bottom: 10px;
  padding: 8px;
}
 
button {
  margin-right: 10px;
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
button:hover {
  background-color: #0056b3;
}
 
ul {
  list-style-type: none;
  padding: 0;
}
 
li {
  margin: 8px;
  padding: 8px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}
</style>

这段代码展示了如何使用Vue.js创建一个简单的ToDo List应用。用户可以输入任务，点击提交按钮将其添加到列表中。每个任务旁边有一个删除按钮，点击可以将其从列表中移除。代码中包含了对应的HTML模板、JavaScript脚本和CSS样式，体现了Vue组件化开发的基本流程。

- 阅读更多 -

CSS3实现三种切角效果（四边形少一个角）

System

2024-08-21

所有,css3

CSS3可以使用clip-path属性或者伪元素来实现切角效果。以下是实现三种切角效果的示例代码：

切掉一个角：




<div class="cut-corner"></div>




.cut-corner {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  position: relative;
  overflow: hidden;
}
 
.cut-corner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 100px solid #3498db;
  border-right: 200px solid transparent;
}

切掉两个角：




<div class="cut-corners"></div>




.cut-corners {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  position: relative;
  overflow: hidden;
}
 
.cut-corners::before,
.cut-corners::after {
  content: '';
  position: absolute;
  z-index: 10;
}
 
.cut-corners::before {
  top: 0;
  right: 0;
  border-top: 100px solid #3498db;
  border-right: 100px solid transparent;
}
 
.cut-corners::after {
  bottom: 0;
  left: 0;
  border-bottom: 100px solid #3498db;
  border-left: 100px solid transparent;
}

切掉三个角：




<div class="cut-corners-three"></div>




.cut-corners-three {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  position: relative;
  overflow: hidden;
}
 
.cut-corners-three::before,
.cut-corners-three::after {
  content: '';
  position: absolute;
  z-index: 10;
}
 
.cut-corners-three::before {
  top: 0;
  right: 0;
  border-top: 100px solid #3498db;
  border-right: 100px solid transparent;
}
 
.cut-corners-three::after {
  bottom: 0;
  left: 0;
  border-bottom: 100px solid #3498db;
  border-left: 100px solid transparent;
}
 
.cut-corners-three::before,
.cut-corners-three::after {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  top: 50px;
  left: 50px;
  border-top-left-radius: 100px;
}

以上代码实现了三种不同的切角效果，分别是切掉一个角、切掉两个角和切掉三个角。每种效果都可以通过调整border-*属性的大小来改变切角的“角”的大小。

System

2024-08-21

所有,css3

在 CSS3 中，我们可以使用 3D 转换技术创建 3D 物体。这是一个简 3D 物体的简示例：\`\`\`css

/* 3D 物体的 CSS 代码 */

.box {

position: absolute;

width: 100px;

height: 100px;

transform-style: preserve-3d;

transform-origin: center;

}

/* 创建 3D 物体 */

.box {

position: absolute;

width: 100px;

height: 100px;

background: url(box.jpg);

background: -webkit-box-reflect;

}

/* 3D 物体的 CSS 代码 */

.box {

position: absolute;

width: 100px;

height: 100px;

background: url(box.jpg);

background: -webkit-box-reflect;

transform: rotateY(30deg);

}




这是一个简 3D 物体的 CSS 代码，它 3D 物体的 CSS 代码，以及如何使用 CSS3 3D 物体。

- 阅读更多 -

CSS-flex布局详细讲解：

System

2024-08-21

所有,css3

CSS Flexbox布局提供了一种更简单的方法来创建灵活的布局，无论是水平还是垂直，都可以轻松应对。以下是关于如何使用Flexbox进行布局的详细说明和示例代码。

一、基本概念

Flexbox布局由两个部分组成：flex容器和flex项目。

Flex容器通过设置display: flex;或display: inline-flex;创建。
Flex项目是Flex容器的直接子元素。

二、Flex容器属性

flex-direction：控制Flex项目的排列方向（水平或垂直）。
flex-wrap：控制Flex项目在一行无法容纳时的换行方式。
flex-flow：是以上两个属性的简写形式，默认值为row nowrap。
justify-content：控制Flex项目在主轴方向上的对齐方式。
align-items：控制Flex项目在交叉轴方向上的对齐方式。
align-content：在多行存在时，控制Flex项目在交叉轴方向上的对齐方式。

三、Flex项目属性

order：定义项目的排列顺序，数值越小，排列越靠前。
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不会放大。
flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，会缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（相当于width/height）。
flex：是flex-grow, flex-shrink, flex-basis的简写，默认值为0 1 auto。
align-self：允许单个Flex项目有与其他项目不一样的对齐方式。

四、示例代码

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:




.flex-container {
  display: flex;
  flex-direction: row; /* 水平排列 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
 
.flex-item {
  flex: 1; /* 等分空间 */
  text-align: center; /* 文字居中 */
  border: 1px solid #000; /* 边框 */
  padding: 10px; /* 内边距 */
  margin: 5px; /* 外边距 */
}

这个例子创建了一个水平垂直居中的Flex容器，其中包含了三个等宽的Flex项目。当容器空间不足时，项目会自动换行。

- 阅读更多 -

CSS3 新增属性（边框，背景，文字，颜色属性）

System

2024-08-21

所有,css3

CSS3 中添加了许多新的属性，以下是一些常见的：

边框属性：border-radius（圆角边框）, border-image（边框图片）, box-shadow（盒子阴影）, border-collapse（边框合并）




/* 圆角边框 */
div {
  border: 2px solid black;
  border-radius: 10px; /* 圆角半径 */
}
 
/* 边框图片 */
div {
  border: 8px solid transparent;
  border-image: url(border.png) 30 round; /* 30 是边框图片切片宽度，round 是平铺方式 */
}
 
/* 盒子阴影 */
div {
  box-shadow: 5px 5px 10px #888888; /* 水平偏移 垂直偏移 模糊距离 颜色 */
}
 
/* 边框合并 */
table {
  border-collapse: collapse; /* 合并边框 */
}

背景属性：background-size（背景大小）, background-origin（背景起始点）, background-clip（背景裁剪区域）




/* 背景大小 */
div {
  background-image: url(background.jpg);
  background-size: cover; /* 背景图片覆盖整个元素 */
}
 
/* 背景起始点 */
div {
  background-image: url(background.jpg);
  background-origin: content-box; /* 背景图片从内容区域开始显示 */
}
 
/* 背景裁剪区域 */
div {
  background-image: url(background.jpg);
  background-clip: content-box; /* 背景图片裁剪到内容区域 */
}

文本属性：text-shadow（文本阴影）, word-wrap（自动换行）, text-overflow（文本溢出时的处理）




/* 文本阴影 */
p {
  text-shadow: 2px 2px 4px #888888; /* 水平偏移 垂直偏移 模糊距离 颜色 */
}
 
/* 自动换行 */
p {
  word-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
}
 
/* 文本溢出处理 */
p {
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
}

颜色属性：rgba（带透明度的颜色）, hsl（根据色相、饱和度、亮度）




/* RGBA颜色 */
div {
  background-color: rgba(255, 0, 0, 0.5); /* 红色半透明 */
}
 
/* HSL颜色 */
div {
  background-color: hsl(120, 100%, 50%); /* 绿色 */
}

CSS3 提供了丰富的新属性，以便我们创建更加生动和复杂的网页设计。上述例子展示了一些常用的CSS3属性及其使用方法。

- 阅读更多 -

css中怎么给div设置一个从上到下的滚动动画

System

2024-08-21

所有,css3

在CSS中，要给div设置一个从上到下的滚动动画，你可以使用@keyframes规则来定义动画，然后将动画应用到div上。以下是一个简单的例子：




/* 定义动画 */
@keyframes scrollFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
 
/* 应用动画到div */
.scroll-animation {
  animation: scrollFromTop 2s ease-in-out forwards;
  transform: translateY(-100%); /* 开始时div位于上方 */
  opacity: 0; /* 开始时透明度为0 */
}

接下来，在HTML中，给需要滚动动画的div添加scroll-animation类：




<div class="scroll-animation">这是需要滚动的内容</div>

当div被添加到页面上时，它会从上到下滚动出现。动画时长为2秒，使用ease-in-out缓动函数，并且在动画完成后保持最终状态（forwards）。

- 阅读更多 -