标签 css 下的文章

2024-08-19

以下是一个简单的HTML和CSS代码示例，演示了如何使用CSS3实现实时时间数字滚动效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时时间滚动效果</title>
<style>
  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
 
  .time-container {
    overflow: hidden;
    white-space: nowrap;
    background: #f2f2f2;
    padding: 10px;
    border-radius: 5px;
  }
 
  .time-display {
    display: inline-block;
    font-size: 3em;
    animation: scroll 5s linear infinite;
  }
</style>
</head>
<body onload="startClock()">
 
<div class="time-container">
  <div id="time-element" class="time-display"></div>
</div>
 
<script>
function startClock() {
  const timeElement = document.getElementById('time-element');
  const updateTime = () => {
    const now = new Date();
    timeElement.textContent = now.toLocaleTimeString('it-IT');
  };
 
  updateTime(); // Initialize the time display
  setInterval(updateTime, 1000); // Update the time every second
}
</script>
 
</body>
</html>

这段代码实现了一个简单的数字时钟，其中时间数字通过CSS动画在屏幕上滚动。@keyframes scroll定义了数字从屏幕右侧进入到左侧的滚动动画。.time-display类使用这个动画，并且通过JavaScript每秒更新内容以显示当前时间。

- 阅读更多 -

如果使用div+CSS实现自动轮播效果

System

2024-08-19

所有,css3

要使用div和CSS实现自动轮播效果，可以使用HTML结构来创建轮播的容器，然后使用CSS来设计样式并添加JavaScript代码以实现自动轮播。以下是一个简单的例子：

HTML:




<div class="carousel">
  <div class="slide active">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <!-- 更多幻灯片 -->
</div>

CSS:




.carousel {
  position: relative;
  width: 300px;
  height: 200px;
  margin: auto;
}
 
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  background-color: #f1f1f1;
  color: #111;
}
 
.slide.active {
  display: block;
}

JavaScript (自动轮播):




function nextSlide() {
  var i, slides;
  slides = document.getElementsByClassName("slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(nextSlide, 2000); // 更改时间以改变轮播速度
}
 
var slideIndex = 0;
nextSlide();

这个例子中，.carousel 是轮播的容器，.slide 是每个幻灯片的类。JavaScript 函数 nextSlide 会在指定的时间间隔后被调用，来显示下一个幻灯片，并隐藏其他幻灯片。通过设置 setTimeout 的时间，你可以控制轮播的速度。

- 阅读更多 -

css弧形文字抽奖转盘弧形文字

System

2024-08-19

所有,css3

要创建一个弧形文字抽奖转盘，你可以使用CSS的transform属性和text-align属性来实现文字的弧形排列。以下是一个简单的示例：

HTML:




<div class="lottery-wheel">
  <div class="sector">半圆1</div>
  <div class="sector">半圆2</div>
  <div class="sector">半圆3</div>
  <div class="sector">半圆4</div>
  <div class="sector">半圆5</div>
  <div class="sector">半圆6</div>
</div>

CSS:




.lottery-wheel {
  position: relative;
  width: 200px;
  height: 200px;
  transform: rotate(180deg) translateY(-50%);
}
 
.sector {
  position: absolute;
  top: 50%;
  transform-origin: 50% -100px;
  text-align: center;
  white-space: nowrap;
  transform: rotate(calc(-90deg + 30deg * 6)) translateX(50%) translateY(-50%);
}
 
.sector:nth-child(1) { transform: rotate(30deg) translateX(50%) translateY(-100px); }
.sector:nth-child(2) { transform: rotate(90deg) translateX(50%) translateY(-100px); }
.sector:nth-child(3) { transform: rotate(150deg) translateX(50%) translateY(-100px); }
.sector:nth-child(4) { transform: rotate(210deg) translateX(50%) translateY(-100px); }
.sector:nth-child(5) { transform: rotate(270deg) translateX(50%) translateY(-100px); }
.sector:nth-child(6) { transform: rotate(330deg) translateX(50%) translateY(-100px); }

这个例子中，.lottery-wheel 是转盘的容器，.sector 是每个扇区的基础类，后面根据 nth-child 选择器定制了每个扇区的特定旋转角度。每个 .sector 都被旋转并放置在转盘的顶部，形成一个完整的弧形。

你可以根据需要调整 .lottery-wheel 的大小和 .sector 的具体旋转角度和文字内容来自定义这个抽奖转盘。

- 阅读更多 -

CSS3 filter滤镜

System

2024-08-19

所有,css3

CSS3 filter属性用于应用模糊或颜色变换效果，常用于调整图片、文本或其他HTML元素的视觉效果。

以下是一些CSS3 filter的示例代码：

模糊效果（blur）:




img {
  filter: blur(5px);
}

亮度调整（brightness）:




img {
  filter: brightness(50%);
}

对比度调整（contrast）:




img {
  filter: contrast(200%);
}

灰度效果（grayscale）:




img {
  filter: grayscale(100%);
}

色彩旋转（hue-rotate）:




img {
  filter: hue-rotate(90deg);
}

反色效果（invert）:




img {
  filter: invert(100%);
}

饱和度调整（saturate）:




img {
  filter: saturate(30%);
}

sepia效果（sepia）:




img {
  filter: sepia(60%);
}

影子效果（drop-shadow）:




img {
  filter: drop-shadow(16px 16px 20px red);
}

混合效果（blend-mode）:




img {
  filter: blend(overlay);
}

每个滤镜都有其特定的用途和效果，可以根据需要选择合适的滤镜应用到HTML元素上。

System

2024-08-19

所有,css3

在CSS3中，我们可以使用transform属性的rotate()函数来实现元素的旋转效果。rotate()函数可以指定旋转的角度，其值可以是度（deg）或弧度（rad）。

以下是一些使用CSS3 rotate 旋转样式的示例：

旋转一个元素90度：




div {
  transform: rotate(90deg);
}

旋转一个元素-90度（即逆时针旋转90度）：




div {
  transform: rotate(-90deg);
}

旋转一个元素180度（即360度，或者可以说是180度的两倍，因为我们是在一个完整的圆环中计算）：




div {
  transform: rotate(360deg); /* 或者 transform: rotate(180deg); */
}

使用旋转中心点（默认情况下，旋转中心点是元素的中心，但我们可以通过transform-origin属性来改变它）：




div {
  transform-origin: top left; /* 或者 bottom right, center等等 */
  transform: rotate(90deg);
}

使用动画来实现连续旋转（例如，旋转一个元素直到它消失）：




@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
 
div {
  animation: spin 2s linear infinite;
}

以上代码展示了如何使用CSS3的rotate函数来实现2D旋转效果，并提供了一些如何改变旋转中心点和使用动画的例子。

- 阅读更多 -

CSS3 分页

System

2024-08-19

所有,css3

CSS3 分页通常指的是使用 CSS3 创建分页效果，这可以通过变换或过渡来实现。以下是一个简单的例子，使用 CSS3 制作一个简单的分页效果：

HTML:




<div class="pagination">
  <a href="#" class="page active">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
</div>

CSS:




.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.page {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
  transition: transform 0.3s ease-in-out;
}
 
.page.active {
  font-weight: bold;
}
 
.page:hover {
  transform: scale(1.1);
}

在这个例子中，.pagination 是一个包含分页链接的容器。.page 类定义了分页的基本样式，并且使用了 transition 属性来制作平滑的过渡效果。.page.active 是当前激活页的样式，.page:hover 是鼠标悬停时分页的变换样式。

- 阅读更多 -

CSS3属性之text-overflow:ellipsis

System

2024-08-19

所有,css3

text-overflow: ellipsis 是CSS3的一个属性，它用来说明当文本溢出包含它的元素时，应该如何显示文本的溢出部分。这个属性通常与 white-space: nowrap; 和 overflow: hidden; 一起使用，以确保文本在一行内显示，并且溢出的部分被省略号(…)替换。

解决方案：

直接在HTML元素中使用CSS样式：




<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>
 
<p>This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
 
</body>
</html>

在CSS文件中定义样式：




/* CSS文件 */
p {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}




<!-- HTML文件 -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 
<p>This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
 
</body>
</html>

使用内联样式：




<!DOCTYPE html>
<html>
<body>
 
<p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">This is some long text that will be hidden and an ellipsis will be used when the text overflows the container.</p>
 
</body>
</html>

以上三种方法都可以实现相同的效果，你可以根据你的项目需求和个人喜好选择使用哪种方法。

- 阅读更多 -

10Rust前端技术：HTMLCSS3与ES6+新特性解析与应用

System

2024-08-19

所有,css3




// 假设我们有一个Rust函数，用于将字符串转换为大写
fn to_uppercase(input: &str) -> String {
    input.to_uppercase()
}
 
// 在Rust中，我们可以使用一个宏来导出函数到JavaScript
#[wasm_bindgen]
pub fn export_to_uppercase(input: &str) -> String {
    to_uppercase(input)
}
 
// 以下是JavaScript代码，用于加载和使用Rust生成的WebAssembly模块
import("./your_rust_module_path").then(module => {
    const uppercased = module.export_to_uppercase('hello world');
    console.log(uppercased); // 输出: 'HELLO WORLD'
});

这个例子展示了如何在Rust中定义一个简单的函数，并使用wasm_bindgen宏来导出它，以便它可以在WebAssembly模块中被JavaScript代码调用。然后，在JavaScript中，我们通过动态导入Rust模块并调用该函数来演示如何使用Rust代码生成的WebAssembly。

- 阅读更多 -

css笔记：（背景相关的属性）

System

2024-08-19

所有,css

背景相关的CSS属性包括：

background-color: 设置元素的背景颜色。
background-image: 将图像设置为背景。
background-position: 设置背景图像的起始位置。
background-size: 设置背景图片的尺寸。
background-repeat: 设置是否及如何重复背景图像。
background-clip: 设置背景的绘制区域。
background-origin: 设置背景图片的定位区域。
background-attachment: 设置背景图像是否固定或与页面滚动。
background: 简写属性，可以同时设置以上所有背景属性。

示例代码：




/* 设置背景颜色为灰色 */
.element {
  background-color: #808080;
}
 
/* 设置背景图片，不重复，居中 */
.element {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
}
 
/* 设置背景图片，覆盖整个元素，不重复，居中，固定到视口 */
.element {
  background: url('image.jpg') no-repeat center / cover fixed;
}

以上代码展示了如何使用这些属性来设置元素的背景样式。简写的background属性可以包括颜色，图像，位置，大小，重复，剪切和附着的值，并且它是设置背景最简洁的方法。

- 阅读更多 -

【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量

System

2024-08-19

所有,css

在Vue 3 + Vite项目中引入并使用SCSS，首先需要确保你的项目支持SCSS。Vite通过插件自动处理这部分。

安装依赖：




npm install -D sass

在Vue组件中使用SCSS：

在.vue文件中，可以在<style>标签中指定lang="scss"来使用SCSS：




<template>
  <div class="example">Hello, SCSS!</div>
</template>
 
<script setup>
// JavaScript代码
</script>
 
<style lang="scss">
.example {
  color: blue;
  font-size: 16px;
  &:hover {
    color: red;
  }
}
</style>

创建并使用全局SCSS变量：

首先，在项目根目录下创建一个SCSS文件（例如styles/variables.scss），定义变量：




// styles/variables.scss
$primary-color: blue;
$font-size: 16px;

然后，在vite.config.js中配置SCSS全局变量：




// vite.config.js
import { defineConfig } from 'vite';
import scssConfig from './styles/variables.scss';
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$shared-styles: ${JSON.stringify(scssConfig)};`
      }
    }
  }
});

最后，在组件的<style>中使用这些全局变量：




<template>
  <div class="global-example">Hello, Global SCSS!</div>
</template>
 
<script setup>
// JavaScript代码
</script>
 
<style lang="scss">
@import '~@/styles/variables.scss'; // 导入SCSS变量文件
 
.global-example {
  color: $primary-color;
  font-size: $font-size;
  &:hover {
    color: darken($primary-color, 10%);
  }
}
</style>

确保vite.config.js中的路径是正确的，并且additionalData选项用于将SCSS变量导入到每个<style>标签中。在组件的<style>标签中，可以直接使用这些全局变量。

- 阅读更多 -