新加坡北京切换动画

最新推荐文章于 2023-07-19 23:39:38 发布

黎成诃月

最新推荐文章于 2023-07-19 23:39:38 发布

阅读量148

点赞数

分类专栏：前端-javaScript

本文链接：https://blog.csdn.net/weixin_40292626/article/details/81661570

版权

前端-javaScript 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<style>
*{
   margin: 0;padding: 0;
}
header{
   margin: 100px;
}
#start,#end{
   display: inline-block;
   border: 1px solid #ccc;
   padding: 10px;
   border-radius: 10px;
   width: 100px;
   text-align: center;
}
#toggle{
   margin: 0 50px;
}
.move_right{

   position:relative;
   animation:myfirst1 0.3s linear;
}
@keyframes myfirst1
{
   0% {left:0px; opacity: 1;}
   50% {left:100px; opacity: 0.2;}
   100% {left:200px; opacity: 1;}
}
.move_left{
   position:relative;
   animation:myfirst2 0.3s linear;
}
.silent_stt
{
   position:relative;
}

@keyframes myfirst2
{
   0% {left:0px; opacity: 1;}
   50% {left:-100px; opacity: 0.2;}
   100% {left:-200px; opacity: 1;}
}
</style>
<body>
<header>
<span id="start">北京</span>
<input type="button" value="切换" id='toggle' οnclick="toggle()" />
<span id="end">新加坡</span>
</header>
</body>
<script>

   function toggle(){
           var startText=document.getElementById('start').innerHTML;
   var endText = document.getElementById('end').innerHTML;
   var start=document.getElementById('start');
   var end = document.getElementById('end');
   start.className = 'move_right';
   end.className = 'move_left';
   setTimeout(
       function()
       {
           start.className = 'silent_stt';
           end.className = 'silent_stt';
           start.innerHTML=endText;
           end.innerHTML=startText;
       }
       , 300);
   }