详细解析：uni-app|vue组件实现漂浮的地标图标纯CSS动效

前言

“不务正业”的小凡又来了！(*^▽^*) 今天，我来跟大家分享一个漂浮的地标图标动效，做出来的效果就像一个🎈一样，在页面中飘飘忽忽的，很显眼的，放到页面中大概率能启到吸引人们注意的目的。一起来看一下，它是如何实现的吧！(*￣︶￣)

---

一、效果展示及思路分析

1.效果展示

 这是地标图标的样子，漂浮？嗯......O(∩_∩)O 嘿嘿，就让小凡我偷懒一次吧，(*^▽^*) 大家可以做出来自己看一下效果哦！

2.思路分析

我们可以将该动效拆成三部分来理解：

第一部分就是最外层的圆形，第二部分就是最下面的小角，第三部分就是中间的白色小圆

有了思路，我们就可以开始写代码了。

二、实现步骤

1.准备工作

在正式开始写代码之前，需要先下载相应的IDE，以及进行必要的配置工作。

小凡在【uni-app项目|vue组件形式实现的科技感loading纯CSS动效】文章中详细讲解过如何进行必要的配置工作，这里就不再重复讲解了，大家可以点击右侧链接查看→科技感Loading动效详解

2.代码实现

（1）在home.vue应用启动页中添加一个布局，引入并注册自定义vue组件，在模版中使用自定义vue组件

<template>
	<view class="home">
		<view><Landmark></Landmark></view>
	</view>
</template>

<script>
	import Landmark from '@/components/Landmark.vue'
	export default {
		components:{
			Landmark
		}
	}
</script>

<style scoped>
	.home{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-template-rows: repeat(3,1fr);
		height: 100vh;
		justify-items: center;
		align-items: center;
		max-width: 800px;
		margin: 0,auto;
	}
	.home>view{
		transform: scale(1.5);
	}
</style>

 （4）编写自定义vue组件Landmark.vue

说明：样式代码并没有考虑浏览器兼容问题，本代码的测试环境是谷歌浏览器。

• 在模版代码块中，添加uni-app提供的view组件元素（类似于HTML中的div）并设置class属性为land-mark（嗯嗯，没错！依然是熟悉的“味道”，简单到极致，只有一个view元素，通过CSS样式就能实现我们想要的动效！）

<template>
	<view class="lank-mark"></view>
</template>

• 设置view元素的样式

.land-mark{
        /*设置相对定位模式 作为绝地定位元素的父元素*/
		position: relative;

        /*定义元素大小、外形*/
		display: block;
		border-radius: 100%;
		width: 30px;
		height: 30px;

        /*设置元素阴影*/
		filter: drop-shadow(0 1px 1px #973340a3);

        /*设置元素背景图样式*/
		background-image: linear-gradient(0deg, red, #ff8484);

        /*设置元素动画效果*/
		animation: jump infinite 2s ease;
	}

• 利用CSS:before选择器，创建伪元素（给圆形图标下面加一个“小胡子”）

分析：创建一个正方形图形，利用transform属性，将元素X轴稍微放大一些，顺时针旋转45度，最后适当调整下元素Y轴位置，OK！一个小胡子就成功添加到圆形的下方了！ 

.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选择器，创建伪元素（圆形中间的白点，做出挖空效果）

.landmark::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: white;

        /*设置元素内阴影样式*/
		box-shadow: inset 0 1px 0 rgba(0,0,0,0.4);
	}

• 添加CSS3动效

说明：伪元素中添加的animation属性与@keyframes一起使用，从而实现不同的动画效果，0%表示开始动画，100%表示结束动画，当然我们还可以在中间设置新的关键帧，例如：在0%和100%中间再设置一个50%。我们可以利用transform属性的translateY()方法，分别在关键帧上改变一下元素在Y轴的位置就可以了。

.landmark{
		......

        /*添加动画效果*/
		animation: jump infinite 2s ease;
	}

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

---

 总结

 

怎么样？做出来的效果大家都看到了吧，原谅我的懒惰 O(∩_∩)O，好啦，下面我们来简单总结下这个动效中的知识点：

• uni-app项目中如何设置应用启动页，如何创建自定义vue组件以及如何在应用启动页中使用自定义vue组件
• 编写自定义vue组件中用到了“相对定位与绝对定位”、border-radius、background-image: linear-gradient()、z-index
• 重点理解并灵活运用transform属性里面的 scaleX()、translateY()、rotate()三个方法
• 添加CSS3动效时用到的animation属性以及@keyframes规则

以上就是本文中用到的知识点，小凡还得啰嗦两句，这个动效本身并不难理解，稍微有一点点绕的地方应该就是如何给圆形下面做一个“小胡子”。如果不了解CSS中的transform属性中的方法，小凡觉得实现起来还是有点麻烦的，所以，要想有好的创意就必须要有足够的技能，本文分享的动效就再一次证实了这句话！所以啦，小凡还是要和大家一起“努力学习，天天进步” (*^▽^*)

如果喜欢小凡的这篇文章，记得点赞、收藏和分享哦！也欢迎大家在评论区留言。

扫描二维码关注我的公众号，可以第一时间收到我的更新信息哦！

 相关文章推荐：

详细解析：uni-app|vue组件实现会撒娇的旗帜徽章纯CSS动效

详细解析：uni-app|vue组件实现跳动的心脏图标纯CSS动效