Tech Blog

CSS实现checkbox选中动画

2024-08-15




/* 定义checkbox样式 */
.checkbox-custom {
  position: absolute;
  opacity: 0;
  /* 隐藏原生的checkbox */
}
 
/* 定义checkbox选中后的样式 */
.checkbox-custom:checked + .label-custom {
  color: #fff;
  /* 根据需要更改选中后的颜色 */
}
 
/* 定义checkbox选中后的动画 */
.checkbox-custom:checked + .label-custom::after {
  content: '\2714';
  /* Unicode字符表示勾选 */
  color: #009966;
  /* 勾选后的颜色 */
  animation: checkbox-anim 0.2s forwards;
  /* 调用动画 */
}
 
/* 定义动画 */
@keyframes checkbox-anim {
  to {
    transform: scale(0.8) rotate(1turn);
    /* 动画结束时的变换，可以自定义 */
  }
}
 
/* 定义label样式 */
.label-custom {
  cursor: pointer;
  /* 使label可点击 */
  position: relative;
  /* 用于定位勾选标记 */
}
 
/* 定义label上勾选标记的样式 */
.label-custom::after {
  content: '';
  /* 需要与checkbox:checked::after的content一致 */
  position: absolute;
  left: 0;
  top: -2px;
  /* 位置调整 */
  font-size: 16px;
  /* 根据需要调整大小 */
}

这段代码展示了如何使用CSS隐藏原生的checkbox，并通过label和伪元素来创建一个自定义的勾选动画。当checkbox被选中时，label上会出现一个动画，该动画由@keyframes定义并通过animation应用到伪元素上。这是一个简单的例子，实际应用中可以根据需要添加更多样式和动画效果。

纯css实现那些超炫酷的动画效果

2024-08-15

CSS可以实现各种炫酷的动画效果，以下是一些常见的超炫酷的CSS动画效果示例：

旋转加载器（Loader）:




.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}
 
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

滑入效果（Slide in）:




.slide-in {
  animation: slide-in 0.5s ease-in forwards;
}
 
@keyframes slide-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

淡入淡出效果（Fade in/out）:




.fade-in-out {
  animation: fade-in-out 2s ease-in-out infinite;
}
 
@keyframes fade-in-out {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

背景渐变动画（Background Gradient Animation）:




.gradient-animation {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400%;
  animation: gradient 15s ease infinite;
}
 
@keyframes gradient {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: 0%;
  }
}

这些示例展示了如何使用CSS动画制作炫酷的视觉效果。开发者可以根据自己的需求调整这些代码，或者创造自己的动画。

html+css简单登录注册及密码重置页面

2024-08-15

以下是一个简单的HTML和CSS结合的登录注册及密码重置页面的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Register Form</title>
<style>
    body { font-family: Arial, sans-serif; }
    .form-container { max-width: 300px; margin: 50px auto; }
    form { display: flex; flex-direction: column; }
    form label { margin-bottom: 10px; }
    form input[type="text"], form input[type="password"] { margin-bottom: 10px; }
    form button { margin-top: 10px; }
</style>
</head>
<body>
 
<div class="form-container">
    <h2>Login</h2>
    <form id="login-form">
        <label for="login-username">Username:</label>
        <input type="text" id="login-username" required>
        <label for="login-password">Password:</label>
        <input type="password" id="login-password" required>
        <button type="submit">Login</button>
    </form>
 
    <h2>Register</h2>
    <form id="register-form">
        <label for="register-username">Username:</label>
        <input type="text" id="register-username" required>
        <label for="register-email">Email:</label>
        <input type="text" id="register-email" required>
        <label for="register-password">Password:</label>
        <input type="password" id="register-password" required>
        <button type="submit">Register</button>
    </form>
 
    <h2>Forgot Password?</h2>
    <form id="forgot-password-form">
        <label for="forgot-password-email">Email:</label>
        <input type="text" id="forgot-password-email" required>
        <button type="submit">Reset Password</button>
    </form>
</div>
 
</body>
</html>

这个示例提供了简单的登录注册及密码重置表单。CSS样式使得表单有基本的排版和对齐，提升用户体验。HTML结构清晰，容易修改和扩展。

CSS3 布局模型+CSS3 浮动

2024-08-15

CSS3 并没有一个正式的“布局模型”，但是CSS3引入了一些新的布局特性，比如Flexbox和Grid。这些布局特性可以用来创建更加灵活和强大的布局。

Flexbox布局模型：

Flexbox布局模型提供了一种新的方式来布置容器内的项目，可以用来创建弹性布局。




.container {
  display: flex; /* 或者 inline-flex */
}

Grid布局模型：

Grid布局模型是一个基于网格的二维布局系统，它使得我们能够创建更为复杂的布局。




.container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 100px 200px auto;
}

至于CSS3的浮动，可以使用float属性来实现文本环绕图像的效果。




img {
  float: left; /* 图像会浮动到左边，文本会环绕它 */
}

注意：CSS3的浮动并不是用来创建复杂的布局系统的，它主要是用来实现文字环绕图片的效果。如果你需要创建更复杂的布局，应该优先考虑使用Flexbox或Grid布局模型。

CSS3实现透明的气泡框

2024-08-15




/* 气泡框样式 */
.bubble {
    position: relative;
    background-color: rgba(255, 255, 255, 0.7); /* 白色背景，70% 不透明度 */
    border-radius: 10px; /* 圆角 */
    padding: 10px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
}
 
/* 气泡箭头样式 */
.bubble:after {
    content: '';
    position: absolute;
    top: 50%; /* 位于容器的中间 */
    left: 100%; /* 位于容器右侧 */
    border-width: 10px; /* 箭头大小 */
    border-style: solid;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.7); /* 上边框透明，其余为背景颜色 */
    border-radius: 0 0 10px 10px; /* 圆角 */
}
 
/* 气泡内文本样式 */
.bubble p {
    margin: 0; /* 重置边距 */
    color: #333; /* 文本颜色 */
}

这段代码定义了一个气泡框的基本样式，并使用伪元素 :after 来创建一个三角形的箭头，使得气泡看起来像是指向某个方向。气泡框具有圆角和透明背景，并且可以通过调整 border-radius、background-color 和 border 属性来自定义它的样式。

CSS圆角 border-radius属性详解:

2024-08-15

CSS的border-radius属性用于设置元素的圆角。它可以接受1到4个值，分别对应一个或多个圆角。

基本语法如下：




border-radius: 1-4 length | percentage;

其中，length是一个长度值，比如像素(px)或em，percentage是相对于元素的宽度或高度的百分比。

示例代码：




/* 所有圆角都是10像素 */
div {
  border-radius: 10px;
}
 
/* 水平圆角为10像素，垂直圆角为5像素 */
div {
  border-radius: 10px 5px;
}
 
/* 左上角和右下角是10像素，右上角和左下角是5像素 */
div {
  border-radius: 10px 5px 15px 20px; /* 顺时针方向 */
}
 
/* 使用百分比 */
div {
  border-radius: 50%;
}

border-radius可以设置为一个值（正圆形）、两个值（横向和纵向圆角分别设置）、三个值（一个四边形）或四个值（独立设置每个角）。当设置为50%时，会形成一个完美的圆形。

echarts地图自定义label属性以及引入china.js

2024-08-15

所有,javascript

在ECharts中自定义地图的标签（label）属性，并且引入中国地图的示例代码如下：




// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地图
require('echarts/lib/chart/map');
 
// 引入中国地图数据
var chinaMapData = require('echarts/map/js/china');
 
// 注册中国地图
echarts.registerMap('china', chinaMapData);
 
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
 
// 自定义标签样式
var labelOptions = {
    normal: {
        show: true,
        textStyle: {
            color: 'red',
            fontSize: 12
        }
    }
};
 
// 配置项
var option = {
    series: [
        {
            type: 'map',
            map: 'china', // 设置使用的地图
            label: labelOptions, // 应用自定义标签样式
            // 其他配置...
        }
    ]
};
 
// 设置ECharts实例的配置项
myChart.setOption(option);

确保你的项目中已经安装了echarts依赖，并且有一个HTML元素（例如一个div）的id为main来承载ECharts实例。

注意：以上代码示例是基于ECharts 4.x及以上版本的语法。如果你使用的是ECharts 5.x版本，可能需要稍微调整代码，因为ECharts 5.x在模块系统和API上有较大变化。

web前端开发—Flex布局

2024-08-15

Flex布局是CSS布局的一种方法，可以简化布局过程。Flex布局可以使容器内的子元素可以根据可用空间自由伸缩。

以下是一个简单的Flex布局示例，实现一个容器内水平居中的子元素：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;        /* 使用Flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;          /* 高度设置为视口高度 */
}
 
.flex-item {
  margin: 10px;          /* 子元素外边距 */
  padding: 20px;         /* 子元素内边距 */
  background-color: #f9f9f9; /* 背景色 */
  text-align: center;     /* 文本居中 */
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
  <div class="flex-item">Flex Item 3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 类使用 display: flex 属性启用Flex布局，并使用 justify-content: center 和 align-items: center 分别实现水平和垂直居中。.flex-item 类则定义了子元素的外边距、内边距、背景色和文本居中。

column多行布局瀑布流+横向布局的处理数组的方法

2024-08-15

在处理多行布局的瀑布流和横向布局时，我们可以使用一个二维数组来存储信息，并在渲染时根据每行的状态进行处理。以下是一个简单的JavaScript示例，演示如何实现这一逻辑：




function createWaterfallLayout(items, columnCount) {
  let layout = [];
  for (let i = 0; i < columnCount; i++) {
    layout.push([]); // 初始化每一列
  }
 
  items.forEach(item => {
    let shortestColumnIndex = layout.indexOf(layout.sort((a, b) => a.length - b.length)[0]);
    layout[shortestColumnIndex].push(item);
  });
 
  return layout;
}
 
// 示例使用
const items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6']; // 假设这是待布局的数组
const columnCount = 3; // 设定列数
const layout = createWaterfallLayout(items, columnCount);
 
console.log(layout); // 输出多列布局

这个函数createWaterfallLayout接收一个项目数组items和期望的列数columnCount作为参数，然后创建一个二维数组layout来存储每列的项目。对于每个新的项目，它会找到当前最短的列（使用sort((a, b) => a.length - b.length)[0]）并将该项目添加到那一列。这样可以保证每列的项目数目大致平衡，实现了瀑布流布局的效果。