1. 首页
  2. 标签
  3. css
Css如何优雅的实现抽奖转盘
System
2024-08-16
所有,css3

CSS可以用来制作一个简单的抽奖转盘，但是真正的转动效果需要使用JavaScript。以下是一个使用纯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>
  .wheel-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 50px auto;
    perspective: 1000px;
  }
 
  .wheel {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: translateY(-50%) rotateX(90deg) rotateZ(0deg);
    animation: spin 8s linear infinite;
  }
 
  .slice {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
 
  .slice-1 {
    transform: translateY(-50%) rotateX(90deg) translateZ(150px);
  }
 
  .slice-2 {
    transform: translateY(-50%) rotateX(90deg) translateZ(175px);
  }
 
  /* 其他切片省略 */
 
  @keyframes spin {
    from { transform: translateY(-50%) rotateX(90deg) rotateZ(0deg); }
    to { transform: translateY(-50%) rotateX(90deg) rotateZ(360deg); }
  }
</style>
</head>
<body>
<div class="wheel-container">
  <div class="wheel">
    <div class="slice slice-1"></div>
    <div class="slice slice-2"></div>
    <!-- 其他切片省略 -->
  </div>
</div>
</body>
</html>

这个例子中，.wheel-container 是转盘的容器，.wheel 是一个3D元素，它包含.slice的多个实例，每个实例代表转盘的一部分。CSS动画@keyframes spin定义了转盘的旋转动画。

请注意，这个转盘是静态的，并不会真的转动。如果需要转动效果，你需要使用JavaScript来处理用户的交互，改变转盘的旋转角度。

- 阅读更多 -
uni-app按钮涟漪效果+动态渐变边框 css
System
2024-08-16
所有,css3

在uni-app中实现按钮的涟漪效果和动态渐变边框，可以通过CSS样式来完成。以下是实现这种效果的示例代码：




<template>
  <view class="container">
    <button class="ripple-effect-button">点击我</button>
  </view>
</template>
 
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
 
  .ripple-effect-button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    outline: none;
    position: relative;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    overflow: hidden;
    transition: 0.3s;
  }
 
  .ripple-effect-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transition: 0.3s;
  }
 
  .ripple-effect-button:active:after {
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    opacity: 1;
  }
 
  /* 动态渐变边框 */
  .ripple-effect-button {
    border: 2px solid transparent;
    transition: 0.5s;
  }
 
  .ripple-effect-button:hover {
    border-color: #ffffff;
    border-radius: 50px;
  }
</style>

这段代码中，.ripple-effect-button 类定义了按钮的基本样式，并通过伪元素 ::after 实现了点击时的涟漪效果。当按钮被激活（点击）时，伪元素的大小和透明度会发生变化，从而产生涟漪效果。

同时，CSS 还通过伪类 :hover 实现了按钮在鼠标悬停时的动态渐变边框效果。按钮在悬停时，边框的颜色会从透明过渡到白色，并且按钮的边框圆角也会发生变化，增加了交互的视觉反馈。

- 阅读更多 -
前端css3实现轮播图
System
2024-08-16
所有,css3

以下是一个使用CSS3实现简单轮播图的示例代码：

HTML:




<div class="slider">
  <div class="slides">
    <div class="slide" style="background: url('image1.jpg') no-repeat center center; background-size: cover;"></div>
    <div class="slide" style="background: url('image2.jpg') no-repeat center center; background-size: cover;"></div>
    <div class="slide" style="background: url('image3.jpg') no-repeat center center; background-size: cover;"></div>
  </div>
  <div class="navigation">
    <span class="nav-button active" data-index="0"></span>
    <span class="nav-button" data-index="1"></span>
    <span class="nav-button" data-index="2"></span>
  </div>
</div>

CSS:




.slider {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 300px;
}
 
.slides {
  width: 300%;
  height: 100%;
  display: flex;
  animation: slide 9s infinite;
}
 
.slide {
  width: 100%;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
 
.navigation {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
 
.nav-button {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  background-color: #333;
  opacity: 0.4;
  transition: opacity 0.3s;
}
 
.nav-button.active {
  opacity: 1;
}
 
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  11.1%, 33.3% {
    transform: translateX(0);
  }
  44.4%, 66.6% {
    transform: translateX(-100%);
  }
  77.7%, 100% {
    transform: translateX(-200%);
  }
}

JavaScript (用于导航按钮和轮播逻辑):




document.querySelectorAll('.nav-button').forEach((button, index) => {
  button.addEventListener('click', function() {
    const activeIndex = document.querySelector('.nav-button.active').dataset.index;
    const diff = index - activeIndex;
 
    const slides = document.querySelector('.slides');
    const currentTranslateX = Number(window.getComputedStyle(slides).transform.split('(')[1].split('px')[0]);
    const newTranslateX = currentTranslateX - diff * 100;
 
    slides.style.transform = `translateX(${newTranslateX}%)`;
 
    document.querySelectorAll('.nav-button').forEach(button => button.classList.remove('active'));
    this.classList.add('active');
  });
});

这个示例使用了flex布局来简化轮播图的创建，并使用CSS动画@keyframes slide来控制图片的切换。JavaScript代码用于处理点击导航按钮时的逻辑，包括更新导航按钮的状态和更改轮播图的位置。这个简单的实现没有包括任

- 阅读更多 -
CSS3新增的视口单位Vh、Vw单位
System
2024-08-16
所有,css3

视口单位vh、vw、vmin和vmax使得我们能够创建响应式布局，它们分别代表了浏览器窗口的高度、宽度，以及最小和最大值。

  1. vh（Viewport Height）：1vh等于视口高度的1%。
  2. vw（Viewport Width）：1vw等于视口宽度的1%。
  3. vmin（Viewport Min）：选取vh和vw中较小的值。
  4. vmax（Viewport Max）：选取vh和vw中较大的值。

例如，如果你设置一个元素的高度为10vh，那么不论浏览器窗口的实际高度是多少，这个元素的高度将始终是窗口高度的10%。




/* 设置元素高度为视口高度的10% */
div {
  height: 10vh;
}
 
/* 设置元素宽度为视口宽度的10% */
div {
  width: 10vw;
}
 
/* 设置元素高度和宽度都是视口较小维度的50% */
div {
  height: 50vmin;
  width: 50vmin;
}
 
/* 设置元素高度和宽度都是视口较大维度的80% */
div {
  height: 80vmax;
  width: 80vmax;
}

使用视口单位可以创建布局，这些布局会根据用户调整浏览器窗口大小而自动适应。这在响应式设计中非常有用，可以提高用户体验。

- 阅读更多 -
总结css的知识点和css3的新特性
System
2024-08-16
所有,css3

CSS（级联样式表）是一种用来描述网页和用户界面样式的语言，主要用于设计网页的表现层。CSS3是CSS的一个版本，引入了许多新特性，如阴影、渐变、变换、动画等，以及选择器的增强和布局模块的增加。

CSS3的一些新特性：

  1. 选择器（Selector）：提供了更多选择器，如属性选择器、结构伪类选择器等。
  2. 阴影和图像效果（Shadow and Image Effects）：提供了box-shadow、text-shadow等属性，用于创建阴影和模糊效果。
  3. 边框和背景（Border and Background）：提供了圆角边框（border-radius）、渐变背景（gradient）等。
  4. 文字效果（Text Effects）：提供了文字阴影（text-shadow）、字体加载（@font-face）等。
  5. 2D/3D转换（Transform）：提供了transform属性，可以进行2D或3D转换。
  6. 动画（Animation）：提供了关键帧（@keyframes）和动画（animation）属性，可以创建复杂的动画效果。
  7. 多列布局（Multi-column Layout）：提供了多列布局的支持。
  8. 用户界面（User Interface）：提供了更多的UI特效，如滚动条样式（scrollbar）。

CSS3的新特性可以用来创建更加丰富和动态的网页设计。

示例代码：




/* 圆角边框 */
div {
  border-radius: 10px;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* 阴影效果 */
div {
  box-shadow: 5px 5px 10px #888888;
}
 
/* 键帧动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}
 
/* 多列布局 */
div {
  column-count: 3;
}
 
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

以上代码展示了CSS3的几个常用特性：圆角边框、渐变背景、盒子阴影、关键帧动画、多列布局和自定义滚动条样式。这些都是CSS3提供的强大工具，可以用来增强网页的视觉效果。

- 阅读更多 -
css3把radio样式修改成checkbox样式
System
2024-08-16
所有,css3

要使用CSS3将radio按钮的默认样式修改为checkbox的样式，并允许用户选择多个选项，您可以通过隐藏原生的radio按钮，并使用label标签的:before伪元素来创建自定义的checkbox样式。以下是实现这一效果的示例代码：

HTML:




<input type="radio" id="option1" name="options" value="1">
<label for="option1">Option 1</label>
 
<input type="radio" id="option2" name="options" value="2">
<label for="option2">Option 2</label>
 
<input type="radio" id="option3" name="options" value="3">
<label for="option3">Option 3</label>

CSS:




input[type="radio"] {
  display: none;
}
 
label {
  position: relative;
  cursor: pointer;
  margin-right: 15px;
}
 
label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #000;
  background-color: transparent;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
 
input[type="radio"]:checked + label:before {
  content: "✔";
  text-align: center;
  line-height: 15px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
}

在这个例子中，每个radio按钮被隐藏，并且与它的label关联。label的:before伪元素创建了一个自定义的checkbox样式。当radio按钮被选中时，:before伪元素会改变其内容，显示一个选中的标记，从而允许用户选择多个选项。

- 阅读更多 -
html css简单实现九宫格布局，自适应屏幕
System
2024-08-16
所有,css3

HTML 和 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>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三列布局 */
    grid-gap: 10px; /* 格子间隔 */
    padding: 10px; /* 容器内边距 */
  }
  .grid-item {
    background-color: #f0f0f0; /* 格子背景色 */
    border: 1px solid #ccc; /* 格子边框 */
    text-align: center; /* 文字居中 */
    padding: 20px 0; /* 格子内边距 */
  }
</style>
</head>
<body>
 
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
 
</body>
</html>

这段代码使用了CSS Grid布局来创建一个九宫格布局，其中.grid-container定义了一个三列的网格布局，.grid-item则表示每个网格的样式。这个布局能够适应不同的屏幕大小，网格项会自动填充可用空间。

- 阅读更多 -
js 关于如何动态设置css的hover样式最佳方式，设置hover样式
System
2024-08-16
所有,css3

在JavaScript中，你可以通过操作CSS类来动态设置元素的hover样式。首先，定义一个CSS类，其中包含hover状态的样式。然后，使用JavaScript来添加或移除这个类。

CSS:




.custom-hover:hover {
  background-color: yellow;
}

JavaScript:




// 假设你要为一个按钮添加hover效果
var button = document.getElementById('myButton');
 
// 添加hover类
button.classList.add('custom-hover');
 
// 移除hover类
// button.classList.remove('custom-hover');

HTML:




<button id="myButton">Hover over me!</button>

这样，当按钮处于hover状态时，会应用.custom-hover:hover定义的样式。如果你想动态地控制这个hover效果，你可以在JavaScript中根据条件添加或移除.custom-hover类。

- 阅读更多 -
CSS3进阶技巧：Flexbox布局实战与高级应用
System
2024-08-16
所有,css3



/* 设置一个容器使用Flexbox布局 */
.container {
  display: flex;
  flex-direction: row; /* 默认值，可以省略 */
  justify-content: space-around; /* 水平方向均匀分布子元素 */
  align-items: center; /* 垂直方向居中对齐子元素 */
  height: 100vh; /* 高度设置为视口高度 */
}
 
/* 子元素样式 */
.child {
  flex: 1; /* 子元素可伸缩，默认平分空间 */
  text-align: center; /* 文字居中对齐 */
  border: 1px solid #000; /* 边框，便于观察布局效果 */
  padding: 20px; /* 内边距 */
}
 
/* 特定子元素的样式 */
.child:nth-child(2) {
  order: 1; /* 调整子元素的排列顺序 */
  flex-grow: 2; /* 增长比例为其他子元素的两倍 */
}

这段代码展示了如何使用Flexbox布局来创建一个简单的布局，其中包含了Flexbox布局的基本和高级属性。通过.container类定义了一个Flexbox容器，并通过.child类定义了子元素的共有样式。通过:nth-child伪类选择器可以针对特定的子元素设置不同的样式，展示了如何调整元素的排列顺序和伸缩性。

- 阅读更多 -
详细介绍less（css预处理语言）
System
2024-08-16
所有,css3

LESS 是一种动态样式语言，它扩展了CSS的功能，添加了变量、函数、混合等特性，使CSS更易于维护和扩展。LESS 可以运行在 Node 或者浏览器端。

特性

  1. 变量：可以在 LESS 中使用变量(variables)，在一个地方定义，然后在整个样式表中使用。



@color: #4D926F;
header {
  color: @color;
}
nav {
  color: @color;
}
  1. 混合(Mixins)：可以定义一些class 作为可重用的样式块，然后在其他class中使用。



.rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
 
#header {
  .rounded-corners;
}
 
.button {
  .rounded-corners;
}
  1. 函数：LESS 提供了一些内置的函数，如 lighten(), darken(), and fade() 等。



@base: #f04646;
@width: 100px;
@height: 200px;
 
.box {
  background-color: @base;
  width: @width + 10;
  height: @height + 10;
}
  1. 嵌套规则：LESS 允许你写嵌套的 CSS 规则，可以使你的 CSS 更加的组织，和清晰。



#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a {
      text-decoration: none;
      &:hover {
        border-width: 1px;
      }
    }
  }
}
  1. 导入：可以导入其他的 LESS 文件。



// 导入其他less文件
@import "variables.less";
@import "mixins.less";

编译

LESS 文件在浏览器中直接使用时，需要将其转换为CSS。这个过程通常是手动完成的，但也可以使用工具自动完成。

在 Node.js 环境中，可以使用 npm 安装 less 包，并使用命令行工具将 LESS 文件编译为 CSS。




npm install -g less
lessc styles.less styles.css

在浏览器端，你可以使用 <link> 标签引入一个 .less 文件，但需要确保服务器能够正确处理 .less 文件，通常需要一个能够将 .less 文件转换为 .css 的服务器端程序。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号