background-color
:
blue
;
-webkit-clip-path
:
polygon
(
10% 0, 150% 35%, 100% 65%, 0% 80%
)
;
clip-path
:
polygon
(
10% 0, 150% 35%, 100% 65%, 0% 80%
)
;
height
:
350px
;
width
:
350px
;
transition
:
all 300ms
cubic-bezier
(
0.68, -0.55, 0.265, 1.55
)
;
animation
:
poly 10s ease-in-out infinite
;
.element:hover
{
filter
:
hue-rotate
(
50deg
)
;
img
{
width
:
100%
;
height
:
100%
;
@keyframes
poly
{
0%
{
-webkit-clip-path
:
polygon
(
10% 0, 150% 35%, 100% 65%, 0% 80%
)
;
clip-path
:
polygon
(
10% 0, 150% 35%, 100% 65%, 0% 80%
)
;
50%
{
-webkit-clip-path
:
polygon
(
0 0, 100% 35%, 100% 65%, 10% 100%
)
;
clip-path
:
polygon
(
0 0, 100% 35%, 100% 105%, 10% 100%
)
;
100%
{
-webkit-clip-path
:
polygon
(
10% 0, 150% 35%, 100% 65%, 0% 80%
)
;
clip-path
:
polygon
(
10% 0, 150% 35%, 100% 65%, 0% 80%
)
;
</
style
>
</
head
>
<
div
class
=
"
element
"
>
<img src="../img/bk.jpg" alt ="pic" />
</
div
>
</
body
>
</
html
>
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>polygon animation</title> <style> body { font-family: "Poppins", sans-serif;
通过路径来绘制二维形状平面。简单理解就是在一个平面上用
不规则
的线连接成一个图形。
想在three.
js
中展示需要使用ExtrudeGeometry，ShapeGeometry来生成几何体。
它有一个.holes属性，用于在形状平面中挖洞。.holes值是一个THREE.Path()数组，定义了二维路径。
常用绘图函数
moveTo(x, y) 将绘图点移动到指定的 x、y 坐标处。
lineTo(x, y) 从当前位置创建一条到 x、y 坐标的线。
quadricCurveTo(cp
