主页 / 问题

问题[css]

Martin Hope
vanzo16
Asked: 2025-03-16 01:43:00 +0800 CST
  • 7

大家好。如何沿着立方体的边缘变换图像？以便它们能够顺利地从一个边缘流到另一个边缘？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Perspective</title>
  <style>
    body {
      margin: 0 auto;
    }

    .cube-container {
      height: 200px;
      top: 50%;
      left: 50%;
      margin-left: -100px;
      margin-top: -100px;
      perspective: 600px;
      perspective-origin: 50% 50%;
      position: absolute;
      width: 200px;
    }

    .cube {
      height: 100%;
      position: absolute;
      transform: translateZ(100px);
      transform-style: preserve-3d;
      width: 100%;
      animation: spin 5s linear infinite;
    }

    .side {
      background: transparent;
      border: 3px solid grey;
      height: 196px;
      position: absolute;
      width: 196px;
      overflow: hidden;

    }

    .front {
      transform: translateZ(100px);
    }

    .back {
      transform: rotateX(180deg) translateZ(100px);
    }

    .back .img-inner {
      width: 100%;
      height: 100%;
      background-image: url(https://cdn.sportmaster.ru/upload/content/mediahab/prod/0c868511-3fc5-4da6-9092-56235985e840.jpg);
      background-position: top;
      background-size: 33%;
      background-repeat: no-repeat;
    }

    .left {
      transform: rotateY(-90deg) translateZ(100px);
    }

    .right {
      transform: rotateY(90deg) translateZ(100px);
    }

    .top {
      transform: rotateX(90deg) translateZ(100px);
    }

    .bottom {
      transform: rotateX(-90deg) translateZ(100px);
    }

    .img-inner {
      animation: marquee-vertical 5s linear infinite;
    }

    @keyframes marquee-vertical {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-100%);

      }

    }
  </style>
</head>

<body>
  <div class="cube-container">
    <div class="cube">
      <figure class="side front"></figure>
      <figure class="side back">
        <div class="img-inner"></div>
        <div class="img-inner"></div>
        <div class="img-inner"></div>
      </figure>
      <figure class="side left"></figure>
      <figure class="side right"></figure>
      <figure class="side top"></figure>
      <figure class="side bottom"></figure>
    </div>
  </div>
</body>

</html>

css
Martin Hope
Никита
Asked: 2025-02-18 16:23:07 +0800 CST
  • 4

在我的样式表文件夹中有一个main.scss文件，所有样式都通过@use导入到其中！

@charset "UTF-8";

// 1. Vendors
@use 'vendors/reset';

// 2. Base stuff
@use 'base/base';
@use 'base/fonts';

// 3. Layout-related sections
@use 'layout/header';
@use 'layout/footer';

// 4. Components

// 5. Pages
@use 'pages/home';

// 6. Themes

并且它们被编译到css文件夹中的main.css文件中，但是我不明白为什么在编译过程中，程序拒绝了当前包含带有颜色的变量的_base.scss文件。

// COLORS
$black: #121214;
$white: #FFFFFF;
$light_gray: #8C8F96;
$dark_gray: #303030;
$blue: #49D0FF;

并给出编译错误

Compilation Error
Error: Undefined variable.
   ╷
10 │     background: $black;
   │                 ^^^^^^

通过我在 _header.scss 文件中指定的变量

.header {
  display: flex;
  height: clamp(80px, 10vw + 60px, 100px);
  background: $black;
}

尝试过：

  • 在 _header.scss 文件本身中，也写入@use '../base/base';
  • 在main.scss文件中，注册@use 'base/base' as b;并引用_header.scss来background: b.$black;..此时一般说的是没有名为“b”的模块。
  • @use 'base/base' as *;也没什么帮助。
  • 我发现了一个有类似问题的问题，问题出在旧的 Live Sass 编译器上，我检查了一下，我已经安装了新的。

只有当您将其写入 _header.scss 文件中时它才有效@import '../base/base';，但那时您不需要 main.scss...

请帮帮我，告诉我我做错了什么......

我附加了一个包含该应用程序完整结构的链接：https://codesandbox.io/p/github/KitVitalevich/XWEAR/main? file=%2Fstylesheets%2Fmain.scss%3A11% 2C22！

css
Martin Hope
Dream
Asked: 2025-02-14 22:40:00 +0800 CST
  • 7

请告诉我如何制作一个左上角带有箭头的矩形？我尝试::before用半圆形，但无法实现这种形状。

.BigField {
  position: relative;
  left: 0;
  top: 74px;
  height: 50px;
  width: 624px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.SmallField {
  position: relative;
}

.SmallField form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.textarea-wrapper {
  position: relative;
}


.textarea-wrapper::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 10px solid transparent;
  border-right-color: rgb(255, 0, 0);
  border-radius: 50%;
  left: 20px;
  top: 3px;
}


.SmallField textarea {
  position: absolute;
  height: 28px;
  width: 572px;
  top: 8px;
  right: 8px;
  resize: none;
  border-radius: 14px;
  outline: none;
  border: none;
  color: white;
  background-color: rgba(0, 0, 0);
  padding: 0 11px;
  line-height: 28px;
  cursor: text;
  caret-color: white;
  box-sizing: border-box;
}

.SmallField textarea::placeholder {
  color: white;
}
<div class="BigField">
  <div class="SmallField">
    <form>
      <div class="textarea-wrapper">
        <textarea placeholder="Текст"></textarea>
      </div>
    </form>
  </div>
</div>

在此处输入图片描述

css
Martin Hope
Qwertiy
Asked: 2025-02-12 06:09:22 +0800 CST
  • 10

当您将鼠标悬停在元素 B 上时，元素 C 会出现。当鼠标不在 B 或 C 上时，它会消失。如何让 C 在鼠标位于 A 上时继续显示，但如果鼠标仅在 A 上，而之前未在 B 上，则 C 本身不会出现？

main {
  display: inline-flex;
  position: relative;
  font-size: 3em;
  outline: 1px dotted red;
}

div {
  padding: 1em;
}

.b {
  background: antiquewhite;
}

.c {
  visibility: hidden;
  position: absolute;
  left: 100%;
  background: linear-gradient(to right, silver, gray);
}

.b:hover + .c, .c:hover {
  visibility: visible;
}
<main>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</main>

css
Martin Hope
Max
Asked: 2025-02-03 00:50:12 +0800 CST
  • 5

.column:last-child不起作用，因为此类元素之前有另一个类的元素：

<div class="wrapper">
    <div class="row"></div>
    <div class="column"></div>
    <div class="column"></div> <!-- margin-bottom: 0; -->
</div>

如何使用CSS实现？

css