我这里思路就是先用canvas画轮廓眼球，勾玉等再用css animation实现动画
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas写轮眼</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: relative;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: -100;
}
.container{
width: 600px;
height: 200px;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
top: 20%;
left: 34%;
}
.leftBox,
.rightBox {
display: inline-block;
position: relative;
width: 200px;
height: 100px;
}
#canvas1,
#canvas1_right {
position: absolute;
z-index: -1;
}
/* 中间黑眼球 */
.small_arc,
.small_arc_right {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 90px;
height: 90px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
border: 1px solid #000;
z-index: 0;
animation: colors 3s linear 0s 1 normal forwards;
}
@keyframes colors {
0% {
background-color: rgb(0, 0, 0);
}
100% {
background-color: rgb(255, 4, 4);
}
}
/* 眼睛小白点 */
.small_arc::after,
.small_arc_right::after {
content: "";
position: absolute;
left: -48px;
right: 0;
top: -27px;
bottom: 0;
margin: auto;
width: 13px;
height: 13px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
border: 1px solid #000;
z-index: 4;
}
#yu,
#yu_right {
z-index: 3;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
transform: rotate(240deg);
animation: yu 3s linear 0s 1 forwards;
}
#yu1,
#yu1_right {
z-index: 3;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
transform: rotate(240deg);
animation: yu1 3s linear 0s 1 forwards;
}
#yu2,
#yu2_right {
z-index: 3;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
transform: rotate(240deg);
animation: yu2 3s linear 0s 1 forwards;
}
@keyframes yu {
0% {
width: 0;
height: 0;
transform: rotate(0);
}
100% {
width: 200px;
height: 100px;
transform: rotate(3turn);
}
}
@keyframes yu1 {
0% {
width: 0;
height: 0;
transform: rotate(120deg);
}
100% {
width: 200px;
height: 100px;
transform: rotate(1200deg);
}
}
@keyframes yu2 {
0% {
width: 0;
height: 0;
transform: rotate(240deg);
}
100% {
width: 200px;
height: 100px;
transform: rotate(1320deg);
}
}
</style>
</head>
<body>
<div class="container">
<!-- 左眼 -->
<div class="leftBox">
<!-- 眼睛轮廓 -->
<canvas id="canvas1"></canvas>
<!-- 中间眼球 -->
<div class="small_arc"></div>
<!-- 三勾玉 -->
<canvas id="yu"></canvas>
<canvas id="yu1"></canvas>
<canvas id="yu2"></canvas>
</div>
<!-- 右眼 -->
<div class="rightBox">
<!-- 眼睛轮廓 -->
<canvas id="canvas1_right"></canvas>
<!-- 中间眼球 -->
<div class="small_arc_right"></div>
<!-- 三勾玉 -->
<canvas id="yu_right"></canvas>
<canvas id="yu1_right"></canvas>
<canvas id="yu2_right"></canvas>
</div>
</div>
<script>
window.onload = function () {
drawLeft();
drawRight();
}
function drawLeft() {
let canvas1 = document.getElementById("canvas1");
let yu = document.getElementById("yu");
let yu1 = document.getElementById("yu1");
let yu2 = document.getElementById("yu2");
let ctx1 = canvas1.getContext("2d");
let ctx2 = yu.getContext("2d");
let ctx3 = yu1.getContext("2d");
let ctx4 = yu2.getContext("2d");
let ctxList = [ctx2, ctx3, ctx4];
let obj = {
width: 200,
height: 100,
num: 28,
}
canvas1.width = obj.width;
canvas1.height = obj.height;
yu.width = obj.width;
yu.height = obj.height;
yu1.width = obj.width;
yu1.height = obj.height;
yu2.width = obj.width;
yu2.height = obj.height;
// 开始绘制眼睛轮廓
ctx1.beginPath();
ctx1.moveTo(0, 0);
ctx1.lineTo(90, 0);
ctx1.quadraticCurveTo(180, 0, 200, 100);
ctx1.lineTo(90, 100);
ctx1.quadraticCurveTo(20, 100, 0, 0);
ctx1.lineWidth = 1;
ctx1.lineJoin = "round";
ctx1.fillStyle = "white";
ctx1.fill();
ctx1.stroke();
// 重复绘制3个勾玉
for (let i = 0; i < ctxList.length; i++) {
let item = ctxList[i];
// 绘制万花筒
item.beginPath();
item.arc(100, 50, obj.num, 0, 2 * 3.14, false);
item.fillStyle = "black";
item.stroke();
// 绘制勾玉
item.beginPath();
item.arc(100, 23, 7, 0, 2 * 3.14, false);
item.fillStyle = "black";
item.fill();
item.stroke();
// 绘制小角
item.beginPath();
item.moveTo(92, 23);
item.quadraticCurveTo(100, 5, 92 + 14, 23 - 15);
item.quadraticCurveTo(102, 11, 102, 18);
item.fill();
item.stroke();
}
}
function drawRight() {
let canvas1 = document.getElementById("canvas1_right");
let yu = document.getElementById("yu_right");
let yu1 = document.getElementById("yu1_right");
let yu2 = document.getElementById("yu2_right");
let ctx1 = canvas1.getContext("2d");
let ctx2 = yu.getContext("2d");
let ctx3 = yu1.getContext("2d");
let ctx4 = yu2.getContext("2d");
let ctxList = [ctx2, ctx3, ctx4];
let obj = {
width: 200,
height: 100,
num: 28,
}
canvas1.width = obj.width;
canvas1.height = obj.height;
yu.width = obj.width;
yu.height = obj.height;
yu1.width = obj.width;
yu1.height = obj.height;
yu2.width = obj.width;
yu2.height = obj.height;
// 开始绘制眼睛轮廓
ctx1.beginPath();
ctx1.moveTo(200, 0);
ctx1.lineTo(110, 0);
ctx1.quadraticCurveTo(20, 0, 0, 100);
ctx1.lineTo(110, 100);
ctx1.quadraticCurveTo(180, 100, 200, 0);
ctx1.lineWidth = 1;
ctx1.lineJoin = "round";
ctx1.fillStyle = "white";
ctx1.fill();
ctx1.stroke();
// 重复绘制3个勾玉
for (let i = 0; i < ctxList.length; i++) {
let item = ctxList[i];
// 绘制万花筒
item.beginPath();
item.arc(100, 50, obj.num, 0, 2 * 3.14, false);
item.fillStyle = "black";
item.stroke();
// 绘制勾玉
item.beginPath();
item.arc(100, 23, 7, 0, 2 * 3.14, false);
item.fillStyle = "black";
item.fill();
item.stroke();
// 绘制小角
item.beginPath();
item.moveTo(92, 23);
item.quadraticCurveTo(100, 5, 92 + 14, 23 - 15);
item.quadraticCurveTo(102, 11, 102, 18);
item.fill();
item.stroke();
}
}
</script>
</body>
</html> 背景图
