关于三角形的绘制,大家已经贡献过诸如将五角星切割成三个三角形来绘制等的更加标准简洁的画法,这篇文章权当抛砖引玉,为大家贡献一些不一样的思路吧,当然这个五角星的完成度也不是特别完美,有任何意见也欢迎大佬们在评论区讨论指正:)
首先让我们来看一下效果图:
想要绘制一个三角星,我们首先需要知道如何用css绘制三角形.
用css绘制三角星大家比较熟知的方法有四种,边框,引入icon,transform的rotate属性以及背景色渐变急停,这些方法都可以实现我们绘制三角形的目标,本文采用最广为人知,大家最了解的边框绘制法.
.star{
width: 0;
height: 0;
border-bottom: 59px solid transparent;
border-top:123px solid transparent ;
border-left:40px solid #f2d661 ;
border-right:40x solid transparent ;
}
四条边框的宽度可以按照自己的需求来调节,就可以得到自己想要的效果,获得各种各样不一样的三角形
得到基础三角形之后配合定位和旋转即可达到我们想要的效果,为其加上动画,这里的动画效果设计的是悬停旋转,大家也可以根据自己的需求进行调整,
/* 调用动画 */
.stara:hover{
animation: move 3s infinite ;
}
/* 定义动画 */
@keyframes move{
100%{
transform: rotate(1turn);
}
}
完整代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
/* 初始化样式 */
* {
margin: 0;
padding: 0;
}
/* 习惯性加版心,并且为所有元素添加相对定位元素ovo */
.w {
width: 1200px;
margin: 0 auto;
position: relative;
}
/* 五角星的父盒子 */
.stara {
position: absolute;
left: 0px;
top: 0px;
width: 325px;
height: 325px;
margin: 200px auto;
}
/* 调用动画 */
.stara:hover {
animation: move 3s infinite;
}
/* 定义动画 */
@keyframes move {
100% {
transform: rotate(1turn);
}
}
/* 第一个角-基础样式 */
.star-z {
width: 500px;
height: 500px;
position: absolute;
left: -85px;
top: -60px;
}
/* 第一个角的右瓣 */
.star {
position: absolute;
left: 240px;
top: -140px;
margin: 200px auto;
width: 0;
height: 0;
border-bottom: 59px solid transparent;
border-top: 123px solid transparent;
border-left: 40px solid #f2d661;
border-right: 40x solid transparent;
}
/* 第一个角的左瓣 */
.star01 {
position: absolute;
left: 160px;
top: -139px;
margin: 200px auto;
width: 0;
height: 0;
border-bottom: 59px solid transparent;
border-top: 123px solid transparent;
border-right: 40px solid #f3f9ae;
border-left: 40px solid transparent;
}
/* 第二个角 */
.star02 {
position: absolute;
left: -100px;
top: -60px;
transform: rotate(72deg);
}
/* 第三个角 */
.star03 {
position: absolute;
left: -108px;
top: -74px;
transform: rotate(144deg);
}
/* 第四个角 */
.star04 {
position: absolute;
left: -96px;
top: -85px;
transform: rotate(216deg);
}
/* 第五个角 */
.star05 {
position: absolute;
left: -84px;
top: -77px;
transform: rotate(-72deg);
}
</style>
</head>
<body>
<!-- 版心 -->
<div class="w">
<!-- 父元素 -->
<div class="stara">
<!-- 第一个角 -->
<div class="star-z">
<div class="star">
</div>
<div class="star01">
</div>
</div>
<!-- 第二个角 -->
<div class="star-z star02">
<div class="star"></div>
<div class="star01"></div>
</div>
<!-- 第三个角 -->
<div class="star-z star03">
<div class="star"></div>
<div class="star01"></div>
</div>
<!-- 第四个角 -->
<div class="star-z star04">
<div class="star"></div>
<div class="star01"></div>
</div>
<!-- 第五个角 -->
<div class="star-z star05">
<div class="star"></div>
<div class="star01"></div>
</div>
</div>
</div>
</body>
</html>