我正在开发一个需要使用CSS3 box-shadow属性的项目.这没关系,但我发现阴影的扩散大小不能设置为父对象的百分比.
我完全理解box-shadow不是附加的,因此它不会将parent的大小作为参考.
但考虑到我需要具有完全响应的站点,其中对象流畅地缩放(不仅在断点处),这会产生问题 - 我只能以绝对单位(em或px)设置阴影扩展属性.
这有什么解决方案吗?我想过在容器内使用内部容器(用于内容)(对于"阴影" - 它没有模糊),但这会产生另一个问题 - 内部容器的垂直居中.
有解决方案吗 请不要jQuery,只是纯CSS.
谢谢
我有以下问题:我想使用带有关键帧规则的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动画方法.