animation实现弹弹框

最新推荐文章于 2024-07-10 10:14:49 发布

取一个好听的名字

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量174

点赞数

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/qq_36821119/article/details/84710561

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
div
{ 
width:20%;
height:20%;
position:relative;

animation: myfirst 30s infinite;
animation-direction:alternate;

-moz-animation: myfirst 30s infinite;	/* Firefox */
-moz-animation-direction:alternate;

-webkit-animation: myfirst 30s infinite;	/* Safari 和 Chrome */
-webkit-animation-direction:alternate;

-o-animation: myfirst 30s infinite;	/* Opera */
-o-animation-direction:alternate;

}
@keyframes myfirst
{
0%   {left:0%; margin-top:2%;}
50%  {left:80%; margin-top:15%;}
/*75%  {left:80%; margin-top:30%;}*/
100% {left:0%; margin-top:35%;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {left:0%; margin-top:2%;}
50%  {left:80%; margin-top:15%;}
/*75%  {left:80%; margin-top:30%;}*/
100% {left:0%; margin-top:35%;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {left:0%; margin-top:2%;}
50%  {left:80%; margin-top:15%;}
/*75%  {left:80%; margin-top:30%;}*/
100% {left:0%; margin-top:35%;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {left:0%; margin-top:2%;}
50%  {left:80%; margin-top:15%;}
/*75%  {left:80%; margin-top:30%;}*/
100% {left:0%; margin-top:35%;}
}
</style>
<body>

<div >
	<img src="ph1.png" width="100%" height="100%">
</div>
</body>
</html>

取一个好听的名字

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
animation实现弹弹框

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;style&gt; div{ width:20%;height:20%;position:relative;animation: myfirst 30s infinite;animation-direction:alte...
复制链接

扫一扫