项目新版本会在“拼写错误卡片”有新功能引导展示，用户可以点击引导上方的关闭 icon，或者点击切换其他任何卡片实现引导的关闭，引导的样式设计运用了 CSS 实现动画、边框三角形
同心圆动画
项目新版本的新功能引导的样式如下：
需要用 css 实现同心圆向外扩大，颜色透明度变低的动画，先复习一遍animation的属性有：
- name 动画名：同 @keyframes 后面的关键帧名
- duration 动画的持续时间（秒）
- timing-function 动画的过渡类型：linear、ease（默认）、ease-in、ease-out
- delay 动画延迟时间（秒）
- iteration-count 循环次数：infinite（默认无限次执行）、可指定具体次数
- direction 是否反向运动：normal（默认，正常播放）、reverse（反向）
- play-state 动画的状态：running（默认）
代码如下：
<body>
<div class="container">
<div class="item">
<div class="ring"></div>
<div class="ring"></div>
<div class="ring"></div>
</div>
</div>
</body>
* {
margin:0;
padding:0;
}
.container {
position:relative;
width:100%;
height: 400px;
background-color: rgb(250, 250, 240);
}
.item {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
background-color: rgba(147, 167, 250, 0.6);
width:100px;
height:100px;
border-radius: 100%;
}
.ring {
position: absolute;
background-color: inherit;
height: 100%;
width: 100%;
border-radius: 100%;
-webkit-animation: pulsing 3s ease-out infinite;
animation: pulsing 3s ease-out infinite;
}
.ring:nth-of-type(1) {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.ring:nth-of-type(2) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
@-webkit-keyframes pulsing {
100% {
transform: scale(1.75);
opacity: 0;
}
}
@keyframes pulsing {
100% {
transform: scale(1.75);
opacity: 0;
}
}
@keyframes后的pulsing是关键帧的名字，大括号里面是一系列动画规则，webkit表示这个动画效果只适用于webkit内核的浏览器。0%和100%表示这个动画从开始到结束。
其他关于 CSS 动画的详细内容整理在这里。
边框三角形
简单三角形
我们曾经认为 border 是由矩形边框组成。
.triangle {
width: 100px;
height: 100px;
border: 3px solid pink;
}
实际上，元素的border是由三角形组合而成，我们可以增大border的宽度，并为各border边设置不同的颜色：
.triangle {
width: 100px;
height: 100px;
border: 50px solid;
border-color: plum pink paleturquoise peachpuff;
}
再将div宽高置为0时：
.triangle {
width: 0px;
height: 0px;
border: 50px solid;
border-color: plum pink paleturquoise peachpuff;
}
可以看到，此时的元素由四个三角形拼接而成，我们可以只保留一边，将剩余三边的边框设置成透明色。
.triangle {
width: 0px;
height: 0px;
border-width: 100px 100px 100px 100px;
border-style: solid;
border-color: plum transparent transparent transparent;
}
边框三角形
采用绝对定位和相对定位来实现如下效果。
大三角形采用绝对定位，小三角形需要参照大三角形的位置，所以采用相对定位，之后利用相对定位的四个属性top、bottom、left、right来调整小三角形的位置。
.triangle1 {
width: 0px;
height: 0px;
border-width: 100px 100px 100px 100px;
border-style: solid;
border-color: plum transparent transparent transparent;
position: relative;
}
.triangle2 {
width: 0px;
height: 0px;
border-width: 90px 90px 90px 90px;
border-style: solid;
border-color: pink transparent transparent transparent;
position: absolute;
top: -100px;
left: -90px;
}
等边三角形
以上这些都是直角三角形，可以通过设置border-width来绘制等边三角形。
再将其他三个三角形设置为透明色
.triangle {
width: 0px;
height: 0px;
border-width: 80px 46px 12px 46px;
border-style: solid;
border-color: plum transparent transparent transparent;
position: relative;
}
复习完以上知识，就可以画边框三角形了
实际需求
代码：
<body>
<div class="container">
<div class="item">
<div class="read-float">
<p>
不常见的单词可以加入写作术语库啦，加入后不再提示为拼写错误
</p>
</div>
</div>
</div>
</body>
.container {
position:relative;
width:100%;
height: 400px;
background-color: rgb(250, 250, 240);
}
.read-float {
position: absolute;
top: 0px;
left: 0px;
right: 0;
bottom: 0;
margin: auto;
width: 268px;
height: 68px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
border: 2.5px solid rgba(77, 113, 255, 1);
}
.read-float::before {
content: '';
position: absolute;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 12px solid white;
border-bottom: 7px solid transparent;
top: 66px;
left: 119px;
z-index: 1;
}
.read-float::after {
content: '';
position: absolute;
top: 69px;
left: 117px;
border-left: 9px solid transparent;
border-right:9px solid transparent;
border-top: 12.5px solid rgb(77, 113, 255);
border-bottom:9px solid transparent;
}
p {
margin: 12px;
font-size: 14px;
line-height: 21px;
}
