Question

我正在尝试在CSS中产生一个效果，使两个列相邻，一个svg，它将是产品的一个例子，一些文本就像一个描述。所以他们＆＃34;滑入＆＃34;我想用很多产品做这件事。但我完全卡住了。

第一：布局。我不能垂直对齐两列（svg和文本），我不能让它们彼此足够接近。

第二：动画。动画完成后文本消失但仅在浏览器中消失，而不是在Dreamweaver的实时模式中消失。

我的完整代码在这里：post's

我知道这可以被认为是两个不同的问题，应该单独发布，但问题可能是相关的。

非常感谢你的帮助，因为我非常焦虑。

＆＃13;

test.cpp:16:11: error: definition or redeclaration of 'i' not allowed inside a function
    int foo::i = 0;

＆＃13;

#wrapper {
  margin: 2em auto;
  width:800px;
  position:relative;
  padding: 4rem 0;      
}
 
.animBlock {
  margin: 4rem -4rem 0 -2rem;
  padding: 0;
  list-style: none;
  column-count: 2;
                               
}
.animBlock li {
  position:relative;
  display: block;    
  padding: 0;
  margin: 0 2rem 2rem 0;
  text-decoration: none;
  break-inside: avoid;
   
}
 
.animBlock_left {
  animation-name: come_left;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
 
}
 
.animBlock_right {
  animation-name: come_right;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
 
}
 
 @keyframes come_left {
        0% {transform: translateX(-200px); opacity:0;} 
        100% {transform: translateX(0);}       
 }
 
 @keyframes come_right {
        0% {transform: translateX(200px); }    
        100% {transform: translateX(0);}       
 }

＆＃13;

Answer 1

问题1：SVG周围空间太大

这是因为你的NSButton绝对是巨大的。你的垃圾桶图像大约是417x522，但你的viewBox说它是3000x3000。所以第一步是解决这个问题：

viewBox

问题2：动画无法在浏览器中运行

您是否有机会在Chrome或Safari中进行测试？ CSS动画仍未最终确定，因此您仍需要在<svg viewBox="135 994 417 522" ...和-webkit-属性上使用animation前缀。请注意，您还需要具有Firefox的无前缀版本。

@keyframes

#wrapper {
  margin: 2em auto;
  width: 200px;
  position:relative;
  padding: 4rem 0;      
}
 
.animBlock {
  padding: 0;
  list-style: none;
  column-count: 2;
                               
}
.animBlock li {
  position:relative;
  display: block;    
  padding: 0;
  margin: 0 2rem 2rem 0;
  text-decoration: none;
  break-inside: avoid;
   
}
 
.animBlock_left {
  -webkit-animation-name: come_left;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;

  animation-name: come_left;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
 
.animBlock_right {
  -webkit-animation-name: come_right;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;

  animation-name: come_right;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
 

 @-webkit-keyframes come_left {
        0% {transform: translateX(-200px); opacity:0;} 
        100% {transform: translateX(0);}       
 }
 
 @-webkit-keyframes come_right {
        0% {transform: translateX(200px); }    
        100% {transform: translateX(0);}       
 }


 @keyframes come_left {
        0% {transform: translateX(-200px); opacity:0;} 
        100% {transform: translateX(0);}       
 }
 
 @keyframes come_right {
        0% {transform: translateX(200px); }    
        100% {transform: translateX(0);}       
 }

动画CSS列和SVG

1 个答案: