利用CSS3关键帧动画（Keyframe Animation）实现元素的动态左右翻转效果

发布时间：2024-07-09 09:32:47 所属栏目：编程来源：DaWei

导读： 可以利用animation属性和“@keyframes”创建一个元素左右翻转的动画。动画中使用transform: scale(-1,1)控制元素左右翻转。

实现代码：

<!DOCTYPE html>
<html>
<hea

可以利用animation属性和“@keyframes”创建一个元素左右翻转的动画。动画中使用transform: scale(-1,1)控制元素左右翻转。

实现代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <style>
           div {
               width: 100px;
               height: 100px;
               background: red;
               margin: 100px;
               animation: mymove 5s infinite;
               -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
           }

           @keyframes mymove {

图文无关,原创配图

               50% {
                   transform: scale(-1,1);
               }
           }

           @-webkit-keyframes mymove{ /* Safari and Chrome */
               50% {
                   transform: scale(-1,1);
               }
           }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>

以上就是CSS3实现元素的动态左右翻转效果方法，本文只是提供了一种实现思路，代码仅供参考，需要的朋友可以了解看看，希望对大家学习CSS3的使用有帮助。

（编辑：草根网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!