当父体被转换时,边界上不需要的轮廓。
我在某些内容上使用边框.但是,我发现不需要的1px概述与当父转换时在边界周围添加background颜色相同(至少使用scale>和rotate).这也发生在儿童的伪元素上 .container { transform:rotate(-45deg); } .child { border:3px solid white; background:green; } jsfiddle与 一起工作 我已经在最新的Chrome上进行了测试,即两个问题都在 上. 如何不使用box-shadow或删除转换? 如何摆脱此轮廓? 解决方案 添加translatez(1px) .container { position:absolute; top:50%; left:50%; -webkit-transform:translateZ(1px) rotate(-45deg); transform:rotate(-45d
6 2024-04-02
编程技术问答社区
悬停效果:展开底部边框
我正在尝试获得边界对边界的过渡悬停效应,边界会扩展在悬停. h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ''; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: left 250ms ease-in-out, right 250ms ease-in-out; opacity: 0; } h1:hover:after { opacity: 1; } CSS IS AWESOME 我已经在 jsfiddle 上尝试过. 解决方案 展开悬停的底部边框,您可以使用transform:scaleX();( mdn参考),并在悬停状态下从0到1. 这是边界悬停效应的示例: 边框和过渡
4 2024-04-02
编程技术问答社区
子项上的CSS比例变换不影响父项的大小
我的组件太大,我想将其缩小.我可以通过比例转换来做到这一点,但是父容器不适合. 在我的真实代码中,带有缩小-ME类的DIV实际上是一个角度日历组件,但是此简化 repo 再现相同的效果.我不能仅仅扩展包装父级div,因为我需要使用Bootstrap列网格类来容纳此示例中省略的对象.我在这里错过了一个简单的CSS属性吗? 在 .parent { background-color: green; } .parent .child-object { height: 10em; background-color: red; } .sibling { background-color: yellow; } .SHRINK-ME { transform: scale(.80) translate(-12.5%, -12.5%); }
2 2024-04-02
编程技术问答社区
CSS 80's TRON网格
我想通过CSS构建" 80年代的Tron Grid"效果,但我遇到了一些我想要的问题的问题. 类似 this . 我的要求: 淡出透明的1侧 将其包装到一个不错的.class上,以戴上任何 我已经对此进行了2次尝试. 80的网格#1(伪选择器) https://codepen.io/oneeeezy/pon/pen/pen/pen/pen/pen/mpen/mpqwbe 尽管这效果很好,但每次我想要效果时,将10 的s放在我的HTML中并不理想. 在 body { background: black; } .grid-container { position: absolute; width: 200%; height: 100vh; bottom: 0; left: -50%; overflow: hidden; transform: perspective(200px) rotateX(40
2 2024-03-27
编程技术问答社区
如何使用变换而不挤压内容来动画高度
在我的项目中,当用户单击按钮时,我一直在使用jQuery slideUp()在200项列表中滑动一个元素.但是,众所周知,动画CSS高度需要一个反流,使动画生动.该动画是应用程序不可或缺的一部分,我愿意进行大量工作以使其正常工作并顺利进行. 我已经决定CSS transform是使其正常工作的方式,因为它在GPU上进行了处理,并且在某些现代浏览器上,它甚至是主线程,而沉重的JS工作也不会影响转换. (我确实有沉重的JS工作). 我正在寻找使用CSS transition: transform的巧妙解决方案来复制jQuery slideUp,该解决方案只是为height属性而动画.以下是我的尝试,但似乎scale和translate不像预期的那样同步. 在 $("button").on("click", function() { $(".collapsible").addClass("collapsed") setTimeout(function() {
2 2024-02-26
编程技术问答社区
在CSS中把transform-origin移回到元素的中心位置
当CSS元素从其原始位置转换出来时,transform-origin不会与它们移动;使所有随后的变换和旋转仍然源于其原始transform-origin(下面的示例). 有一种我知道的方法……这就是继续在以前的转换中添加所有新变换.像这样:transform: translateY ( -5rem ) rotate( 45deg ) translateY( -10rem ) rotate( 15deg )...等.这似乎总是根据需要从当前元素的中心启动新变换. 问题 当您使用此技术基于用户输入转换元素时,您将不断地向DOM添加转换.占用大量记忆并引起其他不需要的滑动效果(可能). 这是一个动画,显示transform-origin在每个变换后如何移动到元素的中心: 'use strict'; function firstRotation() { var v = document.getElementById( 'v-wrp' ),
6 2024-02-26
编程技术问答社区
CSS动画-从中心开始生长(从中心点放大到整个容器)。
我正在研究游戏,我想为一些盒子做动画. 我希望一个盒子从小开始,然后向外生长,所有边缘同时生长,看起来它正从中心向外生长. 到目前为止,我拥有的最好的动画是以下内容:它可以根据需要增长盒子的高度和宽度,但从左侧和顶部开始.我希望它从中心点开始. 我看着W3上的动画属性,似乎没有任何适合船. .box_2_gen{ animation-duration: 0.25s; animation-name: createBox; position: relative; background: #FFEDAD; border: black solid; border-width: 1px; border-radius: 15px; width: 98px; height: 98px; margin: 10px; float: left; } @keyfram
20 2024-02-26
编程技术问答社区
跨浏览器的CSS3关键帧动画Firefox
我使用CSS3和KeyFrames对播放按钮具有简单的"脉动"效果. 虽然它在Chrome和Safari中完美无缺,但它似乎并没有在Firefox中工作.有人知道为什么吗? li > a { -webkit-animation: pulsate 3s ease-in-out; -moz-animation: pulsate 3s ease-in-out; -o-animation: pulsate 3s ease-in-out; animation: pulsate 3s ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infi
6 2024-02-26
编程技术问答社区
我如何给这艘宇宙飞船加速?
有一个非常小的类似小行星游戏的片段,我正在努力使用无帆布的DOM.当按下箭头键时,我的"船"移动非常顺利,但是当将箭头钥匙固定更长的时间时,我该如何加速船(以速度和旋转)加速? 在 window.onkeyup = function( e ) { var kc = e.keyCode; e.preventDefault(); if ( kc === 37 ) Keys.left = false; else if ( kc === 38 ) Keys.up = false; else if ( kc === 39 ) Keys.right = false; else if ( kc === 40 ) Keys.down = false; }; function update() { if ( Keys.up ) { document.querySelector( 'div' ).style.transform += '
6 2024-02-26
编程技术问答社区
动画转换只有一个属性(缩放),覆盖其他属性(平移)。
问题是transform属性的值具有多个零件,例如translate,scale等. 这是一个关于元素的理论问题,让我们的.loader具有transform:translate(10px, 10px),在动画中,我想为scale属性进行动画.在这种情况下,浏览器将不会采用transform:translate(10px, 10px),并且只需采用scale. 我正在寻找解决这个问题的方法. 这是这个问题的示例.请注意,我不是在寻找这个特定示例的答案(例如:包裹元素或在动画定义中添加translate值),而是一个通用解决方案(当然,如果存在). .loading { position: relative; width: 100px; height: 100px; background: #eee; } .loading:before, .loading:after { content: ""; width: 50%;
4 2024-02-26
编程技术问答社区
Safari SVG的原点转换缩放动画
我有一个正在动画的内联SVG,但是当您在浏览器中放大或输出时,正在旋转的对象不再在其中心旋转. 它在Chrome中正常工作. #rays { animation: spin 6s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; } @keyframes spin { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transform-origin: center center; transform-origin: center center; } to { -webkit-transform: rotate(0deg); transform: rotate(0deg)
18 2024-02-26
编程技术问答社区
变化被添加......无休止地添加
我正在使用Canvas上的DOM在CSS和JS中创建一个类似小行星的游戏,用于...实验目的. 在此示例中,我的代码很小,可以轻松查看下面发生的事情.最终目标是:让箭头键平稳旋转并在窗户周围转换太空飞船而不会产生无限数量的变换. 我认为我在那里90%: 使用箭头键控制下面的摘要. 'use strict'; function defineDistances() { var distance = {}; distance.up = -1; distance.right = 1; distance.down = 1; distance.left = -1; return distance; } function defineKeys() { var keys = {}; keys.up = 38; keys.right = 39; keys.down = 40; keys
8 2024-02-26
编程技术问答社区
如何在SVG中使用transform-origin?
我正在尝试从其中心旋转SVG path,但它不起作用 在 a { width: 40px; height: 40px; width: 40px; font-size: 1.5rem; padding: 1px; overflow: hidden; border: 1px solid black; } a:hover path { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } a path { transition: all .5s ease-in-out; transform-origin: center center
8 2024-02-26
编程技术问答社区
为棋盘游戏响应地映射自定义形状的HTML元素的好方法
我的问题是我没有弄清楚如何响应地对齐.我已经尝试使用大众/VH和%s,但是在不同的视图大小上都破坏了一致性.任何人都可以推荐一种锁定该板的直接方法吗? 我不想使用50多个空间的CPU排水管的多个帆布BC,并且不想使用图像映射,因为这没有响应. 嗨,伙计们,gal, 我试图通过Angular 1.x将棋盘游戏移植到HTML中.我有一个对象,每个木板空间都有一个空间,并通过绝对定位(顶部,左)给出一个位置,并制作了一个快速功能,以将所有属性获取转换属性中的所有属性,并返回一个CSS转换的字符串. 这是前几个空间的一个示例: 1: {color: colors.blue, origin:{top:'65%', left:'13%'}, tForm: {rotate:'-21deg'}}, 2: {color: colors.yellow, origin:{top:'66.5%', left:'8.5%'}, tForm: {rotate:'-35deg'}}, 3
4 2024-02-24
编程技术问答社区
创建一个有角度的CSS3分隔线-100% / 自动高度
我已经检查了这两个文章:与Angled Borders相邻的Divs? [重复] and 形状具有倾斜的侧面(响应)但是发布的解决方案不能适应容器的100%高度,我需要这个解决方案.我找不到适合我的方案的解决方案. 我正在尝试复制此行为.区别是该容器内部的文本可能具有任何高度,因此我需要角度和容器来适应任何高度(而不是固定高度容器): 这是我与JSFiddle一起使用的代码: https://jsfiddle.net/qzma0r6k/1/ CSS section { position: relative; color: #fff; } .diagonal:before { position: absolute; content:''; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 0
14 2024-02-20
编程技术问答社区
如何在移动设备上用CSS或Javascript平滑地制作高度动画
我正在开发用于移动设备的HTML5 Web应用程序,并在流畅的动画中遇到了一些麻烦. 本质上,当用户点击按钮时,抽屉(具有高度的DIV:0px)应为给定的高度(以像素为单位)进行动画,并且内容将附加到该抽屉上.如果您有一个Pinterest帐户,可以看到现在的动画,请访问 http://m.m.pinterest.com (点击注释或repin按钮). 不幸的问题是,在移动设备上,WebKit过渡并没有加速高度属性,因此它极度矮小,动画被锯齿状. 这是一些代码段: html : ... Comment
6 2024-02-02
编程技术问答社区
使用CSS或JS来回切换按钮过渡
我想创建一个按钮,该按钮在单击时在两个状态之间来回切换.当前,第一次点击过渡按钮成功到第二个状态,但是我无法在第二次点击时将按钮过渡到原始状态. 这是我的代码: 在 $('.popup_contact').on('click', function() { $(this).toggleClass('active'); }); .popup_contact { display: inline-block; min-height: 50px; height: auto !important; width: 100px; padding-top: 5px; text-align: center; font-size: 20px; font-weight: 800; background: #e8eaed; border: none; border-radius: 10px; color: #424e6
10 2024-01-17
编程技术问答社区
使用CSS3 "transform: scale "进行jQuery定位
jQuery与CSS"变换:scale()"的效果不佳 (但是,使用"变换:transpate()"它效果很好) 请看一下这个简单的例子: 在 $(document).ready(function() { $('#root').dblclick(function() { $('#box').position({ my: 'right bottom', at: 'right bottom', of: $('#root') }); }) $('#box').draggable({ containment: $('#root'), }); }); body { position: relative; margin: 0; } #root { position: absolute; top: 20px; left: 20px; wi
8 2024-01-16
编程技术问答社区
没有应用过渡的CSS3 rotateY
我正在寻找一种简单的方法来吸收对象并改变其旋转属性,而无需对其预设过渡动画. 这将有助于我完成此幻灯片表演(仅在Chrome或Safkari(WebKit)中查看) 这是效果的故障示例: CSS - 转变设置为5S 阶段1 element1 - rotatey:0; 元素2 - rotatey:-180; 用户 - 单击按钮 phase2 元素1 - rotatey:180; element2 - rotatey:0; 阶段3 元素1 - rotatey:-180; element2 - rotatey:0; 用户 - 单击按钮 阶段4 element1 - rotatey:0; 元素2 - rotatey:180; 第一次过渡后(阶段1和2)完成 element1 的旋转值,需要将其设置为-180,而无需过渡,以便它位于位置 element2 中在阶段1中.通过此动画将使元素看起来相互
10 2024-01-16
编程技术问答社区
悬停时增加尺寸而不改变其他元素的位置
假设我以squares的形式10 divs.让我们称其为home页面. 在这10个中, 3 divs有类.event1 5 divs有班级.event2 2 divs有类.event3 ....//3-times .... ....//5-times .... ....//2-times .... 盒子彼此旁边放置. 当我单击event1时,除了具有类event1的那些盒子时,所有盒子都会淡出.同样,对于所有课程.单击home时,所有盒子都会再次淡入.
10 2024-01-15
编程技术问答社区