css-transitions相关内容

带有边框半径和溢出隐藏的转换在 Safari 中不起作用

这可能是一个常见问题,但我找不到答案.理解这个问题的最好方法是看这个小提琴:http://jsfiddle.net/sxvjejvk/ 基本上我有一个带有 border-radius 和 overflow:hidden 的 div.div里面是一张图片.当我将鼠标悬停在 div 上时,我希望图像使用过渡进行缩放.但是,div 的边框半径会在动画期间中断(不再有圆角). 将 -webki ..
发布时间:2022-01-22 22:49:54 前端开发

使用 css3 进行图像替换和过渡?

我想知道是否有人知道如何在两个背景图像之间进行转换的聪明而新的方法?我知道那里有很多教程,只是其中大部分都过时了. 我想知道是否有一种聪明而现代的 CSS3 方式来做这样的事情. 我有一个简单的 logo.png 设置为 div.logo 的背景(我希望它不是通过 img src 设置为背景图像).当我将鼠标悬停在它上面时,我希望平滑过渡到“logo-hover.png",这是同一个文 ..
发布时间:2022-01-22 22:46:27 前端开发

如何播放反向关键帧动画以悬停?

我正在尝试构建一个下拉菜单,首先下拉菜单会向下滑动,然后从底部逐一显示菜单项.悬停时,它看起来不错,但我不知道如何在悬停时顺利播放.我要做的是先隐藏第二个子菜单项,然后是第一个子菜单项,然后下拉菜单向上滑动. 我尝试的是在默认情况下将隐藏动画关键帧添加到下拉列表中,并在悬停时添加显示动画,延迟为 0.但是你可以看到它不能正常工作.(它也会在页面加载时动画,这对我不利) ul li ul { ..
发布时间:2022-01-22 22:46:11 前端开发

链接悬停导致 background-size: cover;在 Chrome 中切换

使用 CSS3,我将背景图片设置为封面.首次在 Chrome 中加载页面并将鼠标悬停在链接上时,文本周围的背景会发生轻微变化(但非常明显).我正在为悬停使用过渡,但背景偏移也会随着过渡的移除而发生. 我的猜测是背景在悬停期间正在调整大小,但我不确定如何防止这种情况发生.移动后,您可以毫无问题地翻转其他链接.刷新页面后,问题依旧. 网站在这里:http://tylerbritt.com/ ..
发布时间:2022-01-22 22:37:29 前端开发

用于离开悬停的 CSS 伪类

我的网站上有一个不错的小悬停效果,当用户悬停在链接上时,它会快速过渡.但是当用户将鼠标悬停在盒子上时,阴影(和其他特征)会立即消失,而不是淡出.有没有办法让属性同时淡入和淡出,也许使用某种 :un-hover 类型的伪类?谢谢!如果有帮助,这里是 CSS 块: a.squares:hover, a.squares:active {颜色:黑色;背景颜色:#E8E8E8;盒子阴影:0 0 12px ..
发布时间:2022-01-22 22:37:19 前端开发

CSS:在悬停时替换文本,但平滑过渡到新文本不起作用?

场景: 如果用户将鼠标悬停在文本(例如 h1 标记)上,它应该会更改为新文本.新文本应该看起来很流畅. 到目前为止我做了什么: 我能够用“display:none"和“content: 'This is the new text'"属性替换一个新文本.我的问题是新文本出现不流畅(它不会淡入/过渡).我也尝试过使用不透明度,但它不会替换我的旧文本(相反,它只是消失了,新文本出现在它 ..
发布时间:2022-01-22 22:35:31 前端开发

悬停时旋转或旋转图像

我想了解如何在悬停时制作旋转或旋转图像.我想知道如何在以下代码中使用 CSS 模拟该功能: img {边界半径:50%;} 解决方案 您可以使用 CSS3 过渡和 rotate() 来在悬停时旋转图像. 旋转图片: img {过渡:转换 .7s 缓进出;}图像:悬停{变换:旋转(360度) ..
发布时间:2022-01-22 21:56:58 前端开发

想要在旋转时显示元素的厚度

我通过 CSS 将一枚硬币沿 Y 轴旋转 90 度.有没有办法让我可以在硬币旋转后显示硬币的厚度,我想我可以在硬币沿 Y 轴旋转后缩放 Y,但这似乎不起作用.如果可能的话,请提出一些方法来做同样的事情.link_on_js fiddle 同样.请使用 webkit 浏览器打开链接. css .coin {显示:块;背景:url(“url-to-image-of-coin.jpg");背景尺 ..
发布时间:2022-01-16 14:10:21 前端开发

使用单个 DOM 元素修复了响应式顶部导航/关闭画布导航

让我们先把这些问题排除在外(建立在 Foundation响应式框架): Fiddle 1:一个导航​​元素,但当侧导航滑出时变得不固定 Fiddle 2:工作但有多个导航 好吧,我一直在绞尽脑汁尝试为以下问题开发优雅的解决方案: 1) 制作响应式、固定导航,在较小的屏幕尺寸(类似于 Facebook 应用)上从顶部拉伸切换到滑出侧面 2) 我想使用相同的 DOM 元素 ..

每 30 秒更改一次背景颜色(淡入淡出过渡)

我希望有人告诉我使网页背景颜色(整个页面的背景颜色)每 30 秒更改一次(淡入淡出过渡)到给定颜色种类的代码是什么.简单吗?我想css会让它更容易吗? 我在互联网上进行了搜索,但只找到了我不想要的渐变.先感谢您.我搜索了 codepen 和 jsfiffle 的例子,但没有人有这么简单的东西:/ 示例:在浏览我的页面时,我希望背景颜色从蓝色变为绿色,然后变为橙色,再变为蓝色,依此类推. ..
发布时间:2022-01-08 13:27:16 前端开发

CSS3背景图片过渡

我正在尝试使用 CSS 过渡制作“淡入淡出"效果.但我无法让它与背景图片一起使用...... CSS: .title a {显示:块;宽度:340 像素;高度:338px;颜色:黑色;背景:透明;/* 过渡 */-webkit-transition:背景1s;-moz-transition:背景1s;-o-transition:背景1s;过渡:背景1s;}.title a:悬停{背景:透明 ..
发布时间:2022-01-08 12:30:46 前端开发