标签 css 下的文章

2024-08-15

要使用CSS实现边框流动效果，可以通过关键帧（keyframes）和动画（animations）属性来完成。以下是一个简单的例子，展示如何为一个元素添加边框流动的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Flow Effect</title>
<style>
  .border-flow {
    width: 200px;
    height: 50px;
    position: relative;
    background-color: #f0f0f0;
    margin: 20px;
    border-radius: 10px;
    animation: flow 2s infinite alternate;
  }
 
  .border-flow::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #333;
    border-radius: inherit;
    animation: flow-border 2s infinite alternate;
  }
 
  @keyframes flow {
    0% {
      box-shadow: 0 0 10px #333;
    }
    100% {
      box-shadow: 0 0 20px #333;
    }
  }
 
  @keyframes flow-border {
    0% {
      border-color: #333;
    }
    100% {
      border-color: #f0f0f0;
    }
  }
</style>
</head>
<body>
<div class="border-flow"></div>
</body>
</html>

在这个例子中，.border-flow 类创建了一个带有背景色和圆角的盒子，并且使用 ::before 伪元素来创建一个边框。animation 属性用于应用流动效果，@keyframes flow 和 @keyframes flow-border 定义了这个动画的关键帧。动画效果通过改变盒子的 box-shadow 和伪元素的 border-color 来实现，从而模拟出边框流动的视觉效果。

System

2024-08-15

所有,css3

在HTML中，可以使用<blockquote>标签来表示一块引用自其他来源的文本。通常，这些文本会以斜体显示，并且还可以添加一个引号标记（通常是一个大的引号字符）来表示这是一个引用。

下面是一个使用<blockquote>的例子：




<blockquote>
  这是一个示例引用。这段文本将以斜体显示，并且在左右两边有装饰性的引号。
</blockquote>

在CSS中，可以使用::before和::after伪元素来添加引号标记。下面是一个简单的CSS样式示例，它将给<blockquote>添加装饰性的引号：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blockquote Example</title>
<style>
blockquote {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  margin: 20px 0;
  padding: 10px 20px;
  position: relative;
  quotes: '" "' '';
}
 
blockquote::before {
  content: open-quote;
  position: absolute;
  left: 5px;
  top: 5px;
  color: #666;
  font-size: 3em;
}
 
blockquote::after {
  content: close-quote;
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: #666;
  font-size: 3em;
}
</style>
</head>
<body>
<blockquote>
  这是一个示例引用。这段文本将以斜体显示，并且在左右两边有装饰性的引号。
</blockquote>
</body>
</html>

在这个例子中，blockquote选择器定义了块引用的基本样式，而blockquote::before和blockquote::after伪元素分别添加了开始和结束的引号。content属性使用了open-quote和close-quote值，它们引用了quotes属性定义的值。

- 阅读更多 -

css布局和定位

System

2024-08-15

所有,css3

CSS布局和定位是Web开发中的一个核心技能。以下是一些常用的布局和定位技术：

浮动（Float）：




.float-left { float: left; }
.float-right { float: right; }

定位（Position）：




.relative-position { position: relative; top: 10px; left: 20px; }
.absolute-position { position: absolute; top: 0; right: 0; }
.fixed-position { position: fixed; bottom: 0; left: 0; }

flexbox布局：




.flex-container { display: flex; }
.flex-item { flex: 1; }

grid布局：




.grid-container { display: grid; grid-template-columns: auto 1fr; }
.grid-item { grid-column: 2 / 3; }

表格布局：




.table-layout { display: table; width: 100%; }
.table-row { display: table-row; }
.table-cell { display: table-cell; padding: 10px; }

绝对定位（Inline-block）：




.inline-block { display: inline-block; vertical-align: top; }

这些方法可以根据不同的布局需求选择使用。在实际开发中，可以根据项目的具体要求和浏览器的兼容性需求进行选择和应用。

- 阅读更多 -

Threejs进阶之七：使用CSS3DRenderer渲染HTML标签

System

2024-08-15

所有,css3




import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 
let camera, scene, renderer, labelRenderer, controls;
let mesh;
 
init();
animate();
 
function init() {
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
    camera.position.set(0.5, 0.5, 0.5);
 
    scene = new THREE.Scene();
 
    mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1));
    scene.add(mesh);
 
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
 
    labelRenderer = new CSS3DRenderer();
    labelRenderer.setSize(window.innerWidth, window.innerHeight);
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = 0;
    document.body.appendChild(labelRenderer.domElement);
 
    controls = new OrbitControls(camera, labelRenderer.domElement);
 
    // 创建CSS3DObject并关联HTML元素
    const label = new CSS3DObject(document.createElement('div'));
    label.element.style.width = '100px';
    label.element.style.height = '100px';
    label.element.style.background = 'red';
    label.position.set(0.5, 0.5, 0);
    scene.add(label);
 
    // 创建一个新的CSS3DObject并关联另一个HTML元素
    const anotherLabel = new CSS3DObject(document.createElement('div'));
    anotherLabel.element.style.width = '50px';
    anotherLabel.element.style.height = '50px';
    anotherLabel.element.style.background = 'blue';
    anotherLabel.position.set(-0.5, 0.5, 0);
    scene.add(anotherLabel);
}
 
function animate() {
    requestAnimationFrame(animate);
    render();
}
 
function render() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.005;
    controls.update();
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);
}

这段代码初始化了Three.js场景，包括相机、场景、灯光、物体以及渲染器。使用CSS3DRenderer渲染了一个红色的HTML DIV标签和一个蓝色的HTML DIV标签，并且它们会随着物体旋转而旋转。这是一个Three.js中CSS3DRenderer的基本使用案例。

- 阅读更多 -

使用css3实现一个超浪漫的新年倒计时

System

2024-08-15

所有,css3

以下是一个使用HTML和CSS3实现的简单新年倒计时示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Countdown</title>
<style>
  .countdown {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
  }
  .day {
    animation: day-countdown 1s infinite;
  }
  @keyframes day-countdown {
    0% {
      color: #ff0;
    }
    100% {
      color: #f0f;
    }
  }
</style>
</head>
<body>
<div class="countdown day">01</div>
 
<script>
// JavaScript 控制倒计时
const newYear = new Date('2023-01-01T00:00:00'); // 请将日期更改为新的一年开始的时间
 
function countdown() {
  const now = new Date();
  const distance = newYear - now;
 
  if (distance < 0) {
    clearInterval(intervalId);
    document.querySelector('.countdown').textContent = '00';
  } else {
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    document.querySelector('.countdown').textContent = days.toString().padStart(2, '0');
  }
}
 
countdown(); // 初始运行
const intervalId = setInterval(countdown, 1000); // 每秒更新
</script>
</body>
</html>

这段代码会在网页上显示一个倒计时天数，从1开始，并且每秒更新。JavaScript 脚本负责计算剩余时间，并更新页面上的数字。CSS3 中的 @keyframes 用于创建颜色变化的动画效果。这个示例简单易懂，适合作为新手学习CSS动画的入门项目。

- 阅读更多 -

前端必学的CSS制作Switch动画开关按钮演示

System

2024-08-15

所有,css3




/* 设置开关按钮的基本样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 
/* 设置开关按钮内部元素的基本样式 */
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
 
/* 设置开关按钮轨道的基本样式 */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
 
/* 设置开关按钮轨道内的小圆点的基本样式 */
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
 
/* 当输入框被选中时，轨道的背景色改变 */
input:checked + .slider {
  background-color: #2196F3;
}
 
/* 当输入框被选中时，轨道内的小圆点的位置改变 */
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
 
/* 当鼠标悬停在开关按钮上时，轨道的背景色改变 */
.switch:hover .slider {
  background-color: #2196F3;
}
 
/* 当鼠标悬停在开关按钮上且输入框被选中时，轨道内的小圆点的位置改变 */
input:checked + .slider:hover:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
 
/* 当开关处于活跃状态（即选中）时，轨道的边框样式 */
.slider.round:before {
  border-radius: 50%;
}

这段代码展示了如何使用CSS创建一个简单的Switch开关按钮，并且包括了鼠标悬停时的样式变化。它使用了:before伪元素来实现小圆点的移动，并利用了CSS的transition属性来实现平滑的动画效果。

- 阅读更多 -

CSS设置元素的高宽为屏幕页面的高宽

System

2024-08-15

所有,css3

要使用CSS设置一个元素的宽度和高度为屏幕页面的高度和宽度，可以使用vw（视口宽度单位）和vh（视口高度单位）。以下是一个简单的例子：




/* 设置元素宽度为100%的视口宽度，高度为100%的视口高度 */
.full-screen {
  width: 100vw;
  height: 100vh;
}

在HTML中使用这个类：




<div class="full-screen">
  这个元素的宽度和高度会匹配屏幕的宽度和高度。
</div>

这样.full-screen类的元素就会占据整个视口的宽度和高度。

- 阅读更多 -

【前端】3.总结一下前端css样式规范

System

2024-08-15

所有,css3

CSS样式规范可以帮助保持代码的一致性和可维护性。以下是一些关键的规范点：

命名规范：类名和ID应该具有描述性，使用驼峰命名法（camelCase）或短横线命名（kebab-case）。




/* 正确的命名 */
.headerNavigation { /* ... */ }
.site-logo { /* ... */ }
 
/* 不推荐的命名 */
.hd-nav { /* ... */ }
.site_logo { /* ... */ }

缩进和换行：使用2个空格进行缩进，在选择器和花括号之间保留空格。




.selector {
  property: value;
}

空格：在属性值前后保留空格。




.selector {
  property: value; /* 在冒号前后保留空格 */
}

选择器组：相关的选择器可以并排书写，每个选择器独占一行。




/* 并排书写选择器 */
h1, h2, h3 {
  font-weight: bold;
}
 
/* 不推荐将所有选择器放在同一行 */
h1, h2, h3 { font-weight: bold; }

属性顺序：将相关的属性按照特定的顺序组织，如布局定位属性（display, position, top, right, bottom, left, float, clear, visibility, overflow）、盒模型属性（width, height, margin, padding, border）、文本属性（font, line-height, text-align, color, text-transform）、背景属性（background, background-image, background-position）、动画属性等。




.selector {
  display: block;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 20px;
  font-size: 16px;
  background-color: #f0f0f0;
}

注释：使用注释描述样式的目的和用途。




/* 头部导航区域 */
.header-navigation {
  /* 样式规则 */
}

避免过度嵌套：避免不必要的嵌套，以保持规则简洁明了。




/* 避免过度嵌套 */
.parent {
  color: red;
 
  .child {
    color: green; /* 不推荐在子选择器中重复父选择器的样式 */
  }
}

使用SCSS、LESS等预处理器：预处理器提供了变量、混合（mixins）、函数等高级功能，可以提高CSS开发效率。




// 使用SCSS变量
$font-stack: Helvetica, sans-serif;
 
body {
  font-family: $font-stack;
  color: #333;
}

性能优化：避免不必要的复杂选择器和过度使用伪类。




/* 避免不必要的选择器嵌套 */
a:hover {
  color: blue; /* 直接使用伪类，不要通过父元素进行引导 */
}

移动优先或响应式样式：根据设计稿设置合适的断点，适配不同屏幕尺寸。




/* 响应式布局 */
.container {
  width: 100%;
}
 
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
 
@media (min-width: 992px

- 阅读更多 -

CSS3 2D变形过渡动画

System

2024-08-15

所有,css3

CSS3 2D变形、过渡和动画是一个强大的工具，可以用来创建动态的用户界面和富媒体内容。以下是一个简单的示例，展示了如何将2D变形、过渡和动画应用于一个简单的HTML元素。

HTML:




<div class="box"></div>

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 30px;
  /* 2D变形 */
  transform: rotate(0deg) scale(1);
  /* 过渡效果 */
  transition: transform 0.5s ease-in-out;
}
 
.box:hover {
  /* 鼠标悬停时的变形 */
  transform: rotate(360deg) scale(1.5);
}
 
/* 使用关键帧动画 */
@keyframes growShrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
 
.box.animated {
  /* 触发动画 */
  animation: growShrink 2s infinite alternate;
}

在这个例子中，.box 元素在没有鼠标悬停时保持正常大小和旋转角度，当鼠标悬停时，它会旋转和放大。通过.animated 类，可以触发一个无限循环的动画，该动画会在大小和正常状态之间切换。这个例子演示了如何结合使用过渡和关键帧动画来创造更生动的用户界面元素。

- 阅读更多 -

css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流

System

2024-08-15

所有,css3

要使用CSS3实现一个图片瀑布流，可以使用CSS3的column-width和column-gap属性来创建列，并使用break-inside: avoid来避免图片被拆分到不同列中。下面是一个简单的示例：

HTML:




<div class="waterfall">
  <div class="waterfall-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="waterfall-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <!-- 更多 .waterfall-item -->
</div>

CSS:




.waterfall {
  column-count: 3; /* 固定列数 */
  column-gap: 1em; /* 列间隔 */
}
 
.waterfall-item {
  break-inside: avoid; /* 避免图片被拆分 */
  margin-bottom: 1em; /* 列间的间隔 */
  width: 100%; /* 列宽 */
}
 
.waterfall-item img {
  width: 100%; /* 图片宽度 */
  height: auto; /* 图片高度 */
  display: block; /* 阻止下方出现空隙 */
}

这个例子中，.waterfall是包含图片的容器，.waterfall-item是每个图片的容器。通过设置.waterfall的column-count为3，可以创建固定的列数。如果需要根据屏幕宽度调整列数，可以使用CSS媒体查询来动态改变column-count的值。

- 阅读更多 -