css3实现定位的动画
使用到的css3的属性:
border-radius:
rgba():
box-shadow:
transform:
animation:
执行的效果:
1.编写布局代码
<!--背景布局-->
<div id="box">
<!-- 定位动画 -->
<div class="location"></div>
</div>
2.添加背景样式
<style>
#box {
width: 400px;
height: 400px;
background: green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
}
.location{
position: relative;
margin: 60px;
}
/*背景图片*/
.location::after{
/*相对于父亲location定位*/
position: absolute;
content: ' ';
width: 40px;
height: 20px;
border-radius: 100%;
background: rgba(255,255,255,0.3);
}
</style>
3.添加定位的图片
/*定位的图标*/
.location::before{
position: absolute;
top: -25px;
left: 8px;
content: '';
width: 25px;
height: 25px;
box-shadow:0px 0px 0px 2px rgba(255,255,255,1); /*模糊尺寸2px*/
}
执行的效果:
4.定位图片加圆角
/*定位的图标*/
.location::before{
position: absolute;
top: -25px;
left: 8px;
content: '';
width: 25px;
height: 25px;
box-shadow:0px 0px 0px 2px rgba(255,255,255,1); /*模糊尺寸2px*/
/*圆角*/
border-radius: 100% 100% 100% 0px;
}
执行效果:
5.旋转定位图片
/*定位的图标*/
.location::before{
position: absolute;
top: -25px;
left: 8px;
content: '';
width: 25px;
height: 25px;
box-shadow:0px 0px 0px 2px rgba(255,255,255,1); /*模糊尺寸2px*/
/*圆角*/
border-radius: 100% 100% 100% 0px;
/*旋转*/
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
执行效果:
6.定位图片添加上下移动的动画
/*定位的图标*/
.location::before{
/*...*/
/*...*/
/*动画*/
-webkit-animation: upAndDown 1s infinite linear;/*Chrome 16+, Safari 4+*/
-moz-animation: upAndDown 1s infinite linear;/*FF 5+*/
-o-keyframes: upAndDown 1s infinite linear;/* Opera */
-ms-keyframes: upAndDown 1s infinite linear;/*IE 10+*/
animation: upAndDown 1s infinite linear;
}
/*Chrome 16+, Safari 4+*/
@-webkit-keyframes upAndDown{
0% {top: -25px;}
50%{top: -20px;}
100% {top:-25px; }
}
/*FF 5+*/
@-moz-keyframes upAndDown{
0% {top: -25px;}
50%{top: -20px;}
100% {top:-25px; }
}
/* Opera */
@-o-keyframes upAndDown{
0% {top: -25px;}
50%{top: -20px;}
100% {top:-25px; }
}
/*IE 10+*/
@-ms-keyframes upAndDown{
0% {top: -25px;}
50%{top: -20px;}
100% {top:-25px; }
}
/*IE*/
@keyframes upAndDown{
0% {top: -25px;}
50%{top: -20px;}
100% {top:-25px; }
}
执行效果: