css3 实现五角星 |css拉伸动画

.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: red;
transform: rotate(35deg);
margin-right: 10px;
}
.star::before {
position: absolute;
display: inline-block;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-right-color: red;
transform: rotate(-35deg) translate(0, -10px);
}
.star::after {
position: absolute;
display: inline-block;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-right-color: red;
transform: rotate(35deg) translate(0, -10px);
}

以上代码就是实现五角星的核心代码，大家需要定义一个class来代表五角星的样式，再通过:before和:after伪类来对五角星进行修饰。

在样式定义中，大家使用border属性来定义五角星的形状，使用transform属性来旋转星星的位置，使用translate属性来调整星星的偏移量，从而帮助大家精准控制五角星的位置及大小。

最终，大家通过HTML文件将五角星的class设置为元素的class属性值即可将五角星展示在页面中。

总之，CSS3是一种十分有用的前端开发语言，它可以让大家轻松实现各种炫酷效果。希望大家能够善加利用！