主页 / 问题

问题[html]

Martin Hope
Alexandr_TT
Asked: 2025-01-28 22:41:54 +0800 CST
  • 8

尝试弄清楚 CSS 和 SVG 动画如何交互。为此，我采用了最简单的场景：

  1. 角色从右向左移动，同时上下移动（svg）
  2. 旋转 180 度 (css) 并
  3. 向后移动至左右 (css)

以下是代码：

body { perspective: 1000px;}

  .container{
  width:80vw;
  height:80vh;
}  
#SnowMaiden {
transform-box:fill-box;
transform-origin: center center;
animation: Maiden_rotate 2s linear 8s  forwards, Maiden_translate 14s linear 16s forwards;
}
@keyframes Maiden_rotate {
0%{ transform:  rotate3d(0,1,0,20deg);}
50%{ transform:  rotate3d(0,1,0,80deg);}
100%{ transform:  rotate3d(0,1,0,180deg);}
}
@keyframes Maiden_translate {
0%{ transform:  translate3d(300px,10px,10px);}
50%{ transform:  translate3d(800px,10px,10px);}
100%{ transform:  translate3d(1400px,10px,10px);}
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" > 

       <!-- Фон с ёлочкой -->
    <image id="img1" xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="100%" height="100%" opacity="1"   />  
    
    <image  id="SnowMaiden" x="1400" y="650"  xlink:href="https://isstatic.askoverflow.dev/LU3Bvfdr.png" opacity="0">
                  <!-- Анимация появления девочки с корзинкой -->
   <animate id="op1_Maidan" attributeName="opacity"   values="0; 1" dur="2s" begin="svg1.click"  repeatCount="1" fill="freeze" restart="whenNotActive" />   
                            <!-- Перемещение  по горизонтали -->
  <animate id="Go_Maidan" attributeName="x"   values="1400;1300;1200;1100;1000;900;800;700;600;500;400;300" dur="5s" begin="op1_Maidan.end"  repeatCount="indefinity" fill="freeze"  restart="whenNotActive"  />   
                         <!-- Перемещение по вертикали -->    
   <animate id="Go_Maidan_y" attributeName="y"   values="650;670;650;630;650;670;650;630;650;670;650;630" dur="5s" begin="op1_Maidan.end"  repeatCount="indefinity" fill="freeze"   restart="whenNotActive"  />  
</image>  
</svg>

从代码片段的结果可以看出：
180 度旋转之前的 SVG 动画阶段一切正常。故障在转弯后开始。看起来 CSS 动画与之前的 SVG 动画冲突，这就是 CSS 运动结果不可见的原因。
当然，您可以纯粹用 SVG 或仅使用 CSS 来实现动画。
我有一个问题，如何让 SVG 和 CSS 动画正确协同工作？

html
Martin Hope
Ilyas17
Asked: 2025-01-19 17:11:44 +0800 CST
  • 5

我想制作一个滑块来显示我的项目。我通过一系列对象来做到这一点。但由于某种原因，幻灯片彼此相邻，当我切换幻灯片时，它们都会向左移动。

在此输入图像描述

这是滑块代码：

return (
    <>
      <Swiper
        modules={[Navigation, Keyboard, Mousewheel]}
        spaceBetween={50}
        slidesPerView={1}
        keyboard
        mousewheel
        navigation
      >
        {projects.map((item) => {
          return (
            <SwiperSlide className="projects-item" key={item.id}>
              <img src={item.img} alt={item.name} className="project-image" />
              <div className="projects-item-name">{item.name}</div>
              <div className="projects-item-desc">{item.desc}</div>
              <a href={item.githubLink}>
                <img src={githubImg} alt="githubLink" />
              </a>
            </SwiperSlide>
          );
        })}
      </Swiper>
    </>
  );
html
Martin Hope
Egor
Asked: 2025-01-17 21:23:48 +0800 CST
  • 5

我的模板：

  <div class="task">
    <div id="cont-1">
      <div class="task__path">
        <p>распарсить путь / /</p>
      </div>
      <app-task-title/>
    </div>
    <div id="cont-2">
      <div class="task__progress">
        <app-progress-bar/>
        <app-executor-time/>
      </div>
      <app-management/>
    </div>
  </div>
</div>

我的 CSS 样式：

@import "../../../../../styles/index.scss";

$display: flex;

.task-wrapper {
  width: 100%;
  height: 130px;
  padding: 12px;
  border-radius: 8px;
  background-color: $bg-menu;
  box-shadow: $shadow-card;
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 3px 10px 0 rgba(38, 58, 91, 0.2);
  }

  .task {
    gap: 20px;

    #cont-1 {
      &:hover {
        .task__path {
          display: flex;
        }
      }
    }

    #cont-2 {
      &:hover {
        .task__progress {
          display: none;
        }
        app-management {
          display: flex;
        }
      }
    }

    &__progress {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 12px;
      height: 33px;
    }

    &__path {
      display: none;
    }

    app-management {
      display: none;
    }
  }
}

当我将鼠标悬停在 cont-1 上时，我需要在 task__progress 上使用 display: none ，在 cont-2 中我实现了类似的逻辑，但在 cont-1 中它不起作用，正如我所想的那样，因为元素位于不同的位置当我将鼠标悬停在 cont-1 上时，我需要做什么才能隐藏 task__progress？隐藏 cont-2 也是一个正确的选择

html
Martin Hope
Паскаль Ионеско
Asked: 2025-01-14 20:28:23 +0800 CST
  • 9

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: black;
  position: relative;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  transition: transform 0.5s ease;
  mix-blend-mode: screen;
  /* Эффект слияния */
}

.circle+.circle {
  animation: 3s anim alternate infinite;
}

@keyframes anim {
  0% {
    transform: translateX(100px);
  }

  100% {
    transform: translateX(-100px);
  }
}

#main {
  position: relative;
}

#main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4));
  pointer-events: none;
}
<main id="main">
  <div class="circle" id="a"></div>
  <div class="circle" id="b"></div>
</main>

这就是我想要得到的效果

在此输入图像描述

html
Martin Hope
Рома Можаренко
Asked: 2025-01-10 01:32:58 +0800 CST
  • 5

在此输入图像描述大家好，我需要布局包含产品及其图像的部分。该部分必须包含位于标题下方的图像（它是半透明的）我尝试使用绝对定位来弥补它，但显然我的知识还不够:(

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
    font-weight: 500;
    font-weight: normal;
    font-display: swap;
}

/**
  Нормализация блочной модели
 */
*,
::before,
::after {
    box-sizing: border-box;
}

/**
    Убираем внутренние отступы слева тегам списков,
    у которых есть атрибут class
   */
:where(ul, ol):where([class]) {
    padding-left: 0;
}

/**
    Убираем внешние отступы body и двум другим тегам,
    у которых есть атрибут class
   */
body,
:where(blockquote, figure):where([class]) {
    margin: 0;
}

/**
    Убираем внешние отступы вертикали нужным тегам,
    у которых есть атрибут class
   */
:where(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    dl):where([class]) {
    margin-block: 0;
}

:where(dd[class]) {
    margin-left: 0;
}

:where(fieldset[class]) {
    margin-left: 0;
    padding: 0;
    border: none;
}

/**
    Убираем стандартный маркер маркированному списку,
    у которого есть атрибут class
   */
:where(ul[class]) {
    list-style: none;
}

:where(address[class]) {
    font-style: normal;
}

/**
    Обнуляем вертикальные внешние отступы параграфа,
    объявляем локальную переменную для внешнего отступа вниз,
    чтобы избежать взаимодействие с более сложным селектором
   */
p {
    --paragraphMarginBottom: 24px;

    margin-block: 0;
}

/**
    Внешний отступ вниз для параграфа без атрибута class,
    который расположен не последним среди своих соседних элементов
   */
p:where(:not([class]):not(:last-child)) {
    margin-bottom: var(--paragraphMarginBottom);
}


/**
    Упрощаем работу с изображениями и видео
   */
img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/**
    Наследуем свойства шрифт для полей ввода
   */
input,
textarea,
select,
button {
    font: inherit;
}

html {
    /**
      Пригодится в большинстве ситуаций
      (когда, например, нужно будет "прижать" футер к низу сайта)
     */
    height: 100%;
    /**
      Убираем скачок интерфейса по горизонтали
      при появлении / исчезновении скроллбара
     */
    scrollbar-gutter: stable;
}

/**
    Плавный скролл
   */
html,
:has(:target) {
    scroll-behavior: smooth;
}

body {
    /**
      Пригодится в большинстве ситуаций
      (когда, например, нужно будет "прижать" футер к низу сайта)
     */
    /* min-height: 100%; */
    /**
      Унифицированный интерлиньяж
     */
    line-height: 1.5;
}

/**
    Нормализация высоты элемента ссылки при его инспектировании в DevTools
   */
a:where([class]) {
    display: inline-flex;
}

/**
    Курсор-рука при наведении на элемент
   */
button,
label {
    cursor: pointer;
}

/**
    Приводим к единому цвету svg-элементы
   */
[fill] {
    fill: currentColor
}

[stroke] {
    stroke: currentColor
}

/**
    Чиним баг задержки смены цвета при взаимодействии с svg-элементами
   */
svg * {
    transition-property: fill, stroke;
}

/**
    Приведение рамок таблиц в классический 'collapse' вид
   */
:where(table) {
    border-collapse: collapse;
    border-color: currentColor;
}

/**
    Удаляем все анимации и переходы для людей,
    которые предпочитают их не использовать
   */
@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*Создание цветовой палитры*/
:root {
    --dark-bg-color: #2B2835;
    --dark-header-opacity-color: #191720;
    --light-color: #ffffff;
    --yellow-color: #FFC700;
    --light-bg-color: #FBFCFF;
    --product-pink-color: #DD5656;
    --black-color: #000000;
    --price-color: #9D8220;
    --base-font-color: "Montserrat";
}

body {
    background-color: var(--dark-bg-color);
    font-family: var(--base-font-color);
    position: relative;
}

a {
    color: inherit;
    text-decoration: none;
}

.header {
    background-color: rgba(25, 23, 32, 0.5);
    color: var(--light-color);
}

.header-container {
    padding-inline: 4.948vw;
    padding-block: 14px;

}

.header-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 47px;
}

.header-logo {}

.header-nav-list {
    display: flex;
    column-gap: 5.729vw;
}

.header-nav-list-item {
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px;
    position: relative;
    display: flex;
    justify-content: center;
}

.header-nav-list-item::after {
    content: "";
    display: block;
    height: 2px;
    width: 0%;
    position: absolute;
    background-color: var(--light-color);
    bottom: 0;
    transition: width 0.2s;
}

.header-nav-list-item:hover::after,
.header-nav-list-item:focus::after {
    width: 100%;
    transition: width 0.2s;
}

.header-nav-actions-list {
    display: flex;
    column-gap: 47px;
}

.header-nav-actions-item {}

/*Стилизация первого блока*/
.main-container {}

.main-black-beats-sec {}

.main-product-image {
    position:absolute;
    top: 0;
    left: -15%;
    z-index: -100;
}

.main-black-info {
    display: inline-flex;
    justify-content: flex-end;
    
}

.main-black-info-name {}

.main-black-info-title {}

.main-black-pricing {}

.black-price {}

.black-buy-button {}

.main-black-subinfo {}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Beats Production</title>
</head>

<body>
    <header class="header">
        <div class="header-container">
            <nav class="header-navbar">
                <a href="#" class="header-logo-link"><img src="icons/Logo.svg" alt="Beats-Logo" class="header-logo"></a>
                <ul class="header-nav-list">
                    <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Headphones</a></li>
                    <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Earphones</a></li>
                    <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Speakers</a></li>
                    <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Explore</a></li>
                </ul>
                <ul class="header-nav-actions-list">
                    <li class="header-nav-actions-item">
                        <a class="header-nav-actions-link" href="#">
                            <svg width="24.996" height="24.997" viewBox="0 0 24.996 24.997" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path id="Fill 1"
                                    d="M9.99016 16.661C13.6445 16.6623 16.6604 13.6854 16.6653 10.0722C16.6703 6.33627 13.7128 3.33007 10.0303 3.32766C6.32636 3.32525 3.3334 6.30044 3.33192 9.98618C3.33053 13.6685 6.31433 16.6597 9.99016 16.661M15.7954 18.1439C11.1628 21.3754 5.27368 20.1388 2.15923 16.1977C-0.962804 12.2468 -0.67336 6.65794 2.8596 2.99498C6.30044 -0.572524 11.9509 -1.00539 15.9729 1.97877C20.1506 5.0785 21.422 11.186 18.1575 15.791C18.2132 15.8494 18.2697 15.911 18.3288 15.9701C20.3799 18.0216 22.433 20.0712 24.4818 22.1251C25.3965 23.042 25.0389 24.546 23.8161 24.917C23.1569 25.117 22.5861 24.9365 22.1033 24.4534C20.5053 22.8544 18.9063 21.2563 17.3078 19.6578C16.8064 19.1562 16.3053 18.6542 15.7954 18.1439"
                                    fill="#FFFFFF" fill-rule="evenodd" transform="translate(-0 -0)" />
                            </svg>
                        </a>
                    </li>
                    <li class="header-nav-actions-item">
                        <a class="header-nav-actions-link" href="#">
                            <svg width="27" height="27" viewBox="0 0 27 27" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path id="Shape"
                                    d="M23.046 17.454C21.5756 15.9837 19.8254 14.8952 17.9159 14.2363C19.9611 12.8277 21.3047 10.4703 21.3047 7.80469C21.3047 3.50119 17.8035 0 13.5 0C9.19651 0 5.69531 3.50119 5.69531 7.80469C5.69531 10.4703 7.03893 12.8277 9.08413 14.2363C7.17462 14.8952 5.42447 15.9837 3.95408 17.454C1.40426 20.0039 0 23.394 0 27L2.10938 27C2.10938 20.7192 7.21918 15.6094 13.5 15.6094C19.7808 15.6094 24.8906 20.7192 24.8906 27L27 27C27 23.394 25.5957 20.0039 23.046 17.454ZM13.5 13.5C10.3596 13.5 7.80469 10.9451 7.80469 7.80469C7.80469 4.66425 10.3596 2.10938 13.5 2.10938C16.6404 2.10938 19.1953 4.66425 19.1953 7.80469C19.1953 10.9451 16.6404 13.5 13.5 13.5Z"
                                    fill="#FFFFFF" />
                            </svg>
                        </a>
                    </li>
                    <li class="header-nav-actions-item">
                        <a class="header-nav-actions-link" href="#">
                            <svg width="27" height="25" viewBox="0 0 27 25" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path id="Shape"
                                    d="M25.8906 4.55174L4.77996 4.55174L4.46616 1.02007C4.41483 0.442532 3.93571 0 3.36175 0L1.10884 0C0.496445 0 0 0.501529 0 1.1202C0 1.73887 0.496445 2.2404 1.10884 2.2404L2.348 2.2404C3.02519 9.86212 1.27501 -9.83721 3.62333 16.5944C3.71383 17.6289 4.26715 18.7515 5.22033 19.5143C3.50178 21.7314 5.07201 25 7.86751 25C10.1877 25 11.8242 22.6622 11.0286 20.448L17.0974 20.448C16.3027 22.6594 17.9357 25 20.2585 25C22.1121 25 23.6202 23.4765 23.6202 21.6038C23.6202 19.7312 22.1121 18.2077 20.2585 18.2077L7.875 18.2077C7.03271 18.2077 6.2987 17.6943 5.98189 16.9463L23.7027 15.8942C24.1865 15.8655 24.5958 15.5226 24.7134 15.0476L26.9664 5.94361C27.1411 5.23767 26.6121 4.55174 25.8906 4.55174ZM7.86751 22.7596C7.23673 22.7596 6.7235 22.2411 6.7235 21.6038C6.7235 20.9665 7.23673 20.448 7.86751 20.448C8.49833 20.448 9.01157 20.9665 9.01157 21.6038C9.01157 22.2411 8.49833 22.7596 7.86751 22.7596ZM20.2584 22.7596C19.6276 22.7596 19.1143 22.2411 19.1143 21.6038C19.1143 20.9665 19.6276 20.448 20.2584 20.448C20.8892 20.448 21.4025 20.9665 21.4025 21.6038C21.4025 22.2411 20.8892 22.7596 20.2584 22.7596ZM22.7594 13.7059L5.6834 14.7197L4.97902 6.79208L24.4705 6.79208L22.7594 13.7059Z"
                                    fill="#FFFFFF" />
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <main class="main">
        <div class="main-container">
            <section class="main-black-beats-section">
                <img class="main-product-image" src="images\Bitmap2.png" alt="bears-headphones">
                <div class="main-black-info">
                    <p class="main-black-info-name">Beats Studio3 Wireless</p>
                    <h1 class="main-black-info-title">Experience your
                        music like never before.</h1>
                    <div class="main-black-pricing">
                        <span class="black-price">
                            $299.95
                        </span>
                        <button type="button" class="black-buy-button">Buy Now</button>
                    </div>
                    <p class="main-black-subinfo">$60 Apple Music gift card with purchase of select Beats products.*</p>
                </div>
            </section>
        </div>
    </main>

</body>

</html>

html