用Jquery触发一个CSS动画
我有一个CSS动画,我想通过单击按钮来触发,然后链接到另一个页面.在页面加载时,动画还可以使动画不播放吗?预先感谢! Untitled Document $(document).ready(function(){ $(".main-btn").mouseup(function(){ $(".wra
14 2024-04-05
编程技术问答社区
创建动态梯度按钮背景的CSS
我正在寻找CSS规则,该规则可以创建CSS 按钮的彩色梯度背景. 我只是想和它一起玩,并做到了: https://codepen.io https://prashant-nadsoftdev/pen/bkzorb . 在 .custom-btn { background: linear-gradient(105deg, #f6d365, #fda085, #f6d365, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3); background-size: 200% 200%; -webkit-animation: rainbow 5s ease infinite; -z-animation: rainbow 5s ease infinite; -o-animation: rainbow 5s ease infinite; an
6 2024-04-05
编程技术问答社区
CSS UNDOVER财产
我试图使圆形边框动画,当您悬停时,它会变成正方形,并在您解开后回到一个圆圈.尽管我尽了最大的努力,但我似乎无法使它起作用.这是我到目前为止所拥有的. 在 @keyframes mymove { from { border-radius: 100% 100%; } to { border-radius: 0px, 0px; } } @keyframes mymoveback { from { border-radius: 0px 0px; } to { border-radius: 100%, 100%; } } .testButt { width: 100px; height: 100px; background: red; position: relative; -webkit-animation: mymove 3s; /* Safari
28 2024-04-05
编程技术问答社区
如何在同步的JavaScript运行时显示CSS加载器
基于我自己的经验,并与此答案,在JavaScript代码时,对UI的更改不是进行更改正在运行. 示例 当我单击一个按钮"运行脚本"时,我希望出现一个加载动画,然后我希望一些JavaScript运行,而JavaScript完成运行后,我希望加载动画消失.我已经创建了$('#run-script-btn').on('click', function() { startLoading(); longLoadingScript(10000); stopLoading(); }); startLoading()更改CSS以显示加载程序,但是直到JS完成运行之前,它实际上不会影响UI,此时stopLoading()被调用 - 因此,我们永远不会看到加载图标. 我想出的解决方法是在longLoadingScript()和stopLoading()>代码周围放置一个setTimeout(),以便给浏览器片刻,以在startLoading()调用中实际影响UI.工作代码在 codepe
8 2024-04-04
编程技术问答社区
CSS边框颜色切换动画。"从 "的颜色不正确
我构建了 css动画,其中一部分正在改变div. 我从和到值使用.边界应该眨眼白色和蓝色,但我得到了浅蓝色. 我建造了一个最小片段来证明这一点.知道我做错了什么? 在 .switch { width: 100px; height: 100px; border: 5px solid white; -webkit-animation: switch-animation 2s steps(2, start) infinite; animation: switch-animation 2s steps(2, start) infinite; } @keyframes switch-animation { from { border-color: white; } to { border-color: blue; } } @-webkit-keyframes switch-animation {
16 2024-04-02
编程技术问答社区
使用css3或jquery制作背景图像动画?
任何人都可以帮助我如何在此网站上像这样的背景图像 http://breakpoint-sass.com/ 在"信用"部分中,背景图像似乎在移动,我不知道它是在使用CSS3还是JQuery. 并且是否有有关如何执行或通过使用插件的教程. 非常感谢. 解决方案 只是一个简单的演示BG Sprite Image http://jsbin.com/ohulok/1/edit var c = 0 ; function loop(){ c = ++c%5; $('#bird').css({backgroundPosition: (240*c)+'px 0px'}); } setInterval(loop, 42); 信息:如果您想要〜42(41.666ms)的24fps费率 http://jsbin.com/ohulok/7/edit 强>
8 2024-03-27
编程技术问答社区
罕见的IE10错误。在有多个背景和百分比的情况下,背景-位置的CSS动画失效
这是一个非常具体的错误 - 但是,我希望有人向我展示解决方法!该错误基本上是IE10组成的,当满足这两个条件同时: 时,无法进行background-position的CSS动画. 有多个背景 设置background-position in百分比 这是一个演示,将Chrome与IE10进行比较: http://codepen.io/dalgard/pen/pen/pen/liyik 解决方案 您需要在零之后放置一个百分比. 一定是这样: @keyframes move { 0% { background-position: 0%, 0%; } 100% { background-position: 0%, 100%; } }
用CSS3旋转背景图片
我有一个背景图像,其箭头指向右侧.当用户单击按钮时,所选状态更改箭头以向下指向(使用我的图像精灵中的不同背景位置). 是否有使用CSS3对此进行动画操作,因此单击按钮并将其分配为"选定"类,它将在动画(仅90度)中旋转,从右到下方? (最好使用指向右侧的箭头使用单个图像/位置) 我不确定是否需要使用变换或关键动画帧. 解决方案 您可以使用::after(或::before)pseudo-element,生成动画 div /*some irrelevant css */ { background:-webkit-linear-gradient(top,orange,orangered); background:-moz-linear-gradient(top,orange,orangered); float:left;padding:10px 20px;color:white;text-shadow:0 1px black; fon
14 2024-03-27
编程技术问答社区
如何通过CSS3动画来淡化背景图片
我正在制作一个菜单,每个项目都有诸如item1,item2和等文本等.在悬停背景颜色变化,文本变为透明和替换背景图像中.我使用此代码简化了样式.但它仅适用于背景颜色,而不适用于图像. #nav li:hover { color:transparent !important; text-shadow: none; background-color: rgba(255, 0, 0, .5); -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -o-transition: all 1s ease-in; -ms-transition: all 1s ease-in; transition: all 1s ease-in; } 这是在线版本: http://jsfiddle.net/q4uhz/ 解决方案 背景图像无法动画;将
2 2024-03-27
编程技术问答社区
用CSS3动画改变背景图片
为什么这不起作用?我在做什么错? CSS @-webkit-keyframes test { 0% { background-image: url('frame-01.png'); } 20% { background-image: url('frame-02.png'); } 40% { background-image: url('frame-03.png'); } 60% { background-image: url('frame-04.png'); } 80% { background-image: url('frame-05.png'); } 100% { background-image: url('frame-06.png'); } } div { float: left; width: 200px; height: 200px; -webkit-
10 2024-03-27
编程技术问答社区
使用CSS无限地移动多个背景
我有两个背景: body { background-image: url(img/nemo.png),url(img/ocean.png); } 如何使nemo.png background从左右移动,但不影响ocean.png background? 编辑:当他到达正确的边缘(不再可见图像)时,他将再次从左边出现,并从左到右开始进行漂移. 解决方案 这可以使用纯CSS 3来完成"> keyframed动画: 演示: http://jsfiddle.net/dghs/dghsv/112 body { background-image: url("http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif"), url("http://images2.layoutsparks.com/1/200022/ocean-dreams-blue-wave
2 2024-03-26
编程技术问答社区
LESS CSS 将混合器作为一个参数传递给另一个混合器
是否有任何方法可以将一种混合或样式的声明作为输入参数? 让我们看一个使用动画键框的示例.以下是我们在纯CSS中定义密钥帧的方式: @-moz-keyframes some-name { from { color: red; } to { color: blue; } } @-webkit-keyframes some-name { from { color: red; } to { color: blue; } } @keyframes some-name { from { color: red; } to { color: blue; } } 想法是使用Mixins简化这些声明,因此我们可以拥有以下内容: .keyframes(name, from, to) { // here we need somehow to reproduce structure // that we have in an
34 2024-03-03
编程技术问答社区
CSS 从右到左 @keyframes transform:-100% to transform none
我面临难以找到导致问题的困难.感谢您的帮助.在网站中,我将HTML文本方向右至左设置,因为网站上的阿拉伯语网站.并且有CSS动画都正常运行.除了以下条件: 当HTML文本方向右至左时,我在移动设备上浏览该网站.或使用Google Chrome中的设备切换选项. 当页面加载时,它将加载在DIV上,该DIV设置为-100%,而不是在内容和DIV上加载-100%的DIV到页面中的MID.这使整个网页都来自正确的幻想.我不知道如何解决我正在考虑的视口的移动设备,但找不到解决方案. 这是网页的代码 RTL TEST SITE .animated { animation-duration: 1s; animation-fill-mode: both; }
32 2024-02-26
编程技术问答社区
如何通过CSS覆盖在重复的无限动画之间添加延迟
我从 这是一个现场示例动画图像如何保持重复的方式很快. 我希望能够应用class =" delay4",例如,如果我希望在动画发生后有4s延迟.然后在那4s之后,动画将重复. 我可以轻松地将CSS覆盖到我的主题中,因此这是最好的选择,因为我使用的是CDN. 奖金!如果我还可以为动画指定持续时间,那将是理想的选择.即,某些动画发生得如此之快,我认为如果它们放慢了一点,它们可能看起来更好. 解决方案 我对此有两个解决方案,纯粹是基于自定义的CSS,另一个是Animate.css +基于JQuery. CSS解决方案: 在 img { animation: shake 5s; animation-iteration-count: infinite; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 2% { transform:
22 2024-02-26
编程技术问答社区
如何在css动画中循环播放一组动画,即每行跳动一次?
我正在对一组DIV进行弹跳效果,使每个弹跳都使用动画延迟进行一次反弹.我想在最后一行动画完成后立即重复该序列,请在此问题上帮助我.找到下面的代码.我所做的是计算了动画延迟的总数,并将其设置为动画持续时间,但是迭代似乎是在很大程度上进行的.如何确保最后一行动画完成后立即重复迭代? //style.css .detail-container .row { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-duration: 35s; animation-duration: 35s; -webkit-animation-fill-mod
26 2024-02-26
编程技术问答社区
基于滚动的动画在定义区域外工作
所以我对JS非常新.我正在尝试将卷轴动画仅在指定区域工作仅在定义的帧中工作. 有什么想法我如何解决这个问题? 这就是它的外观(这是钢铁侠头盔,赦免未完成的站点):这是我正在使用的代码: 在 $(document).ready(function() { //variable for the 'stroke-dashoffset' unit var $dashOffset = $(".path").css("stroke-dashoffset"); //on a scroll event - execute function $(window).scroll(function() { //calculate how far down the page the user is var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(w
14 2024-02-26
编程技术问答社区
Css3关键帧循环滑块?
人们怎么了..我一直在这个奇妙的CSS3关键框架上训练自己. 我已经看过几种关于用100%CSS制造的滑块的方法,但我正在寻找不同的东西. 我要做的是一个滑块,该滑块同时移动其所有图片(用户都可以看到它们时,当他们移动时,当第一张图片离开可见度时,例如(左侧) ,它应该来自右边,而其他图片也相同.直到地球停止:d. 我想做的是可以理解的吗?但是我不知道该怎么做. 请给一只手! 感谢您的帮助. 这是一些代码:
16 2024-02-26
编程技术问答社区
停止CSS3关键帧动画
我已经为 动画了一个div div{ animation-name:moveit; animation-duration:2s; } @keyframes moveit{ 0%{ top:0; } 100%{ top:400px; } } 此动画从top 0px中移动到2sec 2sec. 现在问题是动画结束时,它返回到top=0 ...我希望动画结束时,它应该保留在top=400px>; 上. 它没有重复,而是回到其原始位置,但我希望它保持在100% 解决方案 要坚持动画的末端状态,您可以为您的Div元素提供初始属性. div { top: 400px; animation-name: moveit; animation-duration: 2s; } @keyframes moveit { 0% { top: 0px; } 100% { top: 400px; } }
46 2024-02-26
编程技术问答社区
CSS动画:只有在我停止盘旋之后,返回DIV到其原始位置
我希望我的div停止徘徊后返回其原始位置.但是回报始于我什至开始在运行代码后悬停在DIV上并立即悬停. 我只需要在停止徘徊后才执行反向动画. 在 Page Title div { width: 100px; height: 100px; padding: 2px; background-color: lightblue; color: White; font-size: 40px; text-align: center; vertical-align: middle; display: table-cell; } div:hover { animation: moveDiv 10s linear infinite; animation-play
48 2024-02-26
编程技术问答社区
悬停上的CSS关键帧动画--随鼠标移动重设动画
请参阅下面的代码,以获取悬停的简单键帧动画. 在 .behind { width: 200px; height: 200px; background: red; position: absolute; } .infront { width: 200px; height: 200px; background: blue; position: absolute; } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } } .infront:hover { animation: fadeOutLeft 2s; }
12 2024-02-26
编程技术问答社区