如何用css绘制一个五角星并添加旋转动画

关于三角形的绘制,大家已经贡献过诸如将五角星切割成三个三角形来绘制等的更加标准简洁的画法,这篇文章权当抛砖引玉,为大家贡献一些不一样的思路吧,当然这个五角星的完成度也不是特别完美,有任何意见也欢迎大佬们在评论区讨论指正:)

首先让我们来看一下效果图:

想要绘制一个三角星,我们首先需要知道如何用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>

如何用css绘制一个五角星并添加旋转动画相关推荐

如何用css绘制一个三角形？
一.前言通常我们在开发过程中,像一些播放器的暂停按钮.或者是一些下拉框等等,都会用到三角形. 一般我们会使用一些svg或者是icon图标来替代,那么有没有想过该怎么去绘制一个三角形呢? 废话不多说 ...
使用python turtle库绘制一个三角形和一个五角星_使用turtle库绘制一个五角星如何采用Python语言绘制一个五角星...
如何采用Python语言绘制一个五角星 #./usr/bin/env python import turtle import time turtle.forward(100) turtle.right ...
canva五角星空html,使用canvas绘制一个五角星
一.了解canvas canvas 是HTML5新增的元素,用于在网页上绘制图形.但 canvas 只是图形的容器,必须要通过脚本(通常是JavaScript)来绘制图形. 可以通过多种方法使用can ...
python绘制红色五角星、边长100像素_使用turtle库绘制一个五角星
如何采用Python语言绘制一个五角星 #./usr/bin/env python import turtle import time turtle.forward(100) turtle.right ...
如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
[css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...
[css] 用CSS绘制一个红色的爱心
[css] 用CSS绘制一个红色的爱心 // 用过就给贴过来了.heart {position: relative;width: 100px;height: 90px;}.heart:before, ...
[css] 如何使用CSS绘制一个汉堡式菜单
[css] 如何使用CSS绘制一个汉堡式菜单比较常见的两种方法:利用元素自身.::before和::after伪元素绘制3个长宽一致的矩形,然后设定其y偏移值. 利用上下border和自身元素内容绘 ...
css画心形原理,如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...

如何用css绘制一个五角星并添加旋转动画

如何用css绘制一个五角星并添加旋转动画相关推荐

最新文章

热门文章