纯CSS3动画之左右翻转

来源：互联网发布：java字符串前后去空格编辑：程序博客网时间：2024/05/22 03:48

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

代码如下：

<!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>

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

阅读全文

0 0