CSS3 @keyframes规则

最新推荐文章于 2023-09-13 07:49:21 发布

110susie

最新推荐文章于 2023-09-13 07:49:21 发布

阅读量171

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43127471/article/details/102808590

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.div1
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	from {top:0px;}
	to {top:200px;}
}
.div2
{
	width:100px;
	height:100px;
	background:blue;
	position:relative;
	margin-left:200px;
	animation:mymove 1s infinite;
	-webkit-animation:mymove2 5s infinite; 
	}

@keyframes mymove2
{
	0%   {top:0px;}
	25%  {top:200px;}
	75%  {top:50px}
	100% {top:100px;}
}
.div3
{
    width:100px;
    height:100px;
    background:green;
    position:relative;
    margin-left:400px;
    animation: myfish1 10s ease 1s infinite alternate;
    }
@-webkit-keyframes myfish1{
    /* 写法一 用from {} to{} */
    /* from{margin-top: 0;}
    to{margin-top: 200px;} */
    /* 写法二  用百分比*/
    0%{margin-left: 0;}
    25%{margin-top: 100px;transform: rotate(20deg) scale(0.4);}
    50%{margin-left: 200px;margin-top: 0px;transform: rotate(20deg);}
    75%{margin-left: 300px;margin-top: 200px;transform: rotate(20deg) scale(0.4);}
    100%{margin-left: 400px;margin-top: 0;}
}
</style>
</head>
<body>

<p><strong>注意:</strong>  @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.</p>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

110susie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 @keyframes规则

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .div1{ width:100px; height:100px; background:red; positio...
复制链接

扫一扫

专栏目录