Question

我尝试在点击链接时重新创建以下效果（点击此页面上的其中一种颜色以查看我的意思：http://flatuicolors.com）。

过渡是这样的：带有成功消息的叠加层缩小并淡入，暂停，然后向外扩展并淡出。

但是，它没有产生预期的效果。更重要的是，缩放根本不可见。非常感谢任何帮助。

html, body { height: 100%; }
.container { 
    position: relative;
    margin: 0 auto; }
.container.questionnaire { 
    background:#f1c40f; 
    width: 100%;
    max-width: 100%;
    height: 100%;
}
.row-flex.buttons-only { 
    height:100%;}
.row-flex {
    display: table;
    width: 100%; } 
.column { 
    box-sizing: border-box; }
.one-third-flex.column {
    width: 33.3333%; 
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    float: none; }
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
     display: table;
    background-color:#1abc9c;
    z-index: 10;
}
h1.success-message { display: table-cell; text-align: center;
    vertical-align: middle;}

.animated { 
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
} 

@-webkit-keyframes fadeOut { 
    0% {visibility:visible; opacity: 1;transform: scale(2);} 
    40% {opacity: 1;transform: scale(1.5);} 
    60% {opacity: 1;transform: scale(1.5);} 
    100% {visibility:hidden; opacity: 0;transform: scale(1);} 
} 
@keyframes fadeOut { 
    0% {visibility:visible; opacity: 1; transform: scale(2);} 
    40% {opacity: 1;transform: scale(1.5);} 
    60% {opacity: 1;transform: scale(1.5);} 
    100% {visibility:hidden;opacity: 0; transform: scale(1);} 
} 
.fadeOut { 
    -webkit-animation-name: fadeOut; 
    animation-name: fadeOut; 
}

<body>
    
  <div class="overlay animated fadeOut"><h1 class="success-message">Success</h1></div>
  <div class="container questionnaire">
    <div class="row row-flex buttons-only">
        <div class="one-third-flex column"></div>
        <div class="one-third-flex column" style="background-color: #f4f4f4;">
            <div role="button" class="ico-btn btn-settings-lg"><a href="#">CLICK</a>
            </div>
        </div>
        <div class="one-third-flex column"></div>
      </div>
  </div>
</body>

Answer 1

嗯，我希望这个答案可以帮到你。

正如我认为那是一个有趣的效果（用flash创建），我从头开始用css3和jquery创建它。我更容易做我的代码，试图修改你的代码，这就是为什么它可能对你没用，但也许对其他用户可能有用。

html很简单：

<div class="square ">
 </div>
 <div class="effect ">
<div class="text">TEXT HERE</div>
 </div>

其中square是要点击的区域，effect是动画的容器，这是一个高度和宽度为0的div，位于窗口的中心，以防您想添加更多内容动画（使其“增长”或缩小）。

还有一些简单的jquery：

$('. square).click(function () {
    $('. effect).addClass("animation");
    $('.text').addClass("text-effect");
    setTimeout(function () {
        $('. effect).removeClass("animation");
        $('.text').removeClass("text-effect");
    }, 1500); 
});

在点击时将一个类添加到effect和text，并在动画完成后将其删除

然后在一些基本的CSS样式之后，我为effect制作了动画：

.animation {
     animation-name: background;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    }
@keyframes background {
    0%   {height:100%; width:100%; opacity:1}
    80% {height:100%; width:100%; opacity:1}
    99.999% {height:100%; width:100%; opacity:0}
    100% {height:0; width:0; opacity:0}
}

对于text，我刚刚使用过渡：

.text {
    background-color:rgba(255,255,255,0.6);
    width:100%;
    text-align:center;
    font-size:50px;
    color:#fff;
    font-weignt:bold;
    text-shadow: 1px 1px 0 #000000;
    font-family:arial;
    padding:20px 0;
    transition:all 0.2s linear;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    transition:all 0.2s linear;
}

.text-effect {
    padding:10px 0;
    font-size:40px;
}

所有toguether并添加8个不同颜色的正方形：

<强> JSFIDDLE

并且，正如我在上面所写的那样，背景逐渐消失和缩小

@keyframes background {
    0%   {height:100%; width:100%; opacity:1}
    80% {height:100%; width:100%; opacity:1}
    100% {height:0; width:0; opacity:0}
}

<强> JSFIDDLE2

CSS缩小和淡化效果

1 个答案: