css怎么制作五角星

html-css025

css怎么制作五角星,第1张

五角星

复制代码 代码如下:

#star-five {

margin: 50px 0

position: relative

display: block

color: red

width: 0px

height: 0px

border-right:  100px solid transparent

border-bottom: 70px  solid red

border-left:   100px solid transparent

-moz-transform:    rotate(35deg)

-webkit-transform: rotate(35deg)

-ms-transform:     rotate(35deg)

-o-transform:      rotate(35deg)

}

#star-five:before {

border-bottom: 80px solid red

border-left: 30px solid transparent

border-right: 30px solid transparent

position: absolute

height: 0

width: 0

top: -45px

left: -65px

display: block

content: ''

-webkit-transform: rotate(-35deg)

-moz-transform:    rotate(-35deg)

-ms-transform:     rotate(-35deg)

-o-transform:      rotate(-35deg)

}

#star-five:after {

position: absolute

display: block

color: red

top: 3px

left: -105px

width: 0px

height: 0px

border-right: 100px solid transparent

border-bottom: 70px solid red

border-left: 100px solid transparent

-webkit-transform: rotate(-70deg)

-moz-transform:    rotate(-70deg)

-ms-transform:     rotate(-70deg)

-o-transform:      rotate(-70deg)

content: ''

}

先说方法步骤:

首先创建一个三角形,使用带大尺寸边线而零内容尺寸的元素来实现。

使用伪元素:after和:before来克隆2个同样大小的三角形。

在上面所说的2个伪元素上分别应用不同的旋转变换来达到五角星效果。

代码如下:

<!--创建三角形-->

.tri {

width: 0

height: 0

border-left: 15px solid transparent

border-right: 15px solid transparent

border-bottom: 30px solid red

}

<!--使用伪类元素-->

.tri:after,.tri:before {

width: 0

height: 0

border-left: 15px solid transparent

border-right: 15px solid transparent

border-bottom: 30px solid red

}

<!--旋转-->

.tri:before {

transform: rotate(70deg)

}

.tri:after {

transform: rotate(-70deg)

}

放置定义关键帧。可以使得五角星放大倍数更大些。CSS中的动画类似于flash中的逐帧动画,表现细腻并且非常灵活,使用CSS中的动画可以取代许多网页中的动态图像、Flash动画或者JavaScript实现的特殊效果。