用CSS3编写:div旋转90度 0.5秒后变圆 0.5秒后放大2倍

发布网友发布时间：2022-04-06 11:12

共1个回答

热心网友时间：2022-04-06 12:41

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body{
padding:0;
margin:0;
width:100%;
height:100%;
}
.demo{
width:100px;
height:100px;
background:#ff6600;
margin:100px auto;
transition:transform 0.5s, border-radius 1s, height 2.5s, width 2.5s;
-moz-transition:-moz-transform 0.5s, border-radius 1s, height 2.5s, width 2.5s ; /* Firefox 4 */
-webkit-transition:-webkit-transform 0.5s,border-radius 1s, height 2.5s, width 2.5s; /* Safari and Chrome */
-o-transition:-o-transform 0.5s, border-radius 1s, height 2.5s, width 2.5s; /* Opera */
}
div.demo:hover{
width:200px;
height:200px;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
transform:rotate(90deg);
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/
}
div.demo2
{
width:100px;
height:100px;
margin:200px auto;
background:red;
animation:myfirst 2s linear 2s infinite alternate;;
-moz-animation:myfirst 2s linear 2s infinite alternate;; /* Firefox */
-webkit-animation:myfirst 2s linear 2s infinite alternate;; /* Safari and Chrome */
-o-animation:myfirst 2s linear 2s infinite alternate;; /* Opera */
}

@keyframes myfirst
{
0% {background:red;}
50% {
transform:rotate(90deg);
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/}
75% {
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;}
100% {
width:200px;
height:200px;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
50% {
transform:rotate(90deg);
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/}
75% {
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;}
100% {
width:200px;
height:200px;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
50% {
transform:rotate(90deg);
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/}
75% {
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;}
100% {
width:200px;
height:200px;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;}
}

@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
50% {
transform:rotate(90deg);
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/}
75% {
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;}
100% {
width:200px;
height:200px;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;}
}
</style>
</head>

<body>
<div class="demo"></div>
<div class="demo2"></div>
</body>
</html>

用了css3两种效果一种过渡demo 一种动画demo2