腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
2
回答
单SVG有两个动画,一个延迟播放,另一个通过CSS?
html
、
css
、
svg
我正在尝试将两个动画应用到一个SVG上,这是我能够实现的,但是我不知道如何延迟其中一个,而不是另一个,因为我希望它们能播放一个,然后再播放另一个。 我想让第一个动画(SVG的路径“绘制”自己)播放并完成自己,然后让第二个动画(SVG的“填充”)在之后播放。 我见过人们在css中使用动画延迟,但是这将适用于两种动画,而不是奇异的动画,因为它是一个奇异的SVG目标。 这是。 和相关的CSS: .preload-container__svg-wrap svg{ stroke: #EE2D24; fill: #EE2D24; fill-opacity: 0; width: 100%;
浏览 0
提问于2017-06-22
得票数 2
回答已采纳
1
回答
SVG/SMIL再流/再油漆对性能的影响?
html
、
performance
、
svg
、
reflow
、
smil
在过去,我在javascript中做了很多工作,包括一些DOM操作。从这里我了解到,在某些情况下,重新绘制/重新绘制可能是一个很大的性能问题,并且通常应该限制在最低限度。例如,当添加一组div时,您应该一次性添加(将它们附加到DOM之外的div,然后附加它),而不是一个接一个地附加它们。对于重绘也是如此,可以通过更改元素的CSS属性来触发重绘。虽然我必须承认,我从来没有研究过那么多的重新油漆,所以我可能是错误的最后一部分。 这是否也适用于SVG (考虑到它使用的是一种DOM,这似乎是合理的)?对于不同的SVG元素,有什么不同吗?例如,动画元素不会创建回流,因为它不是一个新的SVG元素,而是更像
浏览 1
提问于2014-07-08
得票数 2
回答已采纳
1
回答
为什么Chrome在某些情况下在主线程上运行转换动画,而在另一些情况下则不运行?
javascript
、
css
、
css-transitions
、
css-animations
、
css-transforms
标准是什么? 在下面的示例中,我正在为CSS transform动画,当您单击任何地方(而在Google中)时,动画就会被一个2秒长的while循环所阻塞。 为什么CSS transform动画被封锁? 编辑:最近在主线程被阻塞时不再阻塞transform,这表明它们已经将下面示例中的动画从主线程移出。 动画转换可以在单独的线程上进行,但具体时间还不清楚。有时候很管用。 在第一个示例中,不会发生单独的线程转换动画(单击它可以阻止主线程,从而暂停动画): window.addEventListener('click', kill) function kill() { v
浏览 0
提问于2019-04-04
得票数 38
1
回答
奇怪的SVG动画行为
html
、
css
、
animation
、
svg
我的SVG动画非常完美..。除了SVG中的最后一个元素之外。那就毁了整个动画。 我有一个六边形,由6个独立的三角形组成,这些三角形被动画化后折叠,然后折叠回一个循环,用作加载器动画。 动画利用SVG组允许它叠加css转换旋转,这样我就可以将三角形旋转成六边形,然后在3D中旋转它们来展开它们,最后翻转它们,这样就可以播放相同的动画来折叠它们。 这一切都很完美,但是最后一个元素出错了,我不知道为什么,这是与旋转有关的,翻转三角形来实现折叠式。如果您将六边形翻转三角键框中的百分比更改为59.99%和60%,则行为不同;最后一个三角形按原来的方式折叠(即没有翻转)。
浏览 5
提问于2016-09-08
得票数 2
回答已采纳
2
回答
将高度设置为零后Css转换失败
javascript
、
html
、
css
、
css-transitions
我在文章元素中展开和折叠动画到div上。 基于这个小提琴代码: 当div框被展开时("div.expandable"),我不希望将高度硬编码(锁定)留在一个特定的值,因此我通过删除高度值:el.css("height", ""); (动画完成后)来重置它。 在为折叠/关闭动画再次将高度设置为"0“之前,我将恢复高度(返回到136 it )。在重新设置动画之后,没有将动画折叠回height: 0。但是,如果在展开动画之后,将高度保持在136 if,那么折叠动画就能正常工作。 如果您注释掉了el.css("height", &
浏览 6
提问于2014-01-28
得票数 4
回答已采纳
5
回答
UILabel动画框架的光滑化
cocoa-touch
、
animation
、
uilabel
我一直试图找出一种不错的方法,以顺利动画的框架大小变化的UILabel,而不是一个奇怪的开始跳转重画。默认情况下,当我做这样的事情时: // Assume myLabel frame starts as (0, 0, 100, 200) [UIView beginAnimations:@"myAnim" context:NULL]; [UIView setAnimationBeginsFromCurrentState:YES]; [UIView setAnimationCurve:UIViewAnimationCurveLinear]; [UIView setAnimatio
浏览 5
提问于2009-11-13
得票数 10
回答已采纳
1
回答
Firefox :动画SVG半径仅适用于百分比
svg
、
firefox
、
css-animations
、
browser-support
我正在尝试为SVG2几何属性r (圆元素的radius property )设置动画。 我读到这个属性可以在支持SVG2 (参见Resizing SVG Circle Radius Using CSS Animation)的浏览器中用作CSS属性。 现在我注意到,只有当我将值表示为percentages时,r动画才能在Firefox中起作用。如果使用绝对值,则不会对圆进行动画处理,请参见minimum reproduction CodeSandbox。 火狐在这里缺少SVG2支持吗?
浏览 19
提问于2021-01-20
得票数 0
回答已采纳
1
回答
结合CSS3比例和反射使铬上的元素变得模糊
css
、
google-chrome
、
scale
、
blur
当你尝试在带有内容的div上组合css3 scale和css3 reflect时,在chrome上有一种奇怪的bug。 我想知道是否有人知道如何修复或破解,以获得一个明确的结果。 *我的div的内容可以是文本、视频、图片、svg...并且可以包含动画 为了说明这个问题,我编写了以下代码
浏览 0
提问于2014-04-30
得票数 1
1
回答
SVG上不需要的高度动画
html
、
css
、
animation
、
svg
我正在制作一个表单,并使用SVG在边框中创建间隙的效果,这样我就可以将占位符文本向上移动。目前,我将它放在边框上,绝对定位,然后将宽度设置为0,然后当我需要显示间隙时,我将宽度动画化为全宽。我遇到的问题是,不只是动画宽度,高度也是动画,这意味着在动画过程中有一些背景显示出来,创造了一种奇怪的效果。下面是CSS: .cutout { top: 6px; width: 0; height: 5px; min-height: 5px; max-height: 5px; transition: width 0.1s ease } ... .fiel
浏览 21
提问于2021-03-24
得票数 0
1
回答
径向擦除与纯CSS;如果不是SVG替代
html
、
css
、
svg
、
css-transitions
、
css-animations
我已经找到了,它得到了回答,并且似乎实现了一个带有SVG的径向擦除动画。 我希望实现如下示例所示的border: 1px solid green;效果: 不过,我想知道的是,使用纯CSS -that是否能够做到这一点是理想的。 如果CSS无法实现,我将如何使用SVG来解决这类问题?
浏览 0
提问于2015-11-18
得票数 5
回答已采纳
1
回答
WPF:如何从激活属性的触发器中初始化要动画的属性?
wpf
、
animation
、
datatrigger
在我看来,我有一个Grid,它的“可见性”取决于一个集合是否有多个元素。随着元素的添加和删除,网格需要被动画化、扩展和折叠。我编写了一个DataTrigger来完成这一工作。 <DataTrigger Binding="{Binding Path=MyCollection.Count, Converter={StaticResource IsLessThanConverter}, ConverterParameter=2}" Value="True"> <DataTrigger.EnterActions> <
浏览 5
提问于2017-11-03
得票数 0
回答已采纳
2
回答
动画中的触发器事件从lottie-web开始
typescript
、
events
、
next.js
、
lottie
我目前正在开发一个next.js应用程序,我的目标是拥有一个带有声音的“问候动画”。 当动画开始时,我遇到了触发事件的问题,所以我可以启动同步的音乐。 这是我的代码,它显示动画,但不记录任何内容: import React, { useEffect, useRef } from "react"; import lottie from "lottie-web"; function App() { const container = useRef(null); useEffect(() => { lottie.loadAnimation({
浏览 10
提问于2022-01-12
得票数 1
回答已采纳
1
回答
CSS SVGator动画和多个类
javascript
、
css
、
svg
、
svgator
display:block.的前提:有8个选项卡(带有JS)通过显示来切换相关的内容包装:none->这些内容包装器中有动画SVG,它们会引发问题。本质上,如果选项卡是活动的,则相关的内容包装应该显示,SVG动画应该播放。一旦激活了另一个选项卡,前面的内容包装器和SVG动画应该重新设置。 我在SVGator中创建了一些动画,但由于以下几个原因未能使它们正常工作: 有8个选项卡,每个选项卡只包含8个SVGs中的一个,这意味着只有活动选项卡才会有动画。显然不是这样,他们都会动起来,即使是看不见的。所以我认为使用‘滚动到视图’可以修复它,再加上切换选项卡。但是,由于选项卡将SVG各自的包装从d
浏览 7
提问于2022-02-05
得票数 0
0
回答
当元素垂直居中时,在滚动中添加内联CSS
javascript
、
jquery
、
html
、
css
我有一个带有CSS动画元素的SVG。使用动画播放状态,我将它们保持在暂停状态,使用jQuery或JavaScript,我想将其更改为仅当SVG在滚动上垂直居中时才运行。 我的想法是获取.paused类,让它们都暂停,并用前面提到的内联CSS重写它。
浏览 7
提问于2017-06-12
得票数 0
2
回答
如何只在复合UIView的一部分应用3d透视变换?
ios
、
core-animation
、
calayer
、
cgimage
、
cabasicanimation
我有UIView和UIImageViews,UILabels,UITextView。 我的目标是改变中间部分,让它看起来像是折叠一张纸:-顶部和底部保持不变,只是它们向彼此滑动-中间部分向屏幕折叠(如在Clear app:中) 我的想法是首先加载整个视图,然后分成4个部分,使中间的两个部分成为CGImage,并以某种方式使用透视来动画它们,同时转换顶部和底部的部分,这样它们就会彼此滑动(最后,中间的两个部分应该是不可见的)。 我也应该能够打开这个视图和滚动UITextView。 我不是在寻找一个现成的答案,只是指向正确的解决方案。我遇到过CALayer、CABasicAnimation和CGI
浏览 0
提问于2012-06-02
得票数 2
回答已采纳
1
回答
won本机和博览- SVG不会在iOS设备上呈现
reactjs
、
svg
、
react-native
、
expo
、
create-react-native-app
我已经开始了一个项目,使用‘创建-反应-本机-应用’,我不知道如何渲染.svg文件。我尝试了所有svg的库,比如react --svg-uri、react本机-svg-映像、msvgc (将.svg转换为使用react本机-svg来响应组件),但这些都没有帮助。有时,当我在手机上运行应用程序预览(带有世博)时,它会立即崩溃,有时它只显示加载动画,而不是显示实际的.svg图像。没有错误-它只是不会渲染svgs。 例如,此代码显示加载动画。 import SVGImage from 'react-native-svg-image'; <View style={styles.
浏览 1
提问于2017-05-05
得票数 1
回答已采纳
1
回答
使用<object>动画SVG
jquery
、
html
、
css
、
svg
我试图使用CSS动画一个大型SVG。 当我将SVG直接放在HTML中时,它工作得很好。 当我尝试使用<object>时,它逐个字母地加载SVG,并且没有捕获CSS类。目标是将SVG保存在文件中,并将其包含在HTML中。 HTML <object id="svg" data="img/logo.svg" type="image/svg+xml"></object> 当我检查DOM时,所有的SVG代码都被正确地包含了( <object>扩展到SVG中),但是CSS类没有被应用,当它加载SVG时,它加载每
浏览 1
提问于2016-03-30
得票数 0
回答已采纳
1
回答
使用css为svg设置动画
javascript
、
jquery
、
html
、
svg
、
snap.svg
我需要(使用css)制作SVG动画,但我不想将所有SVG代码嵌入到页面中。 在寻找了在页面中包含我的svg并且仍然能够使其具有动画效果的方法之后,我发现唯一不嵌入svg原始数据的方法是使用一个对象,但是任何制作svg动画效果的css都需要包含在样式标签中或者从svg文件链接到它。这对我来说并不是一个真正的选择。 然后我看了一下Snap,它工作得很好,但后来我发现我可以通过jquery加载外部文件,并使用CSS动画: $('.mysvg').load('path/to/my-svg.svg'); 我的问题是,这样做有什么限制或需要注意的地方吗?我是否遗漏了一些明显
浏览 2
提问于2015-08-30
得票数 0
1
回答
带有图标的平滑侧边菜单动画
html
、
css
我想在侧边菜单展开和折叠时生成动画,但它的结构方式阻止了我使用transform (或者至少我不确定如何正确使用它)。我目前使用的是width动画,它不太平滑,特别是我的相对div在右边,它包含一个网格,这会进一步减慢动画的速度(它在我没有网格或表格的页面上看不到)。 因为我的图标在左边,所以我不能使用translateX来为它设置动画,因为这些图标最初是不可见的。 我试过使用scale,但菜单在折叠和展开时被“挤压”了。 我应该使用什么方法来制作流畅的动画,而不是被大量重新缩放的相对div所限制。我知道它很平滑,但一旦我开始在相对右侧的div上添加一些较重的内容,使用width进行动画效果看
浏览 0
提问于2019-06-25
得票数 1
1
回答
嵌入式SVG在CSS背景下的动画
css
、
svg
、
background
、
hover
、
uri
我的目标是悬停-动画的东西,就像一个时尚的漩涡(如)在现有的html页面。换句话说,我想应用路径绘制动画在一个自定义旋涡,当“盘旋”的一些元素。但我有一些限制: 我只需编辑.css文件(站点只允许用户自定义提交.css文件)。所以,我不能创建更多的html元素。我只有现存的几个人可以一起工作。因此,我不能在html中插入svg。 在html上没有svg元素可用。 在研究了一些想法和研究之后,我得出结论,通过数据URI编码将svg注入到css背景中是实现我的目标的方法。我取得了以下成果: 将静态svg处理为css背景,如下所示: background-image:ur
浏览 1
提问于2017-05-27
得票数 0
2
回答
MIME类型和服务svg的问题:解释为Image但使用MIME类型text/xml传输的资源
css
、
apache
、
.htaccess
、
svg
、
mime-types
我的目标是一些带有CSS的SVG图像,作为一些元素的背景,并且有一些奇怪的问题。当使用时,它工作得很好,但是当在CSS中使用时,我得到了以下错误: Resource interpreted as Image but transferred with MIME type text/xml 我已经使用以下代码将一个.htaccess文件添加到提供图像的目录中,但它没有帮助: AddType image/svg+xml svg 有什么建议吗?
浏览 0
提问于2012-09-09
得票数 1
回答已采纳
1
回答
火狐SVG转换-原点仍未修复?
javascript
、
firefox
、
svg
、
css-transforms
我在火狐的文档中看到SVG转换原点是用火狐41+修复的,但我使用的是火狐49,有一些奇怪的效果。 这是我在Chrome中的SVG动画: 。。在Firefox中是这样的: 我的代码就像- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960.59 674.02"> ... <path class="fillCup" d="M395.56,528.9l6.53,36.05c0,2.42,6.08,4.38,13.57,4.38s13.57
浏览 5
提问于2016-10-11
得票数 0
回答已采纳
1
回答
无法使用JQuery向克隆元素添加事件侦听器-用于CSS动画
javascript
、
jquery
、
css
、
svg
、
css-animations
我正在使用一些SVG元素制作一个切换按钮,这些元素使用CSS动画/@Keyframe进行动画处理。 正如你所期望的,你点击'on‘元素(在本例中是一个绿色的svg圆),这个类就变成了一个带有CSS动画的类,并且这个元素转换到了'off’的位置(红色的svg圆)。这是可行的,我可以做到这一点。 如果您想在每次单击元素时只播放一次动画,反之亦然,则使用...however动画需要以下方法。克隆元素,更改新元素的类,并删除旧元素。 这里的问题是,当您的JS脚本第一次加载时,您不能初始化单击事件,因为例如,'off‘元素还不存在。 反过来,我需要一个JQuery函数,它可以:获
浏览 12
提问于2019-08-17
得票数 0
回答已采纳
1
回答
网格的ActualHeight没有更改
wpf
、
grid
、
actualheight
我有一个按钮,里面有一个网格: <Button> <Grid Name="grid"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <TextB
浏览 3
提问于2014-04-15
得票数 0
回答已采纳
3
回答
带有CSS过渡的SVG过滤器
html
、
css
、
animation
、
svg
、
css-transitions
我正在做一个带有css动画的svg过滤器。我使用 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur"
浏览 25
提问于2017-07-17
得票数 4
回答已采纳
3
回答
如何使CSS动画在元素不再悬停后持续?
jquery
、
css
、
css-animations
我对CSS3动画有一个问题。我有一个类帮助我动画一个SVG,这个类的名字是‘动画圈’。 我希望动画触发时,我悬停在“输入”。 我创建了以下代码: jQuery('form.newsletter input[type="submit"]').hover(function() { jQuery('svg').addClass('animateCircle') }) 问题是,如果我从“输入”元素中移除光标,动画就会突然停止。 理想情况下,我希望动画结束(持续2秒),然后类(触发动画)删除自身。我尝试过放置一个setTime
浏览 5
提问于2021-06-09
得票数 2
回答已采纳
1
回答
限制每个会话的CSS动画
html
、
css
、
animation
、
svg
、
nopcommerce
我的网站目前有一个SVG标志的标题,其中动画使用CSS加载。我真的想将此动画限制为每个会话一次。 我知道如何将动画限制为只循环一次,但是每当用户导航到新页面时,它都会在页面加载时再次生成动画。我们的目标是让动画播放一次,然后不管用户导航到哪个页面,都不会再播放动画。 我对如何实现这一点的建议持开放态度。 该网站是建立在NOP商务系统,使用自定义的Web打印插件。 任何帮助都将不胜感激。 谢谢
浏览 40
提问于2018-08-17
得票数 0
1
回答
如何让Elm动画师使用CSS动画来动画SVG元素?
css
、
svg
、
elm
我试着用榆树做CSS动画,但我无法让它工作! 榆树有几个动画包。我尝试使用的是mdgriffith/elm-animator。可悲的是,和许多榆树包一样,它的文档很少。它似乎提供了两种呈现方式:一种是运行Elm事件循环来执行每个帧的DOM更新,另一种是使用CSS动画,我甚至没有意识到这一点。我在试着做后者。 我尝试将代码缩减到一个最小的例子: module Main exposing (main) import Time import Platform.Cmd import Browser import Html import Html.Attributes import Html.Even
浏览 2
提问于2021-06-28
得票数 2
回答已采纳
1
回答
以编程方式添加和删除视图及其控制器的最佳方法是什么?
objective-c
、
ios
、
uiviewcontroller
我希望看到关于如何以编程方式管理视图的详细说明。我将提供一个概述,我现在是如何做它,并希望对我的方法如何糟糕的评论,或只是一个概览如何干净和正确地做它。 基本上,在我的应用程序的主视图控制器的loadView方法中,我首先创建一个根视图并将self.view设置为它。当我想附加一个控制器,比如说,第一个显示的控制器时,我调用这个方法: -(void) attachViewForController:(UIViewController*)controller { [self.mRootView addSubview:controller.view]; [controller vi
浏览 0
提问于2012-01-05
得票数 3
1
回答
为web门户创建交互式SVG地图
javascript
、
jquery
、
html
、
svg
、
maps
我正在创建一个带有SVG格式地图的web门户,并使用<object>标记在HTML代码中设置,以保持交互性的可能性。我的主要问题是如何在浏览器中创建和支持交互式SVG格式? 据我所研究,有几种选择: SMIL动画直接出现在SVG中, CSS动画, JavaScript库。 在我看来,最后一种选择最有潜力。有许多库(Snap.svg、svg.js、Velocity.js、d3.js、jVectorMap.js、GreenSock .)如果有人能给我一些建议,让他们使用,我会很感激。 我需要直接使用<script>标记还是使用外部.js文件在SVG中使用
浏览 1
提问于2016-10-07
得票数 2
回答已采纳
3
回答
SVG动画,只需添加一个类
javascript
、
html
、
css
、
svg
、
css-animations
我使用SMIL动画创建了一个svg加载器动画。我只是通过添加一个类名即loader来显示元素中的svg。 (单击容器查看加载程序) .loader{ position: relative; } /* image */ .loader::before { background-image: url('loader.svg'); /* other properties */ } /* blocker */ .loader::after { /* other properties */ } 但现在,我意识到了。所以,我决定用CSS来处理动画。但
浏览 2
提问于2016-04-01
得票数 3
回答已采纳
1
回答
如何禁用UIStackView默认显示/隐藏动画?
swift
、
animation
、
show-hide
、
uistackview
这可能是个奇怪的问题。当我们在UIStackView中显示或隐藏视图时,我们可以在它中免费获得动画。但这种行为与我所拥有的另一个动画是矛盾的。那么有什么方法可以禁用UIStackView的默认动画吗? 我希望它只是显示或隐藏的子视图,没有任何动画。我如何快速实现这一目标? 已更新 因此,如果我执行view2.isHidden = true,StackView将默认使用折叠动画隐藏View2。我要它在没有动画的情况下强制隐藏
浏览 7
提问于2021-08-24
得票数 3
回答已采纳
2
回答
SVG CSS3动画的奇怪行为
css
、
animation
、
svg
在此之前,我应该说,我对SVG世界是全新的。我正在尝试一个使用SVG和CSS3动画的相当简单的实验。 我已经在Inkscape中创建了SVG,并将其另存为纯SVG。然后我把它放到超文本标记语言中,用来播放一些CSS3动画。 从我下面的链接中可以看到,整个SVG会奇怪地反弹,这可以通过从CSS中删除.arm类来删除。(这会停止具有arm类的单个红色圆圈组)。 问题是,我希望红色圆圈组动画(旋转),而整个更大的组也在旋转。 有什么想法或明目张胆的事情我可能做错了吗?(我确实意识到这不是最好的SVG,但我只是在尝试)。 注1:如果我删除了.arm或.center的CSS规则,那么摆动就会停止,但它
浏览 1
提问于2013-02-28
得票数 2
回答已采纳
2
回答
有没有一种方法可以使用Material-UI折叠和抽屉而不过渡?
material-ui
、
react-transition-group
我使用中的折叠和抽屉在移动网站上创建导航。导航有很多。 当我单击展开/折叠折叠时,会有明显的延迟,直到开始折叠动画。抽屉上也出现了同样的问题。 折叠和抽屉都使用动画的过渡。转换由react-transition-group提供。 为了提高响应性,我计划使用无过渡的折叠和抽屉(我不介意没有动画)。有没有办法在不过渡的情况下使用折叠和抽屉? 另外,我已经检查了折叠和抽屉的文档,没有找到禁用转换的道具或标志。
浏览 3
提问于2018-02-22
得票数 4
回答已采纳
1
回答
如何使工具栏和TabLayout即使在CollapsingToolbarLayout崩溃时仍然可见?
android
、
android-toolbar
、
android-tablayout
、
android-collapsingtoolbarlayout
、
android-appbarlayout
如何使CollapsingToolbarLayout崩溃时工具栏和TabLayout仍然可见? 例如,我有一个带有app的CollapsingToolbarLayout:contentScrim动画,其中包含Toolbar、ImageView和TabLayout,但是我想在滚动时隐藏ImageView,但仍然显示工具栏<code>E 217</code>和<code>E 118</code>TabLayout<code>E 219</code>,即使在我滑动和折叠视图时也是如此。 我希望在展开CollapsingToolb
浏览 8
提问于2022-08-06
得票数 0
2
回答
使用纯JS无CSS3旋转SVG
javascript
、
jquery
、
css
、
svg
有没有任何方法可以使用纯Javascript/Jquery旋转SVG元素而不使用CSS3 transfrom。 实际上,我试图用{ transform: rotate(45deg)}和动画化SVG,它在Chrome和Mozilla上运行得很好,但在IE transform:rotate(90deg)上,-ms-transfrom:rotate(90deg) dosen;t似乎在使用SVG元素。 transform:rotate(90deg)正在旋转普通图像,但是无法在IE (IE11)中旋转SVG元素。 所以,我在用JS搜索一些替代的东西。 找到这个jqueryrotate.com插件,但是,
浏览 4
提问于2016-05-21
得票数 0
回答已采纳
2
回答
当使用svg-动画设置svg-text元素的CSS属性时,如何设置起始位置?
svg
、
svg-filters
我想使用svg-动画来动画一个svg-文本元素的CSS属性。我可以让动画工作得很好,但是CSS的起始位置是默认样式,而不是第一个关键帧的样式。 下面的代码说明了这个问题: <svg id="foo" width="500"> <text x="0" y="100" style="fill: white;"> Some Text </text> </svg> <svg> <animate xlink:href="#
浏览 1
提问于2014-11-30
得票数 0
回答已采纳
1
回答
使CGAffineTransformScale以给定点为中心
objective-c
、
cocoa-touch
、
animation
、
cgaffinetransform
我正在制作从上面掉到棋盘上的物体的动画,我想要在物体落到棋盘上时动画棋盘“倒下”。物体可以在棋盘上的任何点坠落,当棋盘“倒下”时,我会将棋盘缩小到更小的比例。 当使用CGAffineTransformScale对象时,根据它们的锚点,对象的中心缩放;我想缩放棋盘,然后将变换后的棋盘与落在上面的对象对齐,这样坠落的对象看起来就像是停留在相对于棋盘的相同位置(或者,更准确地说,棋盘停留在相对于棋盘位置的相同位置)。 我花了好几个小时把锚点改到物体掉下来的位置,但这揭示了我对layer.anchorPoint实际工作原理的根本误解。 我想解决方案是从棋盘的中心到给定的坠落物体导出一个向量,然后以某种
浏览 0
提问于2013-07-13
得票数 1
回答已采纳
1
回答
缓存svg文件。使用img标签还是svg标签?
css
、
html
、
svg
我有许多大型SVG文件(约200 the后,减少了在线工具的大小)。我真的不希望访问者每次访问时都从我的服务器下载所有的文本。我想利用CDN和清漆缓存。 如果我使用SVG标记,浏览器或CDN或Varnish都会在html文档中缓存svg代码。SVG没有src属性。 如果我使用一个图像标记,它将被缓存,但是我不能利用SVG标记所具有的preserveAspectRatio和viewBox。当调整浏览器窗口大小时,我必须处理div和css的图像以保持高宽比。一些你认为SVG更容易的东西 我当前的解析是img标记上的这个css,src属性中有一个svg。 .myImage{ max-width: 1
浏览 0
提问于2018-12-31
得票数 0
回答已采纳
2
回答
SVG动画:使用IE10媒体查询将CSS3从其他现代浏览器中分离出来
internet-explorer
、
css
、
animation
、
svg
、
media-queries
我在SVG文件中编写了一个漂亮的加载动画。我的问题是Internet 10不支持带有参数的 <animate>标记。由于我喜欢一些挑战,我设计了一个SVG 和动画GIF版本的加载动画。 现在,我寻找某种类型的CSS3媒体查询(在下面的CSS中查找"???????????“),它将加载支持本地SVG动画的现代Webkit和壁虎引擎(在桌面和移动设备上)的回退样式,使GIF退回到不支持CSS3媒体查询和所有Internet的老浏览器,从IE7到IE10。至少我需要Chrome,Safari & Safari手机(Webkit),为Firefox拥有它是一个不错的选择。
浏览 2
提问于2013-04-25
得票数 2
1
回答
SVG动画隐藏或停止后,页面加载?
jquery
、
html
、
performance
、
svg
、
css-animations
我在页面加载上显示一个SVG / CSS加载动画,我通常在页面加载后隐藏包含SVG / CSS的<div>。 当我们在不停止动画的情况下隐藏时,是否存在性能问题?隐藏SVG动画后是否有必要停止动画?在SVG和CSS动画的情况下?
浏览 5
提问于2018-01-12
得票数 0
1
回答
引导程序折叠在小视图中不起作用
javascript
、
html
、
css
、
twitter-bootstrap
我似乎对小视图中的Bootstrap折叠下拉功能有一个奇怪的问题。我在XS和S视图的标题中都有图标,在XS中,点击这些图标将扩展功能,而在S中,这些下拉菜单已经打开,如果我尝试点击与下拉菜单交互的按钮,我会得到一个奇怪的动画。 Iv注意到关闭显示:!重要;在引导css (浏览器调试器)中的导航栏-折叠。似乎可以解决这个问题--然而,无论出于什么原因,这都是一个糟糕的修复方法--我不知道如何在我的自定义样式表中重写它。有没有人遇到过类似的Bootstrap崩溃下拉菜单问题? 我已经创建了一个Bootply文档,图片和字体--可怕的图标不会出现在那里,所以它看起来有点奇怪,忽略红线,因为它是用来测
浏览 1
提问于2015-10-16
得票数 3
1
回答
移动Safari SVG呈现问题与raphaeljs
javascript
、
svg
、
iphone
、
raphael
我正在使用制作一个动画的、交互式的图形,我需要在iPhone上很好地工作。我有两个小的渲染问题,我正在挣扎。 第一种情况是,每当您单击带有单击处理程序的svg元素时,移动safari就会在其周围绘制一个透明的灰色框,以指示单击的内容。当你点击一个超链接时,它会做同样的事情。在这种情况下,灰色盒子很难看。是否有css属性告诉移动safari不要这样做? 第二个问题是动画。在任何动画期间,移动safari都会在svg画布中添加一个难看的黑色边框。只有在动画正在进行的时候,它才是可见的,并且它只能在画布的底部和右边可见。知道怎么解决这个问题吗? 这是用拉斐尔网页上的一个演示的拷贝和粘贴拍摄的,背景是
浏览 1
提问于2009-10-10
得票数 5
2
回答
iOS动画在重复播放时不会重置
ios
、
animation
、
uiview
我有一个非常简单的动画块,它执行以下动画: (如果动画不播放,点击图像) func didTapButton() { // reset the animation to 0 centerYConstraint.constant = 0 superview!.layoutIfNeeded() UIView.animate( withDuration: 1, animations: { // animate the view downwards 30 points self.centerYConstraint.constant =
浏览 10
提问于2017-05-24
得票数 4
回答已采纳
1
回答
扩展用于语言选择的水平DIV
css
、
animation
我想创建一个动画div,就像在www.arsenal.com的搜索框中做的那样,但用于语言选择。我能得到一些关于如何处理CSS方面的帮助吗?基本上应该只有一个旗帜的图标,当它被点击时,一个水平菜单会滑出,然后在不在焦点时折叠。 下面是基本结构 <div class="flags"> <ul> <li>flag 1 with image</li> <li>flag 2 with image</li> <li>flag 3 with image
浏览 0
提问于2013-06-25
得票数 0
4
回答
从选项卡切换到折叠以进行响应
javascript
、
twitter-bootstrap
、
tabs
、
collapse
目标是当站点宽度小于676px时,从选项卡切换到折叠样式的折叠。我们使用的是Bootstrap。 我们将隐藏ul.nav-tabs和a.consition-分别使用css切换。选项卡在这里可以工作,但a.accordion-切换不起作用。有什么想法吗? <ul class="nav nav-tabs" id="myTab" data-tabs="tabs"> <li class="active"><a href="#panel1" data-toggle="tab"
浏览 0
提问于2013-02-16
得票数 6
回答已采纳
1
回答
如何打开或关闭信封过渡,Ios
ios
、
objective-c
、
uiimageview
、
core-animation
我的目标是使用动画来折叠和展开信封(就像我们在linkedin应用程序中使用的那样)。我使用的是下面提供的两张图片: 所以蓝色的(名为envelope001)用来显示未读的电子邮件,灰色的(evelope002)用来显示已读。我要做的是 NSMutableArray *arr = [[NSMutableArray alloc] initWithCapacity:2]; for (NSInteger i = 1; i <= 2; i++) { NSString *imageName = [NSString stringWithFormat:@"envelope00%.1
浏览 1
提问于2014-01-16
得票数 0
2
回答
使用CSS3动画破坏页面中所有元素的固定背景定位
css
、
google-chrome
、
css-position
、
css-animations
、
background-position
我只是在制作一个带有fixed背景定位的元素的网页,在我将css动画应用到一个(完全不同和不相关的)元素之前,它工作得很好。 我试着删除/重新应用动画,以确保它确实是问题所在,而且,当我添加动画时,背景定位(页面上的每个元素)都是静态的,并且在删除动画时再次工作。 这是正常的吗? 最终,我在寻找一种解决方案,允许: 相对定位, 浮动元素(或类似包装器的最小子元素) 用于固定的背景位置 在使用CSS3动画的网页中, 与Chrome兼容。 下面是动画: 这里没有他们: 我只在Chrome上测试过这个。 UPDATE:如一个答案所示,给出具有固定背景位置的元素
浏览 8
提问于2014-04-05
得票数 4
回答已采纳
1
回答
浏览器还会动画显示不可见的内容吗?
performance
、
css
当页面包含折叠下的CSS3动画,或者当用户向下滚动时隐藏的动画,您应该使用Javascript应用一个类来停止动画,还是浏览器不动画不可见的元素?
浏览 2
提问于2015-02-07
得票数 0
1
回答
CSS图像与SVGs的区别
html
、
css
、
performance
、
svg
、
difference
我在想,在你的网站上,CSS图片和SVG之间是否有什么区别。 所谓CSS图像,我指的是用div在HTML中创建并在CSS中样式化的图像(比如:)。 是的,CSS图像更耗时,但除此之外,它们都是可动画的,您可以在它们上使用CSS变量,使它们与JS、. 那这两种方法有什么区别呢?(性能、渲染、.)
浏览 1
提问于2020-01-12
得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
程序猿必备的10款web前端动画插件二
10个实现炫酷UI设计效果的CSS生成工具
CSS还能画画?SVG实现可爱的动物哈士奇和狐狸
CSS3 SVG实现可爱的动物哈士奇和狐狸动画
2019年 值得收藏的 15 个 JavaScript 和 CSS 动画库
热门
标签
更多标签
活动推荐
运营活动
广告
关闭
领券