CSS3常用动画

最新推荐文章于 2024-04-03 02:18:32 发布

wx_lidysun

最新推荐文章于 2024-04-03 02:18:32 发布

阅读量819

点赞数

分类专栏： HTML/CSS 文章标签： css3 动画

本文链接：https://blog.csdn.net/lidysun/article/details/51982248

版权

HTML/CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

渐变缩放圆圈

<style>
.circle{
    position: relative;
    z-index:1;
    margin:400px auto;
    height:2px;
    width:2px;
    background:#2095ff;
    border-radius:50%;
    animation:circle .7s linear infinite; /*infinite使动画无线循环*/
}
.circle span{
    position: absolute;
    z-index:0;
    top:-1px;
    left:-1px;
    height:4px;
    width:4px;
    background:#2095ff;
    border-radius:50%;
    animation:span .7s linear infinite;
}
@keyframes circle{  /*circle 小--特大--大，透明-不透明--透明*/
    0% {transform:scale(0.1);opacity:0;}
    50% {transform:scale(1.5);opacity:1;}
    100% {transform:scale(1);opacity:0;}
}
@keyframes span{  /*span 小--较大，不透明--透明*/
    0% {transform:scale(0.1);opacity:1;}
    100% {transform:scale(1.2);opacity:0;}
}
</style>
<body>
    <div class="circle"><span></span></div>
</body>

css3圆环转盘

infinite：持续动画；
linear ：匀速动画；

<style>
.circle{height:100px;width:100px;border:100px solid;border-left-color:red;border-right-color:green;border-top-color:yellow;border-bottom-color:purple;border-radius:50%;margin:100px auto;
}
.circle.move{
    animation:rotate 1s infinite linear;
    -moz-animation:rotate 1s infinite linear;
    -webkit-animation:rotate 1s infinite linear;
    -o-animation: rotate 1s infinite linear;
}
@keyframes rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
@-webkit-keyframes rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
@-moz-keyframes rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
@-o-keyframes rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
</style>

<div class="circle move"></div>