分类 css 下的文章

2024-08-07

CSS2D3D转换是指在CSS中应用2D或3D转换效果。2D转换主要包括平移(translate)、缩放(scale)、旋转(rotate)和倾斜(skew)等，而3D转换则在此基础上增加了z轴上的转换，如透视(perspective)和转换(transform)。

以下是一些CSS2D3D转换的例子：

2D转换:




/* 平移 */
.element {
  transform: translate(50px, 100px);
}
 
/* 缩放 */
.element {
  transform: scale(1.5, 2);
}
 
/* 旋转 */
.element {
  transform: rotate(45deg);
}
 
/* 倾斜 */
.element {
  transform: skew(30deg, 20deg);
}

3D转换:




/* 设置透视 */
.element {
  perspective: 500px;
}
 
/* 3D旋转 */
.element {
  transform: rotateX(45deg) rotateY(30deg);
}
 
/* 3D位置移动 */
.element {
  transform: translateX(50px) translateY(100px) translateZ(50px);
}
 
/* 3D缩放 */
.element {
  transform: scaleX(1.5) scaleY(2) scaleZ(1.5);
}

CSS3D转换需要硬件加速以实现更好的性能，可以通过在动画或转换元素上设置transform: translateZ(0);或其他非none的backface-visibility属性来实现。

- 阅读更多 -

私藏前端八股收集【CSS篇】

System

2024-08-07

所有,css

以下是一个简单的CSS示例，演示如何使用Flexbox布局创建一个八股收集的表单界面：




/* 基本的CSS重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
 
/* 头部样式 */
.stock-collector-header {
    text-align: center;
    padding: 20px;
    color: #333;
    background-color: #e6e6e6;
}
 
/* 主要内容区样式 */
.stock-collector-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}
 
/* 输入框样式 */
.stock-input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
}
 
/* 提交按钮样式 */
.stock-submit {
    background-color: #5cb85c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
 
.stock-submit:hover {
    background-color: #449d44;
}

这段CSS代码为一个简单的八股收集表单定义了基本的布局和样式。它使用Flexbox布局来创建一个响应式的界面，其中包含一个头部、主要内容区和一个用于提交数据的表单。输入框和按钮都有合适的间距，并且使用了简单的边框和背景色来增强表单的交互感。

- 阅读更多 -

CSS的背景及三大特性

System

2024-08-07

所有,css

背景属性是CSS中非常重要的一部分，它允许我们设置页面元素的背景样式。CSS背景属性允许指定背景颜色，背景图片，背景平铺，背景位置，背景原点等。

背景颜色：

背景颜色属性是用来设置元素的背景颜色的。其主要是通过指定十六进制值、RGB、RGBA、HSL、HSLA或者预定义的颜色名称来实现的。




div {
  background-color: #ff0000; /* 十六进制颜色 */
}
 
div {
  background-color: rgb(0, 255, 0); /* RGB颜色 */
}
 
div {
  background-color: hsl(120, 100%, 50%); /* HSL颜色 */
}
 
div {
  background-color: red; /* 预定义的颜色名称 */
}

背景图片：

背景图片属性是用来设置元素的背景图片的。其主要是通过指定图片的URL路径来实现的。




div {
  background-image: url('image.jpg'); /* 设置背景图片 */
}

背景平铺：

背景平铺属性是用来设置背景图片是否及如何平铺的。其主要是通过指定repeat-x、repeat-y、repeat、space、round、no-repeat来实现的。




div {
  background-repeat: repeat-x; /* 背景图片横向平铺 */
}
 
div {
  background-repeat: repeat-y; /* 背景图片纵向平铺 */
}
 
div {
  background-repeat: no-repeat; /* 背景图片不平铺 */
}

背景位置：

背景位置属性是用来设置背景图片的起始位置的。其主要是通过指定关键词（如top、bottom、left、right、center）或者百分比（如50% 75%）来实现的。




div {
  background-position: top right; /* 背景图片放置在右上角 */
}
 
div {
  background-position: 50% 75%; /* 背景图片放置在水平方向50%、垂直方向75%的位置 */
}

背景原点：

背景原点属性是用来设置背景定位区域的原点的。其主要是通过指定关键词（如padding-box、border-box、content-box）来实现的。




div {
  background-origin: border-box; /* 背景定位区域的原点在边框区域 */
}
 
div {
  background-origin: padding-box; /* 背景定位区域的原点在内边距区域 */
}
 
div {
  background-origin: content-box; /* 背景定位区域的原点在内容区域 */
}

背景尺寸：

背景尺寸属性是用来设置背景图片的尺寸的。其主要是通过指定长度值或者百分比（如auto、100px 50px、50% 33%）来实现的。




div {
  background-size: auto; /* 背景图片保持原始尺寸 */
}
 
div {
  background-size: 100px 50px; /* 背景图片的宽度为100px、高度为50px */
}
 
div {
  background-size: cover; /*

System

2024-08-07

所有,css




/* 自定义滚动条的宽度 */
::-webkit-scrollbar {
    width: 12px; /* 水平滚动条的高度、垂直滚动条的宽度 */
}
 
/* 自定义滚动条轨道的样式 */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* 滚动条轨道的背景颜色 */
}
 
/* 自定义滚动条的样式 */
::-webkit-scrollbar-thumb {
    background: #888; /* 滚动条的背景颜色 */
}
 
/* 当鼠标悬停在滚动条上时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* 滚动条的背景颜色 */
}

这段代码使用了WebKit内核浏览器支持的伪元素::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb来自定义滚动条的样式。这包括设置滚动条的宽度、轨道的背景色以及滚动条的颜色，当鼠标悬停在滚动条上时，滚动条的颜色会有所变化。这为用户提供了更加个性化的浏览器滚动体验。

- 阅读更多 -

前端小案例——动态导航栏文字（HTML + CSS）

System

2024-08-07

所有,css

以下是实现动态导航栏的HTML和CSS代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Navigation Bar</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .nav {
    background-color: #333;
    overflow: hidden;
  }
  .nav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .nav a:hover {
    background-color: #ddd;
    color: black;
  }
</style>
</head>
<body>
 
<div class="nav">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>
 
<h2 id="home">Home</h2>
<p>Welcome to my home page.</p>
 
<h2 id="news">News</h2>
<p>Some news this is place holder text only.</p>
 
<h2 id="contact">Contact</h2>
<p>You can reach me via email at example@example.com.</p>
 
<h2 id="about">About</h2>
<p>Some information about me and my website.</p>
 
</body>
</html>

这段代码创建了一个基本的动态导航栏，当用户将鼠标悬停在导航链接上时，会出现悬浮效果。同时，每个链接指向页面中的一个特定部分，使得用户可以快速浏览页面的不同部分。

- 阅读更多 -

24个CSS新特性，不容错过！，吃透这份阿里P8纯手打Web前端面经

System

2024-08-07

所有,css

CSS的更新速度很快，每年都会有新的规范发布，其中一些新特性可能并不为常用，但了解这些新特性有助于你在开发过程中选择最合适的解决方案。以下是一些在CSS中比较常见的新特性：

CSS Variables: 使用自定义属性可以在CSS中创建可以在整个文档中重复使用的变量。




:root {
  --main-bg-color: coral;
}
 
body {
  background-color: var(--main-bg-color);
}

CSS Calc(): 使用calc()可以在值中执行基本数学运算。




.box {
  width: calc(100% - 20px);
}

CSS Shapes: 利用shape属性，可以定义矩形或图片形状的CSS样式。




.box {
  shape-outside: circle();
}

CSS Mix-Blend-Mode: 混合不同图层的时候，可以使用混合模式。




.layer1 {
  mix-blend-mode: multiply;
}

CSS Custom Properties and Values Formats: 自定义属性和值格式允许创建自定义的CSS属性和值类型。




@property --main-text-color {
  syntax: '#rrggbb';
  inherits: true;
  initial-value: #ff00ff;
}
 
.my-element {
  background-color: var(--main-text-color);
}

CSS Regions: 使用CSS Regions可以控制文本的流动和布局。




article {
  flow-from: region-1;
  flow-into: region-2;
}
 
#region-1 {
  region-fragment: region-after;
}

CSS Filters: 提供各种图像效果，如模糊，对比度调整等。




img {
  filter: blur(5px);
}

CSS Images: 使用CSS Image Values，可以在CSS中直接使用图像。




.icon {
  background-image: image('icon.png');
}

CSS Overflow: 使用新的overflow属性，可以创建自定义的滚动条。




.scrollable {
  overflow-y: overlay;
}

CSS Writing-Mode: 改变文本的书写方向。




.vertical-text {
  writing-mode: vertical-rl;
}

CSS Initial Letter: 初始字母特性允许你设置文本的第一个字母的样式。




p:first-letter {
  font-size: 200%;
}

CSS Initial Value: 初始值特性允许你为属性设置初始值。




.my-element {
  padding: initial(padding);
}

CSS Containment: 控制元素内的渲染，性能优化。




section {
  contain: style layout;
}

CSS Painting: 使用CSS Custom Paint API，可以在Canvas上绘制自定义图形。




ctx.fillStyle = {
  paint: 'myPaint'
};
 
ctx.fillRect(0, 0, 100, 100);

CSS Type Layout: 使用新的CSS Layout API可以控制文本布局。




.text {
  layout-flow: horizontal;
}

CSS Logical Properties: 使用逻辑属性可以创建对称的布局，无论方向如何改变都可

- 阅读更多 -

CSS transition(过渡效果)详解

System

2024-08-07

所有,css

CSS transition 属性用于设置一个属性的过渡效果。它可以让属性的变化在一定的时间内平滑地进行。

基本语法：




transition: property duration timing-function delay;

property：定义应用过渡效果的 CSS 属性名称。
duration：定义过渡效果花费的时间长度。
timing-function：定义过渡效果的速度曲线，默认为 "ease"。
delay：定义过渡效果何时开始，默认是 0，即立即开始。

示例代码：




div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-in-out;
}
 
div:hover {
  width: 200px;
}

在上述例子中，当鼠标悬停在 div 上时，它的宽度会在 1 秒内从 100px 平滑过渡到 200px，速度曲线为 "ease-in-out"。

- 阅读更多 -

CSS样式（第二天导读）

System

2024-08-07

所有,css

CSS样式对于网页的呈现非常重要，它决定了网页元素的外观。以下是一些CSS样式的例子，它们可以应用于第二天导读的不同部分：

标题样式：




.second-day-title {
  color: #333333;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

段落样式：




.second-day-paragraph {
  color: #666666;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 15px;
}

列表样式：




.second-day-list {
  color: #666666;
  font-size: 16px;
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 15px;
}

链接样式：




.second-day-link {
  color: #1E90FF;
  text-decoration: none;
}
 
.second-day-link:hover {
  text-decoration: underline;
}

图片样式：




.second-day-image {
  display: block;
  margin: 0 auto;
  width: 50%;
}

将这些样式添加到HTML文件中，并将相应的类添加到标题、段落、列表、链接和图片元素上，即可实现基本的样式设置。

HTML示例：




<div class="second-day-container">
  <h2 class="second-day-title">第二天</h2>
  <p class="second-day-paragraph">在第二天，我们将介绍...</p>
  <ul class="second-day-list">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
  </ul>
  <a href="https://example.com" class="second-day-link">查看详情</a>
  <img src="image.jpg" alt="描述" class="second-day-image">
</div>

在实际应用中，你可能需要更复杂的样式，包括响应式设计、媒体查询等，以确保在不同设备和屏幕尺寸上都能良好显示。

- 阅读更多 -

CSS拖曳盒子案例

System

2024-08-07

所有,css

以下是一个简单的HTML和CSS代码示例，演示了如何使用CSS创建一个可以被拖动的盒子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖曳盒子</title>
<style>
  .draggable-box {
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
    position: absolute;
    cursor: move;
  }
</style>
</head>
<body>
 
<div class="draggable-box" id="draggable"></div>
 
<script>
  const draggableBox = document.getElementById('draggable');
 
  draggableBox.addEventListener('mousedown', function(event) {
    let shiftX = event.clientX - draggableBox.getBoundingClientRect().left;
    let shiftY = event.clientY - draggableBox.getBoundingClientRect().top;
 
    document.addEventListener('mousemove', move);
 
    function move(event) {
      draggableBox.style.left = event.clientX - shiftX + 'px';
      draggableBox.style.top = event.clientY - shiftY + 'px';
    }
 
    document.addEventListener('mouseup', function() {
      document.removeEventListener('mousemove', move);
    });
  });
</script>
 
</body>
</html>

这段代码中，我们创建了一个可拖动的盒子，通过监听鼠标的mousedown事件来开始拖动操作，计算鼠标点击点与盒子左上角的距离，并在document上注册mousemove事件来更新盒子的位置。鼠标松开时，移除mousemove事件监听。这个示例提供了一个基本的拖曳功能，并且可以在现代浏览器中运行。

- 阅读更多 -

【前端随记】纯css自定义checkbox复选框样式

System

2024-08-07

所有,css




/* 隐藏原生的checkbox */
.custom-checkbox input[type="checkbox"] {
  display: none;
}
 
/* 创建一个自定义的复选框 */
.custom-checkbox label:before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 8px;
  border: 1px solid #000;
  /* 可以添加更多样式，比如圆角等 */
}
 
/* 当checkbox被选中时改变复选框的样式 */
.custom-checkbox input[type="checkbox"]:checked + label:after {
  content: "✔";
  display: inline-block;
  color: #fff;
  position: absolute;
  left: 2px;
  top: 2px;
  width: 13px;
  height: 13px;
  background-color: #000;
  /* 可以添加更多样式，比如加边框等 */
}

这个CSS样式定义了一个基本的自定义复选框，当复选框被选中时，会在其中显示一个勾选标记。这个例子展示了如何隐藏原生的checkbox，并通过label和伪元素(:before和:after)来创建自定义的样式。

- 阅读更多 -