文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >动画CSS列和SVG

问动画CSS列和SVG
EN

Stack Overflow用户
提问于 2015-04-30 20:00:27
回答 1查看 124关注 0票数 0

我试图在CSS中发挥作用，使两列相邻的svg成为产品的说明和一些文本，比如描述。所以他们“滑入”，我想用很多产品来做。但我完全被困住了。

第一:布局。我不能垂直对齐这两列( svg和文本)，也不能使它们足够接近对方。

第二:动画。动画完成后，文本将消失，但仅在浏览器中，而不是在dreamweaver的活动模式中。

我的完整代码在这里：http://pastebin.com/MkA7AQxA

我知道这可以被认为是两个不同的问题，应该单独张贴，但也许问题是相关的。

非常感谢你的帮助，因为我很着急。

​

代码语言：javascript
复制
#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);}       
 }
代码语言：javascript
复制
 <div id="wrapper" >
   
       
     
        <ul id="bote" data-position="left" class="animBlock">
        <li class="animBlock_left">
         <svg   x="0px" y="0px"
    viewBox="0 0 3000 3000" enable-background="new 0 0 2400 2400" >
         <g>
        <g>
                <path fill="#BCBEC0" d="M153.1,1489.8c0,14,11.4,25.4,25.4,25.4H509c13.9,0,25.4-11.4,25.4-25.4v-406.9H153.1V1489.8z"/>
                <path fill="#D1D3D4" d="M447.8,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
                        c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
                <path fill="#D1D3D4" d="M363,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
                        c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
                <path fill="#D1D3D4" d="M278.2,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
                        c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
                <path fill="#D1D3D4" d="M193.4,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
                        c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
        </g>
        <path fill="#A7A9AC" d="M539.4,1019.2h-121v-13.1c0-7-5.7-12.7-12.7-12.7h-124c-7,0-12.7,5.7-12.7,12.7v13.1H148
                c-7,0-12.7,5.7-12.7,12.7v38.3c0,7,5.7,12.7,12.7,12.7h391.4c7,0,12.7-5.7,12.7-12.7v-38.3C552.1,1024.9,546.4,1019.2,539.4,1019.2
                z"/>
</g>
</svg>
        </li>
                           <li id="boteTxt" data-position="right" class="animBlock_right">
          <h3>The New Product</h3>
          <p>some deescription about the product</p>
       </li>
   </ul>
        </div>

​

svg
css-animations
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-05-01 03:07:19

问题1: SVG周围空间过大

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

代码语言：javascript
复制
<svg viewBox="135 994 417 522" ...

问题2:在浏览器中无法工作的动画

你有没有可能在Chrome或Safari中进行测试？CSS动画还没有最终完成，所以您仍然需要在-webkit-和@keyframes属性上使用CSS前缀。请注意，您还需要为Firefox提供无前缀版本。

​

代码语言：javascript
复制
#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);}       
 }
代码语言：javascript
复制
<div id="wrapper" >
   
       
     
        <ul id="bote" data-position="left" class="animBlock">
        <li class="animBlock_left">
         <svg   x="0px" y="0px" viewBox="135 994 417 522" >
         <g>
        <g>
                <path fill="#BCBEC0" d="M153.1,1489.8c0,14,11.4,25.4,25.4,25.4H509c13.9,0,25.4-11.4,25.4-25.4v-406.9H153.1V1489.8z"/>
                <path fill="#D1D3D4" d="M447.8,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
                        c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
                <path fill="#D1D3D4" d="M363,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
                        c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
                <path fill="#D1D3D4" d="M278.2,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
                        c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
                <path fill="#D1D3D4" d="M193.4,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
                        c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
        </g>
        <path fill="#A7A9AC" d="M539.4,1019.2h-121v-13.1c0-7-5.7-12.7-12.7-12.7h-124c-7,0-12.7,5.7-12.7,12.7v13.1H148
                c-7,0-12.7,5.7-12.7,12.7v38.3c0,7,5.7,12.7,12.7,12.7h391.4c7,0,12.7-5.7,12.7-12.7v-38.3C552.1,1024.9,546.4,1019.2,539.4,1019.2
                z"/>
</g>
</svg>
        </li>
                           <li id="boteTxt" data-position="right" class="animBlock_right">
          <h3>The New Product</h3>
          <p>some deescription about the product</p>
       </li>
   </ul>
        </div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/29976771

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档