纯CSS3动画之左右翻转

最新推荐文章于 2024-07-22 19:12:50 发布

爱编程的兔子

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量1.5w

点赞数 1

分类专栏： css3动画文章标签： css3 动画

本文链接：https://blog.csdn.net/wjnf012/article/details/78679131

版权

css3动画专栏收录该内容

9 篇文章 1 订阅

订阅专栏

不做多的解释，我们先看效果，然后上代码。
效果如下：
这里写图片描述

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
.test_wrap ul{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 10px;
    background: #ffffff;
}
.test_wrap li{
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding-right: 0.1rem;
    list-style-type: none;
    padding: 0 5px;
}
.test_wrap a{
    display: block;
    color: #ffffff;
    text-align: center;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 30px 0;
    background-color: #9a6ad8;
    -webkit-animation: proRotate 1s ease-in-out 500ms alternate none 1;
    animation: proRotate 1s ease-in-out 500ms alternate none 1;
}
@-webkit-keyframes proRotate { 
    0%{-webkit-transform:perspective(400px) rotateY(180deg);} 
    100%{-webkit-transform:perspective(400px) rotateY(0deg);} 
}
@keyframes proRotate { 
    0%{transform:perspective(400px) rotateY(180deg);} 
    100%{transform:perspective(400px) rotateY(0deg);} 
}
</style>
</head>
<body>
<div class="test_wrap">
    <ul>
        <li>
            <a href="#">测试一号</a>
        </li>
        <li>
            <a href="#">测试二号</a>
        </li>
        <li>
            <a href="#">测试三号</a>
        </li>
    </ul>
</div>
<body>
</html>

复制代码可直接运行查看效果

爱编程的兔子

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
纯CSS3动画之左右翻转

不做多的解释，我们先看效果，然后上代码。效果如下：代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{ padding: 0; margin: 0;}a{ text-decoration: none;
复制链接

扫一扫

专栏目录