小熊眼睛一直盯着鼠标移动的交互效果代码

代码语言:html

所属分类:拖放

代码描述:小熊眼睛一直盯着鼠标移动的交互效果代码

代码标签: 盯着 鼠标 移动 交互 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

 
<meta charset="UTF-8">

 
 
 
<style>
    body
{padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;background-color:#F9CB3A;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='60px' height='60px' viewBox='0 0 122.1 129.3'%3E %3Cg%3E %3Cpath id='bottom' d='M118.6,74.8c0,20.4-12.7,38.1-31.2,46.9a12.4,12.4,0,0,1-5.3,1.2H40a11.9,11.9,0,0,1-5.1-1.1c-18-8.5-30.6-25.4-31.4-45-0.6-15.2,7.1-28,16.5-39a33.5,33.5,0,0,0,6.2-12.1H95.9A33.4,33.4,0,0,0,102,37.7C111,48.2,118.6,60.3,118.6,74.8Z' fill='%23af571d'/%3E %3Cpath id='top' d='M118.6,74.8a48.8,48.8,0,0,1-5,21.6H8.6A48.3,48.3,0,0,1,3.5,76.7c-0.6-15.2,7.1-28,16.5-39a33.5,33.5,0,0,0,6.2-12.1H95.9A33.4,33.4,0,0,0,102,37.7C111,48.2,118.6,60.3,118.6,74.8Z' fill='%23e07320'/%3E %3Cpath id='shadow' d='M117.1,73.9c0,17.3-9.1,32.7-23.3,42.3a33.9,33.9,0,0,1-19.1,5.7H44.7a34.5,34.5,0,0,1-19.4-5.8,57.6,57.6,0,0,1-5.4-4.2c-0.9-.8.3-2.1,1.3-1.4h0.1c5.4,3.7,12,4,18.8,4H70.5c10.2-.4,16.8-2.4,21.6-6.1,14.3-10.9,20.7-23,20.7-40.3A42.2,42.2,0,0,0,111,56c-0.3-1.1,1.4-1.7,1.9-.6A44.2,44.2,0,0,1,117.1,73.9Z' fill='%23873f16'/%3E %3Cpath id='pot-stroke' d='M118.6,74.8c0,17.3-9.1,32.7-23.3,42.3a33.9,33.9,0,0,1-19.1,5.7H45.9a33.7,33.7,0,0,1-18.8-5.5C13.4,108,4.2,93.3,3.5,76.7s7.1-28,16.5-39a33.5,33.5,0,0,0,6.2-12.1H95.9A33.4,33.4,0,0,0,102,37.7C111,48.2,118.6,60.3,118.6,74.8Z' fill='none' stroke='%233f1c0d' stroke-miterlimit='10' stroke-width='7'/%3E %3Crect x='4.9' y='9.3' width='112.2' height='23.26' rx='6.7' ry='6.7' fill='%23af571d' stroke='%233f1c0d' stroke-miterlimit='10' stroke-width='7'/%3E %3C/g%3E %3Cg id='honey'%3E %3Cpath d='M105.5,28.3h-0.1a5.8,5.8,0,0,1,.1,1V77.6c0,4-3.6,7.3-8,7.3H94.4c-4.4,0-8-3.3-8-7.3V51.1c0-3.6-3.2-6.5-7.1-6.5h-1c-3.9,0-7.1,2.9-7.1,6.5V66.4c0,4-3.6,7.4-8,7.4H60.2c-4.2,0-7.7-3-8-6.8V53.7c0-3.6-3.2-6.5-7.1-6.5H45.1A6.8,6.8,0,0,0,38,53.5h0V84c0,4-3.6,7.3-8,7.3H26.9c-4.4,0-8-3.3-8-7.3V30.5c0-.2,0-0.5,0-0.7a6.2,6.2,0,0,1,.2-1H18.9V17.8C18.9,11.3,24.7,6,31.7,6h67a6.5,6.5,0,0,1,6.7,6.2V28.3Z' fill='%23873f16'/%3E %3Cpath d='M103.5,22.3s0,0.7,0,1.1V71.6c0,4-3.6,7.3-8,7.3H92.3c-4.4,0-8-3.3-8-7.3V45.1c0-3.6-3.2-6.5-7.1-6.5h-1c-3.9,0-7.1,2.9-7.1,6.5V60.4c0,4-3.6,7.4-8,7.4H58.1c-4.2,0-7.7-3-8-6.8V47.7c0-3.6-3.2-6.5-7.1-6.5H43A6.8,6.8,0,0,0,36,47.5h0V78c0,4-3.6,7.3-8,7.3H24.8c-4.4,0-8-3.3-8-7.3V11.8C16.8,5.3,22.6,0,29.7,0h67a6.5,6.5,0,0,1,6.7,6.2V22.3Z' fill='%23f8ca13'/%3E %3Cpath d='M49.1,42.7v1.6a7.2,7.2,0,0,0-6-3.1H43a6.8,6.8,0,0,0-7,6.3h0V78c0,4-3.6,7.3-8,7.3H24.8c-4.4,0-8-3.3-8-7.3V76.6a8.2,8.2,0,0,0,7,3.7h3.1c4.4,0,8-3.3,8-7.3V42.5h0a6.8,6.8,0,0,1,7-6.3h0.1C45.9,36.2,49.1,39.1,49.1,42.7Z' fill='%23ed991d'/%3E %3Cpath d='M83.3,40.1v1.6a7.2,7.2,0,0,0-6-3.1h-1c-3.9,0-7.1,2.9-7.1,6.5V60.4c0,4-3.6,7.4-8,7.4H58.1c-4.2,0-7.7-3-8-6.8V59a8.1,8.1,0,0,0,6.9,3.7h3.1c4.4,0,8-3.3,8-7.4V40.1c0-3.6,3.2-6.5,7.1-6.5h1C80.1,33.6,83.3,36.5,83.3,40.1Z' fill='%23ed991d'/%3E %3Cpath d='M103.5,23.4V71.6c0,4-3.6,7.3-8,7.3H92.3c-4.4,0-8-3.3-8-7.3V70.2a8.1,8.1,0,0,0,6.9,3.7h3.1c4.4,0,8-3.3,8-7.3V18.4a5.4,5.4,0,0,0-.1-1h0.1V2.9a5.8,5.8,0,0,1,1,3.3V23.4Z' fill='%23ed991d'/%3E %3Cpath d='M103.5,28.6v1a5.6,5.6,0,0,0-.1-0.9h0.1Z' fill='%23f8ca13'/%3E %3Crect x='23.9' y='4' width='38.8' height='7.21' rx='3.6' ry='3.6' fill='%23f9f4d6' opacity='0.71'/%3E %3C/g%3E %3C/svg%3E"),auto}svg{width:200px}
</style>


</head>

<body translate="no" >
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 446.4 686.5">
 
<title>Curious Bear</title>
 
<g style="isolation: isolate">
   
<g id="Layer_1" data-name="Layer 1">
     
<g id="bear">
       
<ellipse cx="223.2" cy="637.6" rx="223.2" ry="29" fill="#3F1C0C" opacity="0.3"/>
       
<g id="body">
          <path id="body-2" data-name="body" d="M376.3,460.3c0,63.2-17.1,120.3-44.7,161.4h0l-4.5,6.5a18.9,18.9,0,0,1-13,5.1H260.5a19.1,19.1,0,0,1-19-19V553.2a124.2,124.2,0,0,1-30.5.3v62a19.1,19.1,0,0,1-19,19H138.5a19,19,0,0,1-15.2-7.6l-0.5-.7C93.4,584.6,75.1,525.7,75.1,460.3c.........完整代码请登录后点击上方下载按钮下载查看

网友评论0