新增第183个小实例：蜂巢里的小蜜蜂光标特效
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
20355c4955
commit
f52a160122
|
|
@ -190,6 +190,7 @@
|
|||
180. HTML5+CSS3+JS小实例：使用L2Dwidget实现二次元卡通看板娘
|
||||
181. HTML5+CSS3+JS小实例：Canvas图片滑块拖动验证码
|
||||
182. HTML5+CSS3+JS小实例：霁青+翠蓝的Tabbar动画特效
|
||||
183. HTML5+CSS3+JS小实例：蜂巢里的小蜜蜂光标特效
|
||||
|
||||
#### 赞赏作者
|
||||
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* 不显示光标 */
|
||||
cursor: none;
|
||||
}
|
||||
body{
|
||||
background: url(images/bg.png);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 蜜蜂身体 */
|
||||
.bee{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
/* background-color: #000; */
|
||||
border-radius: 50% 75% 0% 75%;
|
||||
background: linear-gradient(-50deg,#000 15px,#daa520 15px,#daa520 25px,#000 25px,#000 40px,#daa520 40px,#daa520 50px,#000 50px);
|
||||
box-shadow: inset 0 0 0 2px #000,
|
||||
inset 5px -5px 5px 5px rgba(139,69,19,0.5),
|
||||
-10px 20px 35px saddlebrown;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
/* 蜜蜂头部 */
|
||||
.bee::before{
|
||||
content: "";
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
/* background: #000; */
|
||||
border-radius: 75% 50% 75% 25%;
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
top: -15px;
|
||||
background: radial-gradient(circle at 10px 15px,#000 3px,#daa520 3px,#daa520 20px, #000);
|
||||
box-shadow: 0 0 0 2px #000;
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
/* 蜜蜂触角 */
|
||||
.bee::after{
|
||||
content: "";
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
/* border: 1px solid red; */
|
||||
position: absolute;
|
||||
left: -33px;
|
||||
top: -28px;
|
||||
box-shadow: inset -2px 1px 0 #000,
|
||||
1px -2px 0 #fb1,
|
||||
3px -3px 0 #000;
|
||||
z-index: -1;
|
||||
/* 执行动画：动画名 时长 线性 无限次播放 */
|
||||
animation: feeler 0.35s linear infinite;
|
||||
}
|
||||
/* 朝向右 */
|
||||
.bee.flip{
|
||||
transform: rotate(20deg) scaleX(-1);
|
||||
}
|
||||
/* 翅膀 */
|
||||
.wings{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to bottom left,rgba(0,0,0,0.5),transparent 50px);
|
||||
border-radius: 50% 50% 50% 25%;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: -25px;
|
||||
/* 设置转换基点（旋转基点） */
|
||||
transform-origin: left bottom;
|
||||
/* 执行动画 */
|
||||
animation: buzz 0.35s linear infinite;
|
||||
}
|
||||
/* 腿 */
|
||||
.limbs{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-left: 2px solid #000;
|
||||
border-right: 2px solid #000;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 100%;
|
||||
}
|
||||
/* 前腿 */
|
||||
.limbs::before{
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-left: 2px solid #000;
|
||||
border-right: 2px solid #000;
|
||||
position: absolute;
|
||||
left: -33px;
|
||||
top: -20px;
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
/* 触角动画 */
|
||||
@keyframes feeler {
|
||||
50%{
|
||||
transform: translateY(2px);
|
||||
}
|
||||
}
|
||||
/* 翅膀动画 */
|
||||
@keyframes buzz {
|
||||
50%{
|
||||
transform: scale(0.9) rotateX(90deg) rotateY(90deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>蜂巢里的小蜜蜂光标特效</title>
|
||||
<link rel="stylesheet" href="183.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="bee">
|
||||
<div class="wings"></div>
|
||||
<div class="limbs"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script src="183.js"></script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// 要操作的元素
|
||||
const bee=document.querySelector('.bee');
|
||||
// 记录最后的x坐标（用于判断蜜蜂的朝向）
|
||||
let last_x=0;
|
||||
|
||||
// 鼠标移动事件
|
||||
window.addEventListener('mousemove',function(e){
|
||||
let x=e.clientX-15;
|
||||
let y=e.clientY-15;
|
||||
bee.style.left=x+'px';
|
||||
bee.style.top=y+'px';
|
||||
if(last_x<x){
|
||||
// 朝右
|
||||
bee.classList.add('flip');
|
||||
}else{
|
||||
// 朝左
|
||||
bee.classList.remove('flip');
|
||||
}
|
||||
// 更新last_x
|
||||
last_x=x;
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 355 B |
Loading…
Reference in New Issue