slides.md

theme	background	class	highlighter	lineNumbers	info	drawings	transition	title
seriph	https://source.unsplash.com/collection/94734566/1920x1080	text-center	shiki	true	## Slidev Starter Template Presentation slides for developers. Learn more at [Sli.dev](https://sli.dev)	persist	slide-left	Welcome to Slidev

实现一个Emoji 3D 表情切换效果

---

transition: fade-out

--- transition: fade-out layout: two-cols ---

code示例

String.fromCodePoint(0x1f600) // 😀

---

transition: fade-out layout: two-cols

实现步骤

绘制基础文本

<template><div class="a">NVX</div></template>
<style>.a {color: #fff;background: #999;}</style>

NVX

添加文本阴影

<template><div class="b">NVX</div></template>
<style>.b {color: #999;background: #999;text-shadow: 1px 1px 1px #fff;}</style>

NVX

添加立体阴影效果

<template><div class="c">NVX</div></template>
<style>.c {color: #999;background: #999;text-shadow: 1px 1px 1px #fff, -1px -1px -1px #000;}</style>

NVX

---

transition: fade-in

Perspective 实现 3d动画 效果

---

transition: fade-in

绘制 3d emoji效果

---

transition: fade-in layout: codePreview

随机生成 Emoji 表情

const genCode = () => {
  const emojiStart = 0x1f600
  const emojiEnd = 0x1f64f
  const code = Math.floor(Math.random() * (emojiEnd - emojiStart)) + emojiStart
  return String.fromCodePoint(dode)
}

const code = genCode() // 得到一个随机的 emoji 表情

关键函数 Math.random

Math.random() 函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。

根据扩展 Math.random边界，则可以获得指定范围内的随机数

Math.random() * (max - min) + min // max 最大值， min最小值

// emoji 边界为 1f600 -> 1f64f
Matn.random() * (0x1f64f - 0x1f600) + 0x1f600 // 得到一个随机小数

// emoji对应的unicode编码应为整数，所以向下取整
Math.floor(Math.random() * (0x1f64f - 0x1f600)) + 0x1f600

---

transition: fade-in

随机生成 3D emoji 表情

---

transition: fade-in layout: baseCodePreview

添加底部椭圆阴影

// 绘制椭圆阴影

<div class="shadow"></div>

<style>
.shadow {
  width: 100px;
	height: 50px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .5);
  // 添加阴影渐变动画
		animation: shadow .6s alternate infinite ease-in-out;
}

@keyframes shadow {
	0% { scale: 1.2; }
	40% { opacity: .7; }
	100% { scale: .5; opacity: .4; }
}
</style>

<style> .shadow-box { height: 400px; display: flex; justify-content: center; align-items: center; } .shadow { width: 100px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, .5); animation: shadow .6s alternate infinite ease-in-out; } @keyframes shadow { 0% { scale: 1.2; } 40% { opacity: .7; } 100% { scale: .5; opacity: .4; } } </style>

---

transition: fade-in

---

transition: fade-in layout: End