Question

我试图让一个盒子（或圆圈）从中心扩展和收缩而不是左上角，但这对我来说不会发生。任何人都可以提出建议。

到目前为止，这是我的代码。

HTML

<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="css/expanding_box.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="BoxBreath"></div>
</body>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}
.BoxBreath {
    top:300px;
    left:300px;
    position:relative;
    background-color:#C0F;
    width:100px;
    height:100px;
    transform-origin:50% 50%;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction: alternate;
    animation-name: breath;
}
@keyframes breath {
    from {
        width:0px;
        height:0px;
        opacity:0;
    }
    to {
        width:100px;
        height:100px;
        opacity:1;
    }
}

非常感谢提前

Answer 1

您可以使用缩放而不是更改宽度和高度。这样，您可以删除transform-origin，它应该从中心出发。此外，根据您的需要，最好将关键帧分隔为百分比，并将持续时间加倍：

@keyframes breath{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
  50% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
}

使用其他关键帧的优势在于，您可以将50％更改为65％，以获得更好的呼吸效果，或者添加另一个关键帧，以便在“呼吸”之间暂停。

以下是一切，包括对不同浏览器的支持：

的 JSFiddle

.BoxBreath{ position: relative; top: 300px; left: 300px; width: 100px; height: 100px; background-color: #C0F; animation: breath linear 2s infinite; -webkit-animation: breath linear 2s infinite; -moz-animation: breath linear 2s infinite; -o-animation: breath linear 2s infinite; -ms-animation: breath linear 2s infinite; } @keyframes breath{ 0% { opacity:0; transform: rotate(0deg) scaleX(0) scaleY(0) ; } 50% { opacity:1; transform: rotate(0deg) scaleX(1) scaleY(1) ; } 100% { opacity:0; transform: rotate(0deg) scaleX(0) scaleY(0) ; } } @-moz-keyframes breath{ 0% { opacity:0; -moz-transform: rotate(0deg) scaleX(0) scaleY(0) ; } 50% { opacity:1; -moz-transform: rotate(0deg) scaleX(1) scaleY(1) ; } 100% { opacity:0; -moz-transform: rotate(0deg) scaleX(0) scaleY(0) ; } } @-webkit-keyframes breath { 0% { opacity:0; -webkit-transform: rotate(0deg) scaleX(0) scaleY(0) ; } 50% { opacity:1; -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ; } 100% { opacity:0; -webkit-transform: rotate(0deg) scaleX(0) scaleY(0) ; } } @-o-keyframes breath { 0% { opacity:0; -o-transform: rotate(0deg) scaleX(0) scaleY(0) ; } 50% { opacity:1; -o-transform: rotate(0deg) scaleX(1) scaleY(1) ; } 100% { opacity:0; -o-transform: rotate(0deg) scaleX(0) scaleY(0) ; } } @-ms-keyframes breath { 0% { opacity:0; -ms-transform: rotate(0deg) scaleX(0) scaleY(0) ; } 50% { opacity:1; -ms-transform: rotate(0deg) scaleX(1) scaleY(1) ; } 100% { opacity:0; -ms-transform: rotate(0deg) scaleX(0) scaleY(0) ; } }

Answer 2

的 Demo

.BoxBreath { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background: #000; width: 50vw; height: 50vw; }

使用css和关键帧动画从中心展开html框

2 个答案: