对话框扇形跳动demo

最新推荐文章于 2020-10-04 19:25:51 发布
DIWUCH
最新推荐文章于 2020-10-04 19:25:51 发布
阅读量333
点赞数
分类专栏： css 文章标签： css3 css3动画
本文链接：https://blog.csdn.net/DIWUCH/article/details/79046606
版权
css 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
用纯CSS3做动画效果：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html,body,div,h1,a,ul,li,label,span,p{
     margin: 0;
     padding: 0;
}
body{
     font:12px/1.4 Arial,'Microsoft YaHei','Helvetica Neue','Myriad Pro', 'Hiragino Sans GB',  'WenQuanYi Micro Hei', sans-serif;
}
.container{
     width:50%;
     margin:200px auto;
}


.container1{
     margin:0 0 0 300px;
     width:200px;
     height:50px;
     background-color: #6495ED;
     color:white;
     line-height:50px;
     border-radius: 5px;
    
     transform-origin: 100% 100%;
     -moz-transform-origin: 100% 100%;
     -webkit-transform-origin: 100% 100%;
     -o-transform-origin: 100% 100% ;
     -ms-transform-origin: 100% 100%;
    
     animation:myfirst 1s infinite linear;
     -moz-animation:myfirst 1s infinite linear; /* Firefox */
     -webkit-animation:myfirst 1s infinite linear; /* Safari and Chrome */
     -o-animation:myfirst 1s infinite linear; /* Opera */
}
<!-- .container1:hover{
     transform:rotate(9deg);
     -ms-transform:rotate(9deg); /* Internet Explorer */
     -moz-transform:rotate(9deg); /* Firefox */
     -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
     -o-transform:rotate(9deg); /* Opera */
} -->
@keyframes myfirst
{
0%   {transform:rotate(0deg);
     -ms-transform:rotate(0deg); /* Internet Explorer */
     }
50%   {transform:rotate(9deg);
     -ms-transform:rotate(9deg); /* Internet Explorer */
     }
100% {transform:rotate(0deg);
     -ms-transform:rotate(0deg); /* Internet Explorer */
     }
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {
     -moz-transform:rotate(0deg); /* Firefox */
     }
10%   {
     -moz-transform:rotate(9deg); /* Firefox */
     }
100% {
     -moz-transform:rotate(0deg); /* Firefox */
     }
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {
     -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
     }
10%   {
     -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
     }
100% {
     -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
     }
}

@-o-keyframes myfirst /* Opera */
{
0%   {
     -o-transform:rotate(0deg); /* Opera */
     }
10%   {
     -o-transform:rotate(9deg); /* Opera */
     }
100% {
     -o-transform:rotate(0deg); /* Opera */
     }
}


.container2{
     width:200px;
     height:50px;
     background-color: #FF7F50;
     color:white;
     line-height:50px;
     border-radius: 5px;
    
     transform-origin: 0% 100%;
     -moz-transform-origin: 0% 100%;
     -webkit-transform-origin: 0% 100%;
     -o-transform-origin: 0% 100% ;
     -ms-transform-origin: 0% 100%;
    
     animation:myfirst2 1s infinite linear;
     -moz-animation:myfirst2 1s infinite linear; /* Firefox */
     -webkit-animation:myfirst2 1s infinite linear; /* Safari and Chrome */
     -o-animation:myfirst2 1s infinite linear; /* Opera */
}

@keyframes myfirst2
{
0%   {transform:rotate(0deg);
     -ms-transform:rotate(0deg); /* Internet Explorer */
     }
50%   {transform:rotate(-9deg);
     -ms-transform:rotate(9deg); /* Internet Explorer */
     }
100% {transform:rotate(0deg);
     -ms-transform:rotate(0deg); /* Internet Explorer */
     }
}

@-moz-keyframes myfirst2 /* Firefox */
{
0%   {
     -moz-transform:rotate(0deg); /* Firefox */
     }
10%   {
     -moz-transform:rotate(-9deg); /* Firefox */
     }
100% {
     -moz-transform:rotate(0deg); /* Firefox */
     }
}

@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
0%   {
     -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
     }
10%   {
     -webkit-transform:rotate(-9deg); /* Safari 和 Chrome */
     }
100% {
     -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
     }
}

@-o-keyframes myfirst2 /* Opera */
{
0%   {
     -o-transform:rotate(0deg); /* Opera */
     }
10%   {
     -o-transform:rotate(-9deg); /* Opera */
     }
100% {
     -o-transform:rotate(0deg); /* Opera */
     }
}

.container3{
     margin:50px 0;
     width:100px;
     height:100px;
     background-color: #48D1CC;
     color:white;
     line-height:50px;
     border-radius: 50%;
    
     animation:myfirst3 5s linear;
     -moz-animation:myfirst3 5s linear; /* Firefox */
     -webkit-animation:myfirst3 5s linear; /* Safari and Chrome */
     -o-animation:myfirst3 5s linear; /* Opera */
}

@keyframes myfirst3
{
0%   {transform:rotate(0deg);
     -ms-transform:rotate(0deg); /* Internet Explorer */
     }
50%   {transform:rotate(360deg);
     -ms-transform:rotate(360deg); /* Internet Explorer */
     }
80%   {
     -ms-transform:translateX(100px); /* Firefox */
}
100% {transform:translateX(100px);
     -ms-transform:translateX(100px); /* Internet Explorer */
     }
}

@-moz-keyframes myfirst3 /* Firefox */
{
0%   {
     -moz-transform:rotate(0deg); /* Firefox */
     }
50%   {
     -moz-transform:rotate(360deg); /* Firefox */
     }
80%   {
     -moz-transform:translateX(100px); /* Firefox */
}
100% {
     -moz-transform:translateX(100px); /* Firefox */
     }
}

@-webkit-keyframes myfirst3 /* Safari and Chrome */
{
0%   {
     -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
     }
50%   {
     -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
     }
80%   {
     -webkit-transform:translateX(100px); /* Firefox */
}
100% {
     -webkit-transform:translateX(100px); /* Safari 和 Chrome */
     }
}

@-o-keyframes myfirst3 /* Opera */
{
0%   {
     -o-transform:rotate(0deg); /* Opera */
     }
50%   {
     -o-transform:rotate(360deg); /* Opera */
     }
80%   {
     -o-transform:translateX(100px); /* Firefox */
}
100% {
     -o-transform:translateX(100px); /* Opera */
     }
}
</style>
</head>
<body class="container">
     <div class="container1">我是旋转的小框框B啊O(∩_∩)O哈哈~</div>
     <div class="container2">我是旋转的小框框C啊O(∩_∩)O哈哈~</div>
     <div class="container3">我是旋转的小框框D啊O(∩_∩)O哈哈~</div>
</body>

</html>