主页 / user-538746

Elijah_Pris's questions

Martin Hope
Elijah_Pris
Asked: 2024-11-06 14:24:45 +0800 CST
  • 7

如何从径向元素中减去内部图形（或看起来像是被减去）？

现在是这样的

原来的

我希望它看起来像这样

我想

原始代码 https://codepen.io/oliver_merz/pen/zqXZQG

.cssplay-menu {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 20px auto 0;
  width: 100%;
  max-width: 568px;
  height: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.cssplay-menu>div {
  position: relative;
  margin-bottom: 250px;
  padding-bottom: 100%;
  max-width: 100%;
  height: 0;
}

.cssplay-menu * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cssplay-menu .holder {
  position: relative;
  padding-bottom: 100%;
  max-width: 100%;
  height: 0;
  overflow: hidden;
}

.cssplay-menu input {
  position: absolute;
  display: none;
}

.cssplay-menu .segment {
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  margin-left: -48%;
  margin-top: -48%;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(0);
  transition: 0.5s cubic-bezier(.58, 2.4, 0.5, 0.5);
  transition: 0.5s ease;
}

.cssplay-menu .curve-upper {
  position: absolute;
  left: 1%;
  top: 1%;
  width: 98%;
  height: 98%;
  background: #fff;
  border-radius: 50%;
  transform: scale(0);
  transition: 0s;
}

.cssplay-menu .curve-lower {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-140deg) scale(0);
  transition: 0s;
}

.cssplay-menu .curve {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: #8b0000;
  transform-origin: left top;
  transform: rotate(0deg) skewY(50deg);
}

.cssplay-menu .segment label {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  background: #008080;
  border: 1px solid #fff;
  cursor: pointer;
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0, 0, 1, 1);
  transition: 0.25s ease;
}

.cssplay-menu .segment label span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 15px;
  bottom: 25px;
  margin: auto;
  width: 35px;
  height: 35px;
  background-position: center center;
  background-repeat: no-repeat;
}

.cssplay-menu .segment label:nth-of-type(1) {
  transform: rotate(-140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(2) {
  transform: rotate(-100deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(3) {
  transform: rotate(-60deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(4) {
  transform: rotate(-20deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(5) {
  transform: rotate(20deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(6) {
  transform: rotate(60deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(7) {
  transform: rotate(100deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(8) {
  transform: rotate(140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(9) {
  transform: rotate(180deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(1) span {
  background: url(cubic/truck-white.png);
  transform: skewY(-50deg) rotate(0deg);
}

.cssplay-menu .segment label:nth-of-type(2) span {
  background: url(cubic/location-white.png);
  transform: skewY(-50deg) rotate(-40deg);
}

.cssplay-menu .segment label:nth-of-type(3) span {
  background: url(cubic/mail-white.png);
  transform: skewY(-50deg) rotate(-80deg);
}

.cssplay-menu .segment label:nth-of-type(4) span {
  background: url(cubic/pen-white.png);
  transform: skewY(-50deg) rotate(-120deg);
}

.cssplay-menu .segment label:nth-of-type(5) span {
  background: url(cubic/tag-white.png);
  transform: skewY(-50deg) rotate(-160deg);
}

.cssplay-menu .segment label:nth-of-type(6) span {
  background: url(cubic/wallet-white.png);
  transform: skewY(-50deg) rotate(-200deg);
}

.cssplay-menu .segment label:nth-of-type(7) span {
  background: url(cubic/video-white.png);
  transform: skewY(-50deg) rotate(-240deg);
}

.cssplay-menu .segment label:nth-of-type(8) span {
  background: url(cubic/cup-white.png);
  transform: skewY(-50deg) rotate(-280deg);
}

.cssplay-menu .segment label:nth-of-type(9) span {
  background: url(cubic/cup-white.png);
  transform: skewY(-50deg) rotate(-320deg);
}

.cssplay-menu .center {
  display: block;
  position: absolute;
  z-index: 200;
  left: 50%;
  top: 50%;
  margin-left: -20%;
  margin-top: -20%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: #8b0000 url(cubic/settings.png) no-repeat center center;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 2px #fff;
}

.cssplay-menu #toggle:checked+.holder .segment {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1);
}

.cssplay-menu #toggle:checked+.holder .center {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1.2);
}

.cssplay-menu #toggle:checked+.holder .curve-upper {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: scale(1);
}

.cssplay-menu #toggle:checked+.holder .curve-lower {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: rotate(-140deg) scale(1);
}

.cssplay-menu #c1:checked~.holder .segment label:nth-of-type(1),
.cssplay-menu #c2:checked~.holder .segment label:nth-of-type(2),
.cssplay-menu #c3:checked~.holder .segment label:nth-of-type(3),
.cssplay-menu #c4:checked~.holder .segment label:nth-of-type(4),
.cssplay-menu #c5:checked~.holder .segment label:nth-of-type(5),
.cssplay-menu #c6:checked~.holder .segment label:nth-of-type(6),
.cssplay-menu #c7:checked~.holder .segment label:nth-of-type(7),
.cssplay-menu #c8:checked~.holder .segment label:nth-of-type(8),
.cssplay-menu #c9:checked~.holder .segment label:nth-of-type(9) {
  background: #eb8c00;
}

.cssplay-menu #c1:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-140deg)
}

.cssplay-menu #c2:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-100deg)
}

.cssplay-menu #c3:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-60deg)
}

.cssplay-menu #c4:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-20deg)
}

.cssplay-menu #c5:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(20deg)
}

.cssplay-menu #c6:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(60deg)
}

.cssplay-menu #c7:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(100deg)
}

.cssplay-menu #c8:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(140deg)
}

.cssplay-menu #c9:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(180deg)
}

.cssplay-menu .sub {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -50%;
  width: 100%;
  height: 0;
  overflow: hidden;
}

.cssplay-menu .sub dl {
  position: absolute;
  top: -190px;
  left: 50%;
  margin-left: -25%;
  padding: 0;
  width: 50%;
  opacity: 0;
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: all 0.5s ease;
}

.cssplay-menu .sub dl dt {
  text-align: center;
  font: bold 16px/20px 'Lato', arial, sans-serif;
  color: #8b0000;
}

.cssplay-menu .sub dl dd {
  margin: 0;
  padding: 0;
  text-align: center;
  font: normal 15px/20px 'Lato', arial, sans-serif;
  color: #000;
}

.cssplay-menu .sub dl dd a {
  color: #004040;
}

.cssplay-menu #c1:checked~#toggle:checked~.sub dl:nth-of-type(1),
.cssplay-menu #c2:checked~#toggle:checked~.sub dl:nth-of-type(2),
.cssplay-menu #c3:checked~#toggle:checked~.sub dl:nth-of-type(3),
.cssplay-menu #c4:checked~#toggle:checked~.sub dl:nth-of-type(4),
.cssplay-menu #c5:checked~#toggle:checked~.sub dl:nth-of-type(5),
.cssplay-menu #c6:checked~#toggle:checked~.sub dl:nth-of-type(6),
.cssplay-menu #c7:checked~#toggle:checked~.sub dl:nth-of-type(7),
.cssplay-menu #c8:checked~#toggle:checked~.sub dl:nth-of-type(8),
.cssplay-menu #c9:checked~#toggle:checked~.sub dl:nth-of-type(9) {
  top: 20px;
  opacity: 1;
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5) 0.5s;
  transition: opacity 0.5s ease, top 0.5s ease 0.5s;
}

.cssplay-menu #c1:checked~#toggle:checked~.sub,
.cssplay-menu #c2:checked~#toggle:checked~.sub,
.cssplay-menu #c3:checked~#toggle:checked~.sub,
.cssplay-menu #c4:checked~#toggle:checked~.sub,
.cssplay-menu #c5:checked~#toggle:checked~.sub,
.cssplay-menu #c6:checked~#toggle:checked~.sub,
.cssplay-menu #c7:checked~#toggle:checked~.sub,
.cssplay-menu #c8:checked~#toggle:checked~.sub,
.cssplay-menu #c9:checked~#toggle:checked~.sub {
  height: 250px
}
<div class="cssplay-menu">
  <div>
    <input type="radio" id="c1" name="segment" checked="checked">
    <input type="radio" id="c2" name="segment">
    <input type="radio" id="c3" name="segment">
    <input type="radio" id="c4" name="segment">
    <input type="radio" id="c5" name="segment">
    <input type="radio" id="c6" name="segment">
    <input type="radio" id="c7" name="segment">
    <input type="radio" id="c8" name="segment">
    <input type="radio" id="c9" name="segment">
    <input type="checkbox" id="toggle" checked="checked">
    <div class="holder">
      <div class="segment">
        <label for="c1"><span></span></label>
        <label for="c2"><span></span></label>
        <label for="c3"><span></span></label>
        <label for="c4"><span></span></label>
        <label for="c5"><span></span></label>
        <label for="c6"><span></span></label>
        <label for="c7"><span></span></label>
        <label for="c8"><span></span></label>
        <label for="c9"><span></span></label>
      </div>
      <div class="curve-lower">
        <div class="curve"></div>
      </div>
      <div class="curve-upper"></div>
      <label for="toggle" class="center"></label>
    </div>
    <div class="sub">
      <dl>
        <dt>SUB MENU #1</dt>
        <dd><a href="#url">Item #1.1</a></dd>
        <dd><a href="#url">Item #1.2</a></dd>
        <dd><a href="#url">Item #1.3</a></dd>
        <dd><a href="#url">Item #1.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #2</dt>
        <dd><a href="#url">Item #2.1</a></dd>
        <dd><a href="#url">Item #2.2</a></dd>
        <dd><a href="#url">Item #2.3</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #3</dt>
        <dd><a href="#url">Item #3.1</a></dd>
        <dd><a href="#url">Item #3.2</a></dd>
        <dd><a href="#url">Item #3.3</a></dd>
        <dd><a href="#url">Item #3.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #4</dt>
        <dd><a href="#url">Item #4.1</a></dd>
        <dd><a href="#url">Item #4.2</a></dd>
        <dd><a href="#url">Item #4.3</a></dd>
        <dd><a href="#url">Item #4.4</a></dd>
        <dd><a href="#url">Item #4.5</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #5</dt>
        <dd><a href="#url">Item #5.1</a></dd>
        <dd><a href="#url">Item #5.2</a></dd>
        <dd><a href="#url">Item #5.3</a></dd>
        <dd><a href="#url">Item #5.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #6</dt>
        <dd><a href="#url">Item #6.1</a></dd>
        <dd><a href="#url">Item #6.2</a></dd>
        <dd><a href="#url">Item #6.3</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #7</dt>
        <dd><a href="#url">Item #7.1</a></dd>
        <dd><a href="#url">Item #7.2</a></dd>
        <dd><a href="#url">Item #7.3</a></dd>
        <dd><a href="#url">Item #7.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #8</dt>
        <dd><a href="#url">Item #8.1</a></dd>
        <dd><a href="#url">Item #8.2</a></dd>
        <dd><a href="#url">Item #8.3</a></dd>
        <dd><a href="#url">Item #8.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #9</dt>
        <dd><a href="#url">Item #9.1</a></dd>
        <dd><a href="#url">Item #9.2</a></dd>
        <dd><a href="#url">Item #9.3</a></dd>
        <dd><a href="#url">Item #9.4</a></dd>
      </dl>
    </div>
  </div>
</div>

html
Martin Hope
Elijah_Pris
Asked: 2024-01-24 19:21:42 +0800 CST
  • 5

我正在尝试从以下草图制作背景 https://openprocessing.org/sketch/1957947

将代码转换为以下形式：

import Sketch from 'react-p5'
import frag from './basic.frag'
import vert from './basic.vert'

function Background(){
  let myShader;

  const preload = (p5) => {
    myShader = p5.loadShader(vert, frag);
  };

  const setup = (p5) => {
    p5.createCanvas(p5.windowWidth, p5.windowHeight, p5.WEBGL);
    p5.pixelDensity(1);
    p5.background(100);

    p5.shader(myShader)
  };

  const draw = (p5) => {
    myShader.setUniform('u_resolution', [p5.width, p5.height]);
    myShader.setUniform('u_time', p5.millis() / 500);

    p5.rect(0, 0, p5.width, p5.height);
  };

  const windowResized = (p5) => {
    p5.resizeCanvas(window.innerWidth, window.innerHeight);
  }
  return <Sketch preload={preload} setup={setup} draw={draw} windowResized={windowResized} />
}
export default Background;

之后标准导入到我的 React 应用程序中：

import Background from "../Backgrounds/Background"

...
const Home = () => {
return(
...
<Background />
...
)
}
export default Home

然而，虽然没有错误，但同时什么也没有显示。我不明白问题出在哪里

javascript
Martin Hope
Elijah_Pris
Asked: 2023-09-07 14:47:49 +0800 CST
  • 5

我正在尝试根据 YouTube 上的以下视频制作一个导航栏：https://www.youtube.com/watch? v=a3rofqqrTBE&ab_channel=OnlineTutorials，用于我也从 YouTube 下载的简历（现在我认为很明显，我我是新手，不太明白）

要点是白色元素（指定白色用于对比）又名指示器与所有其他元素一起绘制，但与它们的位置不一致。

在此输入图像描述

在此输入图像描述

这是负责这个动画的代码片段

导航栏.jsx

<div className="Nav_container">
    <div className="logo">
        <img src={LogoGif} alt="my-gif" />
    </div>
    <div className="icons" >
        <ul className="nav_links">
            {navLinks.map((navlink, index) => {
                return <li class="list active" key={index}>
                <div class="indicator"></div>
                <a href={`#${navlink.links}`}>{navlink.icons}
                    <span class="text">{navlink.links}</span>
                </a>
                </li>
            })}
        </ul>
    </div>
</div>

导航栏.scss

.nav_links {
    display: flex;
    list-style: none;
    max-height: 50px;

    li {
        margin-left: 3rem;

        @media screen and (max-width: 800px){
            display: none;
        }
        &:hover {
            .text {
                opacity: 1;
                transform: translateY(-10px); 
                background: rgb(66,66,66);
                padding: 2px 7px;
                border-radius: 12px;
            }
            svg {
                opacity: 1;
                transform: translateY(30px);
            }
            .indicator {
                transform: translateY(30px);
            }
        }
        .indicator {
            top: 0px;
            border: 6px solid rgba(0,0,0,0.0);
            border-radius: 50%;
            position: absolute;
            width: 70px;
            height: 70px;
            background: rgb(29,31,35);
            background-color: #fff;
            transition: 0.4s;
        }
        .indicator::before {
            content: '';
            position: absolute;
            top: 34px;
            left: 58px;
            width: 30px;
            height: 30px;
            background: transparent;
            border-radius: 50%;
            box-shadow: -14px -16px white;
        }
        .indicator::after {
            content: '';
            position: absolute;
            top: 34px;
            left: -30px;
            width: 30px;
            height: 30px;
            background: transparent;
            border-radius: 50%;
            box-shadow: 14px -16px white;
        } 
        a {
            position: relative;
            display: flex;
            align-items: center;
            flex-direction: column;
            width: 100%;
            text-align: center;
            text-decoration: none;
            transition: 0.5s;
            color: #fff;
            text-transform: uppercase;
            font-weight: 100;
            &:hover {
                opacity: 1;
            }
        }
        .text {
            font-size: 0.8em;
            opacity: 0;
            margin-top: -25px;
            transition: 0.5s;
            letter-spacing: 0.1em;
        }
        svg {
            display: block;
            font-size: 2em;
            transition: 0.7s;
        }
    }
}

需要添加什么来移动指示器的位置与其余元素一致（我认为很明显，图标和文本在同一水平上对齐，只有指示器被移动）

html
Martin Hope
Elijah_Pris
Asked: 2023-02-15 22:57:12 +0800 CST
  • 5

该算法生成一个值列表，平均从 300k 到 1M 点（取决于是否实现收敛以及在什么点）。为所有这些点绘制图表需要花费大量时间，并且将带有图表的笔记本电脑保存到磁盘时，笔记本电脑会占用大量空间。

因此，我们希望将点数减少到 100。即 将得到的点列表分成 100 个样本，并在每个样本中取平均值，然后形成一个包含 100 个接收值的列表。问题是如何做得更好更高效，有没有有效的算法呢？

python
Martin Hope
Elijah_Pris
Asked: 2023-01-30 16:20:59 +0800 CST
  • 6

我正在尝试在线性回归问题中可视化线性函数的系数对其图形的影响，类似于它在 desmos 中的完成方式 在此处输入图像描述

为此，我使用以下代码从其他人的代码片段中编译而成

import pandas as pd                      
import numpy as np
import plotly.offline as py
import plotly.graph_objs as go
py.init_notebook_mode(connected=False)
# Create figure
fig = go.Figure(go.Scatter(x=data.Population, y=data.Profit, mode='markers', name='Population&Profit'))

# Add traces, one for each slider step
for step in np.arange(0, 2, 0.1):
    x=np.linspace(3, 23, 100)
    fig.add_trace(
        go.Scatter(
            x=x,
            y=step*np.linspace(-4,23,100)+step))


# Create and add slider
steps = []
for i in range(len(fig.data)):
    step = dict(
        method="update",
        args=[{"visible": [False] * len(fig.data)},
              {"title": "Slider switched to step: " + str(i)}],  # layout attribute
    )
    step["args"][0]["visible"][i] = True  # Toggle i'th trace to "visible"
    steps.append(step)

sliders = [dict(
    active=10,
    currentvalue={"prefix": "Frequency: "},
    pad={"t": 50},
    steps=steps
)]

fig.update_layout(
    sliders=sliders
)

fig.show()

最终结果是这样的在此处输入图像描述

移动滑块时，只绘制了一条新线，我尝试在函数内添加绘图点add_trace，但没有帮助。此外，这个功能感觉不像它在desmos+ 我仍然想为k和 for实现相同的滑块b。

如果您通过为点添加跟踪来更改代码如下：

for step in np.arange(0, 2, 0.1):
    x=np.linspace(3, 23, 100)
    y=step*np.linspace(-4,23,100)+step
    fig.add_trace(
        go.Scatter(x=data.Population, 
            y=data.Profit, 
            mode='markers', 
            name='Population&Profit')
    )
    fig.add_trace(
        go.Scatter(
            x=x,
            y=y)
    )

那么结果将如下所示： 在此处输入图像描述

而当你改变滑块的位置时，先画点，再画线，最后一条与点重叠。如果改变定义的顺序，那么相反，点会和线重叠，也就是没有叠加效果。

我试图fig在函数内部定义它，但随后一切都崩溃了。

python