漂浮的地图图标

制作一个漂浮的地图图标

思路：

我们可以将该动效拆成三部分来理解：
第一部分就是最外层的圆形，第二部分就是最下面的小角，第三部分就是中间的白色小圆

<template>
	<view class="">
		<view class="home">
		    <view class="land-mark"></view>
		</view>
	</view>
</template>

设置一个圆形

.land-mark{
            /*设置相对定位模式 作为绝地定位元素的父元素*/
    		position: relative;
    
            /*定义元素大小、外形*/
    		display: block;
    		border-radius: 50%;
    		width: 60rpx;
    		height: 60rpx;
    
           /*设置元素阴影*/
    		filter: drop-shadow(1rpx 1rpx 1rpx #ff8484);
    
            /*设置元素背景图样式*/
    		background-image: linear-gradient(0deg, red, #ff8484);
    
            /*设置元素动画效果*/
    		animation: jump infinite 3s linear;
    	}

利用CSS:before选择器，创建伪元素

.land-mark::before{
				content: '';
		        /*绝对定位元素*/
				position: absolute;
		
		        /*设置元素位置*/
				bottom: 0;
				left: 50%;
		
		        /*设置元素层级关系*/
				z-index: -2;
		
		        /*定义元素大小、背景色*/
				display: block;
				margin-left: -5px;
				width: 10px;
				height: 10px;
				background-color: red;
		
		        /*设置X轴缩放比例、旋转图形、调整Y轴位置*/
				transform: scaleX(1.3) translateY(2px) rotate(45deg)
			}

然后利用css::after元素

.land-mark::after{
					content: '';
			        /*绝对定位*/
					position: absolute;
			
			        /*设置元素位置*/
					top: 50%;
					left: 50%;
			
			        /*设置元素形状、大小、背景色*/
					display: block;
					margin-left: -5px;
					margin-top: -5px;
					width: 10px;
					height: 10px;
					border-radius: 100%;
					background-color: #FFFFFF;
			
			        /*设置元素内阴影样式*/
					box-shadow: inset 0 1px 0 rgba(0,0,0,0.4);
				}

最后添加动画

@keyframes jump {
			0%{
				transform: translateY(0px);
			}
			50%{
				transform: translateY(-10px);
			}
			100%{
				transform: translateY(0px);
			}
		}