html5 – CSS缩小和淡出效果

2019年7月22日 242次阅读

我试图在单击链接时重新创建以下效果(单击此页面上的一种颜色以查看我的意思：
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>

最佳答案 好吧,我希望这个答案可以帮到你.

我认为这是一个有趣的效果(使用flash创建),我已经使用css3和jquery从头开始创建它.我更容易做我的代码,试图修改你的代码,这就是为什么它可能对你没有用,但也许它可能适用于其他用户.

html很简单：

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

square是要点击的区域,效果是动画的容器,这是一个高度和宽度为0的div,位于窗口的中心,以防你想要添加更多动画(以使其“增长”或缩小).

还有一些简单的jquery：

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

添加一个类来实现效果和文本点击并在动画完成后删除它

然后在一些基本的CSS样式之后我制作了动画效果：

.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 {
    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

点赞