玩一个动态CSS 复制到页面直接运行

来源：互联网发布：淘宝代付退款几天到账编辑：程序博客网时间：2024/06/03 17:28

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<div class="box">
<h1>hello my zone</h1>
</div>

<style>
.box{
width: 150px;
height: 100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}
h1{
font-size: 20px;
color: chartreuse;
animation-name:mysecond;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:mysecond;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:mysecond;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:mysecond;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;

}
@keyframes mysecond{
0% {font-size: 10px; color: black;}
25% {font-size: 20px;color:aliceblue;}
50% {font-size: 30px;color:cyan;}
75% {font-size: 20px;color:darkmagenta;}
100% {font-size: 10px;color:darkmagenta;}
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;font-size: 10px; color: black;}
25% {background:yellow; left:200px; top:0px;font-size: 20px;color:aliceblue;}
50% {background:blue; left:200px; top:200px;font-size: 30px;color:cyan;}
75% {background:green; left:0px; top:200px;font-size: 20px;color:darkmagenta;}
100% {background:red; left:0px; top:0px;font-size: 10px;color:darkmagenta;}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;font-size: 10px;}
25% {background:yellow; left:200px; top:0px;font-size: 20px;}
50% {background:blue; left:200px; top:200px;font-size: 30px;}
75% {background:green; left:0px; top:200px;font-size: 20px;}
100% {background:red; left:0px; top:0px;font-size: 10px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;font-size: 10px;}
25% {background:yellow; left:200px; top:0px;font-size: 20px;}
50% {background:blue; left:200px; top:200px;font-size: 30px;}
75% {background:green; left:0px; top:200px;font-size: 20px;}
100% {background:red; left:0px; top:0px;font-size: 10px;}
}

@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;font-size: 10px;}
25% {background:yellow; left:200px; top:0px;font-size: 20px;}
50% {background:blue; left:200px; top:200px;font-size: 30px;}
75% {background:green; left:0px; top:200px;font-size: 20px;}
100% {background:red; left:0px; top:0px;font-size: 10px;}
}
</style>
<script type="text/javascript" id="c_n_script" src="//cdn.sojson.com/js/common/canvas-nest.min.js" color="22,22,22" opacity="0.5" zindex="-2" count="200"></script>

</body>
</html>

阅读全文

0 0