Question

我正在尝试为我的网站制作类似于THIS示例的降临日历。

我已经创建了日历的基本布局，当我将鼠标悬停在日历上的一个“图块”上时，动画开始并且图块会打开。动画以时尚的方式摆动瓷砖，就好像你向你打开一扇门，它向前摆动90度。但是，当动画达到90度时，磁贴将重置为其原始关闭位置。

当用户将鼠标悬停在瓷砖上时，如何在用户从瓷砖上移除光标后再次关闭瓷砖时，如何保持门打开？

当磁贴打开时，我还需要在其后面有一个图像，它是指向我网站上另一个页面的可点击链接。我已将其设置为a，但所有显示的是我的.tile div的背景颜色（background-color：＃000;）而不是可点击的图像甚至是我的.back div。

任何人都可以帮忙。我附上了我当前的CSS和HTML，显示了如何创建和动画图块。

注意：在此示例中，我不需要处理来自移动设备的触摸事件。

CSS

.tile 
{
    background-color: #000;
    color: #ffffff;
    border: 1px solid #220001;
}

/* Flip the tile when hovered */
.tile:hover .flipper, .tile.hover .flipper 
{
    -webkit-animation: example 2s;
}

@-webkit-keyframes example 
{
    from 
    {
        -webkit-transform: perspective(500) rotateY(0deg);
        -webkit-transform-origin: 0% 0%;
    }
    to 
    {
        -webkit-transform: perspective(500) rotateY(-90deg);
        -webkit-transform-origin: 0% 0%;
    }
}

.tile, .front, .back 
{
    width: 120px;
    height: 120px;
}

.flipper 
{
    position: relative;
}

.front, .back 
{
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* Front Tile - placed above back */
.front 
{
    z-index: 2;
    transform: rotateY(0deg);
    background-color: #760805;
}

/* Back - initially hidden Tile */
.back 
{
    background-color: #000;
}

HTML

<table>
    <tr>
        <td>
            <div class="tile">
                <div class="flipper">
                    <div class="front">
                        <!-- front content -->
                        <p>December 1</p>
                    </div>

                    <div class="back">
                        <!-- back content -->
                        <a href="http://www.google.com">
                            <img src="images/myImage1.jpg">
                        </a>
                    </div>
                </div>
            </div>
        </td>
    </tr>  
</table>

Answer 1

而不是使用keyframes使用transition

（注意：我还添加了backface-visibility: true;并将旋转增加到-95deg以使效果更类似于您的示例）

.tile .front {
    transition: all 1.5s ease-in-out;
    -webkit-transform: perspective(500) rotateY(0deg);
    -webkit-transform-origin: 0% 0%;
    backface-visibility: visible;
}

.tile:hover .front, .tile.hover .front 
{
    -webkit-transform: perspective(500) rotateY(-95deg);
    -webkit-transform-origin: 0% 0%;
}

演示

.tile 
{
    background-color: #000;
    color: #ffffff;
    border: 1px solid #220001;
}

.tile .front {
    transition: all 1.5s ease-in-out;
    -webkit-transform: perspective(500) rotateY(0deg);
    -webkit-transform-origin: 0% 0%;
    backface-visibility: visible;
}

/* Flip the tile when hovered */
.tile:hover .front, .tile.hover .front 
{
    -webkit-transform: perspective(500) rotateY(-95deg);
    -webkit-transform-origin: 0% 0%;
}


.tile, .front, .back 
{
    width: 120px;
    height: 120px;
}

.flipper 
{
    position: relative;
}

.front, .back 
{
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* Front Tile - placed above back */
.front 
{
    z-index: 2;
    transform: rotateY(0deg);
    background-color: #760805;
}

/* Back - initially hidden Tile */
.back 
{
    background-color: #000;
}

<table>
    <tr>
        <td>
            <div class="tile">
                <div class="flipper">
                    <div class="front">
                        <!-- front content -->
                        <p>December 1</p>
                    </div>

                    <div class="back">
                        <!-- back content -->
                        <a href="http://www.google.com">
                            <img src="http://placehold.it/120x120">
                        </a>
                    </div>
                </div>
            </div>
        </td>
    </tr>  
</table>

如何在HTML和CSS中停止动画

1 个答案: