标签 css 下的文章

2024-08-19




/* 引入Animate.css库 */
@import url("https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css");
 
/* 使用Animate.css中的动画类 */
.my-element {
    display: inline-block;
    /* 应用bounce动画，持续时间为1.5秒 */
    animation: bounce 1.5s infinite;
}
 
/* 如果需要覆盖某个动画的某个特定帧，可以使用keyframes */
@keyframes myCustomAnimation {
    0% {
        /* 动画开始时的状态 */
        opacity: 0;
        transform: translateX(-100px);
    }
    50% {
        /* 动画中间时刻的状态 */
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        /* 动画结束时的状态 */
        opacity: 0;
        transform: translateX(100px);
    }
}
 
/* 应用自定义动画 */
.my-custom-element {
    animation: myCustomAnimation 3s infinite;
}

这个示例展示了如何在CSS中引入Animate.css库，并且如何在自己的CSS样式中使用库中预定义的动画效果。同时，演示了如何创建自定义的关键帧动画并将其应用到元素上。这有助于开发者快速为他们的网站或应用添加生动的动画效果。

- 阅读更多 -

CSS新手入门笔记整理：CSS3背景样式

System

2024-08-19

所有,css3




/* 设置背景图片，并设置其大小，位置和是否重复 */
.background-image {
  background-image: url('image.jpg');
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}
 
/* 使用多个背景图片 */
.multiple-backgrounds {
  background-image: url('first-image.jpg'), url('second-image.jpg');
  background-position: left, right;
  background-repeat: no-repeat, no-repeat;
}
 
/* 设置背景图片的透明度 */
.background-opacity {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5; /* 整个容器的透明度为50%，包括背景图片 */
}
 
/* 使用渐变背景 */
.gradient-background {
  background: linear-gradient(to right, red, yellow);
}

这个代码示例展示了如何在CSS中设置背景图片、多个背景图片、背景图片透明度以及如何使用渐变背景。这些是CSS背景样式的基本应用，对于初学者来说具有很好的教育价值。

- 阅读更多 -

CSS - 扫盲

System

2024-08-19

所有,css3

"CSS - 扫盲" 这个表述不清楚，我猜你可能是在询问如何使用CSS来增强网站对于视觉障碍者的访问。

一种常见的方法是使用CSS来提高图片和颜色对比度，以便视力障碍者（例如那些由于视力问题而需要使用屏幕阅读器的人）能更容易地理解网页内容。

以下是一些CSS技巧，用于改善网站的无障碍性：

高对比度的文本背景：




.contrast-text {
    color: #000; /* 黑色文字 */
    background-color: #fff; /* 白色背景 */
}

增加链接和按钮的可见性：




.increase-visibility {
    color: #000; /* 黑色文本 */
    background-color: #fff; /* 白色背景 */
    border: 1px solid #000; /* 黑色边框 */
}

为图片添加ALT标签和描述性的title属性：




<img src="image.jpg" alt="描述性文本" title="详细描述文本">

使用屏幕阅读器友好的结构：




<h1>标题</h1>
<nav>
    <ul>
        <li><a href="#">链接</a></li>
        ...
    </ul>
</nav>
<main>
    <article>
        <header>
            <h2>文章标题</h2>
        </header>
        <section>
            <h3>段落标题</h3>
            <p>段落内容...</p>
        </section>
    </article>
</main>

使用CSS过渡和动画增加无障碍性：




.animate-this {
    transition: background-color 0.5s ease;
}

以上只是无障碍性网站设计的一部分，实际上还有很多其他的最佳实践和方法。在设计网站时，应当考虑到所有用户，包括那些有视觉障碍的用户。

System

2024-08-19

所有,css3

CSS的transition属性可以用来定义元素的过渡效果，使得当元素的CSS属性改变时，这个改变可以用一个平滑的动画效果进行。

基本语法如下：




transition: property duration timing-function delay;

property：定义过渡效果的CSS属性名，比如width、background-color、opacity等。如果想要所有属性都有过渡效果，可以使用all关键字。
duration：定义过渡效果的持续时间，单位通常是秒(s)或毫秒(ms)。
timing-function：定义过渡的时序函数，比如linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier。
delay：定义过渡效果开始前的延迟时间。

例子：




div {
  transition: background-color 1s ease-in-out 0.5s;
}
 
div:hover {
  background-color: yellow;
}

在这个例子中，当鼠标悬停在div上时，背景色会在0.5秒后以ease-in-out时序函数在1秒内渐变到黄色。

- 阅读更多 -

CSS3实现实时时间数字滚动

System

2024-08-19

所有,css3

以下是一个简单的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 是鼠标悬停时分页的变换样式。

- 阅读更多 -