今天练手了一个简单的小案例，就是手指hover住菜单的时候，菜单旁边的小箭头旋转180度。
用到了
transform变形中rotate()旋转
和
transition过渡中animation动画
的知识点。
怎么让鼠标hover住的时候箭头
不会变回原样
呢，这时要使用属性：
animation-fill-mode
属性规定动画在播放之前或之后，其动画效果
是否可见
。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>动画练习1</title>
<style>
body{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: darkcyan;
.wrapper{
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: sandybrown;
.wrapper img{
width: 30px;
height: 30px;
.wrapper:hover img{
animation:move 1s;
animation-fill-mode:forwards;
@keyframes move {
transform: rotate(0deg);
100%{
transform: rotate(180deg);
</style>
</head>
<div class="wrapper">
<img src="./image/jiantou.png" alt="">
</body>
</html>
一个会
旋转
的
箭头
图标
##灵感：##
之前见到一位国外的大牛写了一个类似的效果：,我还翻译了他对该项目的介绍:, 功底不是太厚，翻译的不是很到位，但大致可以明白其基本的过程。
但是，自己当时就是觉得写的太复杂，而且还用到了Adobe Illustrator。由于最近自己在学习跟canvas有关的内容，所以忽然来了灵感，就写下了这个效果。
##原理：##
代码其实很简单，主要就是用到canvas。然后，主要的原理就是：相对坐标系的概念，即代码中的
旋转
的坐标系（顿时高大上有木有，嘻嘻），
欢迎大家：star，fork...
另外 ：##
自己的另一个相似的效果： ;
首先，我们先完成二级
菜单
。二级
菜单
用jQuery很容易便可以实现。
先来看看jQuery代码，其中注释是我刚刚添上去的，希望能帮助大家理解：
$(document).ready(function(){
// 二级导航的展开与收缩
.taobao:hover i{
transform: rotate(
180
deg);
/*在transform属性中，使用rotate选装属性，使其图标
旋转
180
度
，deg是单位，和
度
类似，取值为0~360*/
transition: all 0.6s;
/*在transition属性中，设置它变化之间的时间，第一个值是
无标题文档b{right:10px;top:7px;width:0;height:0;border-width:4px 4px;border-style:solid;border-color:#666 #f5f5f5 #f5f5f5;font-size:0;line-height:0;-webkit-transition:-webkit-transform .2...
使用transition和transform:rotate(）来实现点击
箭头
让他转动一定的角
度
。 <i class="fas fa-chevron-right setfont right1" ></i> .right1{
margin-right: 0px;
margin-left: 37px;
transition: all 0.3s ease...
