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

有一个相同的问题可是没有给正确答案求大神列出代码指导... 有一个相同的问题可是没有给正确答案求大神列出代码指导展开

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

haizizi12138
推荐于2018-03-11

知道答主

回答量：16

采纳率：0%

帮助的人：8.1万

我也去答题访问个人页

关注

展开全部

<!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


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

css div难学吗?满足大厂实习要求吗?

css div大厂讲师保姆级教学，过万学员检验，多端全栈面霸就业css div多年打磨铸经典，数万学员高口碑，专业助教团护航，行业领先人才培养方案

class.imooc.com广告

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

您可能关注的内容

其他类似问题

为你推荐：