支付宝扫码
领取余额宝体验金

轻云博客 > CSS3日记 > 1. @keyframes 规则

1. @keyframes 规则

作者:Aisencici / 日期:2017-3-23 15:55:00 / 分类:CSS3日记 / 浏览:797

1. @keyframes 规则

          文字跟着区域走

<html>

<head>

<style> 

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

}


span

{  

position:relative;

animation:mymove1 5.3s infinite;

-webkit-animation:mymove1 5.3s infinite; /* Safari and Chrome */

}


@keyframes mymove

{

0%   {top:0px; left:0px; background:red;}

25%  {top:50px; left:200px; background:blue;}

50%  {top:100px; left:0px; background:yellow;}

75%  {top:0px; left:0px; background:green;}

100% {top:200px; left:0px; background:red;}

}

 

@keyframes mymove1

{

0%   {top:0px; left:0px; background:red;}

25%  {top:50px; left:200px; background:blue;}

50%  {top:100px; left:0px; background:yellow;}

75%  {top:0px; left:0px; background:green;}

100% {top:200px; left:0px; background:red;}

}

</style>

</head>

<body>

<div></div>

<span>我在跟踪他 </span>

</body>

</html>



本文标签:
From:
分享到: