小熊眼睛一直盯着鼠标移动的交互效果代码
代码语言：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.3c0-125.3,67.4-226.9,150.6-226.9S376.3,335,376.3,460.3Z" fill="#e07320"/>
<path d="M211,596.9v18.4a19.1,19.1,0,0,1-19,19H138.5a19,19,0,0,1-15.2-7.7l-0.5-.7C93.4,584.6,75.1,525.7,75.1,460.3q0-4.6.1-9.2c1.6,61.6,19.6,117,47.5,156.4l0.5,0.8a19,19,0,0,0,15.2,7.7H192A19.1,19.1,0,0,0,211,596.9Z" fill="#af571d"/>
<path d="M376.3,459.3c0,63.1-17.1,120.3-44.7,161.4h0l-4.5,6.5a18.9,18.9,0,0,1-13,5.2H260.5a19.1,19.1,0,0,1-19-19V594.9a19.1,19.1,0,0,0,19,19H314a18.9,18.9,0,0,0,13-5.2l4.5-6.5h0c26.3-39.1,43-92.7,44.6-152.2Q376.3,454.7,376.3,459.3Z" fill="#af571d"/>
<path id="body-stroke" 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.3c0-125.3,67.4-226.9,150.6-226.9S376.3,335,376.3,460.3Z" fill="none" stroke="#3f1c0d" stroke-miterlimit="10" stroke-width="10"/>
<path id="arm-right" d="M294.1,283h0a41.6,41.6,0,0,1,56.7,15.2l67.1,116.3a41.6,41.6,0,0,1-15.2,56.7h0A41.6,41.6,0,0,1,346.1,456L322,414.3Z" fill="#e07320"/>
<path id="arm-right-shadow" d="M325,410.8s15.1,34.1,20.8,45.2c7,13.6,21.7,20.7,36,20.7a41.1,41.1,0,0,0,20.6-5.5A41.6,41.6,0,0,0,422,425.6a41.3,41.3,0,0,1-40.2,32c-14.4,0-25.5-10.5-35-22.6C332.9,417.4,325,410.8,325,410.8Z" fill="#af571d"/>
<path id="arm-left" d="M152.4,283h0a41.6,41.6,0,0,0-56.7,15.2L28.6,414.5a41.6,41.6,0,0,0,15.2,56.7h0A41.6,41.6,0,0,0,100.5,456l25.5-42.1Z" fill="#e07320"/>
<path id="arm-left-shadow" d="M121.2,410.8s-15.1,34.1-20.8,45.2c-7,13.6-21.7,20.7-36,20.7a41.1,41.1,0,0,1-20.6-5.5,41.6,41.6,0,0,1-19.6-45.5,41.3,41.3,0,0,0,40.2,32c14.4,0,25.5-10.5,35-22.6C113.3,417.4,121.2,410.8,121.2,410.8Z" fill="#af571d"/>
<path id="neck-shadow" d="M351.9,300.1c-33.4,19.3-78.7,27.6-128.6,27.6s-95.2-8.3-128.6-27.6l1.1-1.9a41.6,41.6,0,0,1,40.4-20.5c25-27.9,56-44.4,89.5-44.4s64.3,16.4,89.3,44.1a41.6,41.6,0,0,1,35.9,20.7Z" fill="#af571d"/>
<path id="arm-right-stroke" d="M294.1,283h0a41.6,41.6,0,0,1,56.7,15.2l67.1,116.3a.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0