canvas+css写轮眼动画效果

最新推荐文章于 2024-09-11 20:31:47 发布
最新推荐文章于 2024-09-11 20:31:47 发布
阅读量84 收藏
点赞数
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70139540/article/details/134548430
版权

我这里思路就是先用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>

 背景图 

 

阁下呀
关注
css动画效果和canvas
dedsec0x的博客
09-08 1799
.
60余种css基础+css3动画+canvas+svg
05-10
分享工作学习过程中遇见的有趣的css：css基础+css3动画+canvas+svg等 1.3d翻转和蒙版展示 2.CSS3和SVG实现的圆环菜单动画 3.css风车 4.css实现右上角标签条 5.百分比水球 6.大屏随机抽奖 7.纯css气泡背景 8.实现...
Canvas + CSS3实现可视化项目开场动画
localhost_1314的博客
07-18 1243
一、背景： 在最近的可视化项目中，视觉设计采用钢铁的写实风格，整体页面布局为左中右，动效需要实现在刚进入页面时，左右板块撞向中间板块，产生撞击光效和火花飞散的动画效果。 二、实现思路： 需要考虑以下几个方面： 整体页面的布局，左中右三个板块需要独立，分别绝对定位，不要耦合在一起； 使用css3实现撞击动效； 使用canvas绘制撞击后的火光和火花，光效可以径向渐变，火花飞舞的运动轨迹分别是左右方向的匀减速运动，上下方向的匀减速和匀加速，最后到飞舞消散的过程，粒子大小随机 三、实现过程： 1.
canvas文字粒子效果 html+css+js 3点饮茶，7点放工，美滋滋~
你好呀，很高兴你在看这里~
05-23 1901
先言：  今天3点多在饮茶的时候，发现有好几天没水文章了，但是太难的玩意又不会啊，咋办，突然想起电脑里还有存着一个文字粒子特效，好家伙，这不就来了，先看效果如下： 因为gif图最大5m，但是这东西演示完又不止5m，所以就用视频演示效果了~ BILINILI视频演示效果》 实现步骤（完整源码放在最后）： 1.获取画布 //获取画布 var canvas = docum
HTML+CSS+JS实现 ❤️酷炫的canvas全屏背景动画特效❤️
java李阳勇的博客
09-09 2197
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示：文末获取源码 代码目录： 主要代码实现： CSS样式： .codrops-demos { font-size: 0.8em; text-align: center;
【前端】25款不得不说的html5+css3动画效果
小白兔的窝
06-03 4926
这25款动画效果分别使用了html5 svg、css3 transform、css3 transition、css3 animation等制作而成。1、9种梦幻般的html5+css3 tooltip鼠标提示插件效果这个tooltip鼠标提示插件将带您离开黄底黑字的html tooltip原始时代。该插件共9种效果，使用html5 svg和css3 transform属性完成。该tooltip带图片带动画，效果一流。>> 查看演示2、19种基于css3的超华丽模态窗口效果这是一款集19种模态窗口效果于一体的
canvas 与css3,请问下，canvas和css3动画在性能上有差距的原因是什么
weixin_36111561的博客
08-04 1204
性能这个点上，单个元素的动画其实两者的差距很难看出来，不过可以不靠谱的说基于 gpu 的 css3 动画性能更好，具体得视动画的复杂度而定。两者在大量元素动画的情况下又如何呢。我们都知道大量 DOM 节点会导致性能垂直下降，如果我们需要对 10000 个 DOM 节点做动画，那么帧率可能不会可观。而 canvas 的大量 fillRect 调用的性能又会不会成为瓶颈呢？于是我们就采用对 10000...
canvas重力小球 html+css+js
你好呀，很高兴你在看这里~
04-10 2978
先看效果（完整代码在底部）： 实现过程（可一步一步实现）： 1.定义标签与基本css样式： <h1>北极光之夜。</h1> <canvas id="canvas"></canvas> #canvas{ position: fixed; top: 0; left: 0; /* filter: contrast(30); */ }
canvas刮图效果 html+css+js
你好呀，很高兴你在看这里~
04-07 2676
效果（完整代码在底部）： 实现（原理是比较简单的）： 1.定义标签： <canvas id="canvas"></canvas> 2.canvas基本css样式： canvas{ background-image: url(img/对比图/1.1.png); background-size: cover; } background-image: url(img/对比图/1.1.png); 给个真人钢铁侠背景图。 b
HTML+CSS+JS实现 ❤️canvas酷炫表白爱心动画❤️
java李阳勇的博客
09-09 1875
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示：文末获取源码 代码目录： 主要代码实现： CSS样式： body { font-family: Monospace; background-color: #f0f0f0;
canvas下雪背景 html+css+js
你好呀，很高兴你在看这里~
03-22 3712
先看效果： 实现： 1. 定义标签： <h1>北极光之夜。</h1> <div class="bg"></div> <canvas id="canvas"></canvas> h1是标题，.bg是背景图，canvas是画布。 2. 开始js部分，先获取画布： var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2
【必看】2020年新型前端HTML5+CSS3+JS+Canvas+AJAX+Http前后端交互
06-17
课程包含HTML5新标签新规范，DIV+CSS设计、Canvas绘画；CSS样式设计，其中有动画特效、渐变、图形图像、2D/3D转换特效、自适应网页设计等；JS包含核心语法、面向对象编程、复杂的项目案例、HTTP网络协议、AJAX前后端...
新年快乐网页源码（含礼花烟花特效+福字旋转效果）纯canvas+css+js+html5
01-22
在这个案例中，Canvas被用来绘制礼花绽放和福字旋转的动画效果。 3. **CSS**：层叠样式表（CSS）用于控制网页的布局和样式。在这个项目中，CSS可能被用来设置页面的整体结构，元素的位置，以及背景颜色等，确保网页...
HTML5 Canvas+SVG+CSS3实现下雨天飞碟摇摆的标牌杆白云动画效果源码.zip
11-02
在这个“HTML5 Canvas+SVG+CSS3实现下雨天飞碟摇摆的标牌杆白云动画效果源码”项目中，我们可以看到HTML5的三个核心组件——Canvas、SVG和CSS3被巧妙地结合在一起，创造出一个生动的动画场景。 首先，Canvas是HTML5...
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
09-28
此外，CSS3的`background-size: cover`属性确保背景图片自适应填充整个div元素，而`-webkit-animation`，`-moz-animation`，`-ms-animation`和`animation`则分别用于兼容不同浏览器的动画效果。 总结来说，这个项目...
CSS —— 界面布局
m0_73557953的博客
09-10 987
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 361
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
CSS 常用元素属性
最新发布
2301_79881188的博客
09-11 935
CSS 属性有很多, 可以参考文档。
CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸鱼的博客
09-10 699
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
HTML5 canvas与CSS3动画：实现小车移动的多途径探索
1. **Canvas元素结合JavaScript**：这是最底层的实现方式，开发者直接在<canvas>上绘制图形，然后通过JavaScript控制图形的移动、缩放等动作，创建动画效果。 2. **纯粹的CSS3动画**：虽然目前在主流浏览器中的支持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阁下呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值