小编Joz*_*men的帖子

CSS3 Box阴影大小 - 单位百分比?

我正在开发一个需要使用CSS3 box-shadow属性的项目.这没关系,但我发现阴影的扩散大小不能设置为父对象的百分比.

我完全理解box-shadow不是附加的,因此它不会将parent的大小作为参考.

但考虑到我需要具有完全响应的站点,其中对象流畅地缩放(不仅在断点处),这会产生问题 - 我只能以绝对单位(em或px)设置阴影扩展属性.

这有什么解决方案吗?我想过在容器内使用内部容器(用于内容)(对于"阴影" - 它没有模糊),但这会产生另一个问题 - 内部容器的垂直居中.

有解决方案吗 请不要jQuery,只是纯CSS.

谢谢

css percentage box-shadow

36
推荐指数
3
解决办法
2万
查看次数

CSS3动画:继承关键帧的属性为0%

我有以下问题:我想使用带有关键帧规则的CSS3动画(@keyframes myname {})

问题是,我想对多个元素使用SINGLE规则关键帧动画,但这些元素各有不同的位置.因此,@ keyframes动画应该在0%(或来自{})规则下继承选择器的原始属性,因此动画将源于选择器的原始位置和大小.

像这个:

@keyframes myanim {
  0% {
    left: inherit;
    top: inherit;
width:inherit;
height:inherit;
  }

  100% {
top: 50%;
left:50%;
    width: 100%;
    height: 60%;
  }
}
Run Code Online (Sandbox Code Playgroud)

和选择器:

.myselector-one {
top:10em;
left:0em;
width:10em;
height:5em;
animation: myanim 1s;
}
.myselector-two {
top:20em;
left:30em;
width: 15em;
height: 8em;
animation: myanim 1s;
}
Run Code Online (Sandbox Code Playgroud)

目标是获取每个选择器的原始属性,将它们作为原始位置和大小放置到0%关键帧,并为每个选择器设置相同属性的100%动画.

这是可能的还是我必须为每个选择器创建动画?问题是,我不知道它们的位置,因为它将被动态计算.

请,没有jQuery解决方案,只有纯CSS3一个!我不想使用jQuery动画方法.

inheritance animation css3

6
推荐指数
1
解决办法
2995
查看次数

标签 统计

animation ×1

box-shadow ×1

css ×1

css3 ×1

inheritance ×1

percentage ×1