问题标签 [css-doodle]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 同一元素上的两个无限动画每个只播放一次
我正在玩css-doodle,我正在尝试在网格中制作螺旋动画。
我想要做的是让它无限地在螺旋向外和再次螺旋之间交替。infinite
目前,即使我将参数添加到animation
属性中,我也只能让它播放一次动画。
我正在尝试使用两个动画:
然后像这样无限地播放它们,中间有延迟:
animation: bg 12.1s linear calc(.05s*var(--RES)) forwards infinite, bg-reverse 12.1s linear calc(.05s*@max-col()*@max-row() + (.05s*@max-col()*@max-row() - .05s*var(--RES))) forwards infinite;
这是我的代码笔:https ://codepen.io/anon/pen/xzWxrd?editors=1000
有人看到我在这里做错了吗?
编辑:添加片段。反向动画在这里似乎不起作用:S
css - css doodle用角度抛出错误?
https://codepen.io/tuckermassad/pen/rPYNLq
我将 CSS 涂鸦代码从那里复制到我的角度组件中:
现在,我用 安装了 css-doodle npm i css-doodle
,我运行了这个项目,我得到了以下错误:
有没有办法以角度使用css doodle?
html - 使 css-doodle 响应媒体查询
我已经使用 css-doodle 为我的页面设置了背景。全屏时看起来不错,但由于我的网格设置方式,形状随着屏幕变小,在分屏或模拟移动设备时完全不可见。我希望它们在视觉上总是相同的大小。
这是我尝试添加的媒体查询,但它似乎没有做任何事情。(我对RWD相当陌生,所以我不确定问题是什么。)
这是我的CSS-Doodle代码。
css - 动画只影响 css-doodle 的第一个元素
当悬停在涂鸦上时,我想制作随机的“闪烁”效果。为此blink
,当用户将鼠标悬停在涂鸦容器上时,我将动画名称存储到变量中。由于某种原因,动画仅适用于网格的第一个元素。有没有办法将动画应用于所有元素?
CodePen:https ://codepen.io/entityinarray/pen/mdbRPRz
reactjs - React 状态是 udpate 但不在 css doodle 标签中
应用程序状态正常。当我更改 textarea 中的值时,它正在更新,我可以使用 react 实用程序看到状态组件的更改,但 css doodle 不会更新。我必须手动刷新才能看到我不明白为什么的更改。非常感谢
css - 六边形图案 CSS 涂鸦
我使用 CSS Doodle 堆叠了这种六边形图案。问题是:我想让六边形更小 1.5-2 倍并且更对称(现在它就像被 X 轴拉伸了一点点),但是必须保存视口更改时的响应。我试图结合许多价值观,但这是我能够做到的最终版本。这里有一个codepen和代码:
html - 我想在我的标题文本的同一行中包含一个 css-doodle 动画
我有一个 css-doodle 动画,它基本上是一个小的动画圆圈,我想用它来代替我的网站标题(h1)中的字母“O”。因此,动画需要在同一行作为我的标题,每边都有标题文本(例如:“PURPLE XM[css-doodle]SS”)。我还想在标题周围放置一个虚线边框,并确保即使在更改页面宽度时仍能显示 css-doodle 动画。我的 HTML 和 CSS 样式表如下:
javascript - 在他们的一个例子中使用 ±
在css-doodle网站上,他们的第一个示例使用了这样的“±”符号:
我以前从未在 JS 或 CSS 中使用过这个,所以我只是想知道这是否是 css-doodle 独有的一些功能,或者这实际上可以在 CSS 或 JS 中使用吗?