cs3s简单动画

来源：互联网发布：飞豆打印软件注册码编辑：程序博客网时间：2024/06/08 09:35

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<linkrel="stylesheet" type="text/css"href="css/head.css">

</head>

<body>

<divclass="muso">

</div>

<divclass="music">

</div>

</body>

</html>

.music{

width:400px;

height:150px;

margin: 0 auto;

margin-top:200px;

}

.music span{

width:9px;

height:100%;

background:pink;

display:inline-block;

border-radius:4px;

animation:code1.2s ease infinite;

}

.musicspan:nth-child(2){

animation-delay:0.2s;

}

.musicspan:nth-child(3){

animation-delay:0.4s;

}

.musicspan:nth-child(4){

animation-delay:0.6s;

}.musicspan:nth-child(5){

animation-delay:0.8s;

}

@keyframes code{

0%,100%{

height:40px;

background:pink;

}50%{

margin-top:-30px;

height: 60px;

background:#B8B1F4;

}

@keyframes muso{

form{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

.muso{

margin:0 auto;

width:250px;

height:250px;

border-radius:100%;

border-top:8pxsolid #F7C3C3;

border-left:8pxsolid #F7C3C3;

border-right:8pxsolid #B8B1F4;

border-bottom:8pxsolid #B8B1F4;

animation:muso2s linear 0s infinite;

}

.times p{

text-align:center;

margin-top:-91px;

font-family: '微软雅黑';

color:#6252F2;

}

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>圆形钟动画</title>

<linkrel="stylesheet" type="text/css"href="css/index.css" />

</head>

<body>

<divclass="second"></div>

</div>

<divclass="hed"></div>

</body>

</html>

@keyframes minute{

form{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

@keyframes second{

form{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

/*设置圆形:宽高居中边框定位背景 border-radius*/

.time{

width:150px;

height:150px;

margin:0auto;

border-radius:60%;

position:relative;

border:3pxsolid pink;

background:pink;

margin-top:80px;

}

/*设置分钟:长方形宽高背景定位 animation name duration秒数linear匀速 ease慢速*/

.minute{

width:4px;

height:45px;

background:#fff;

position:absolute;

left:71px;

top:39px;

animation:minute 3600s linear 0s infinite;

transform-origin:5px bottom;

}

.second{

width:4px;

height:74px;

background:#fff;

position: absolute;

left:-1px;

top:-30px;

animation: second 60s linear 0s infinite;

transform-origin: 3px bottom;

}

/*第二个形状*/

.hed{

width:280px;

height:280px;

margin:0auto;

border-radius:30%;

position:relative;

border:5pxsolid pink;

background:url(../images/zjk.PNG);

margin-top:100px;

}

.hed:hover{

width:300px;

background:pink;

animation:width5s linear 0s infinite;

}

阅读全文

0 0