CSS3 简单的砸金蛋样式

实现样式:

1、鼠标移入后,鼠标样式图标变为“锤子”。

2、用户砸金蛋,锤子简单的扬起效果。

3、砸碎金蛋,显示内容。

分析实现步骤:

1、在html中插入一颗金蛋

找一张静态图片或带一点效果的动态图,直接放入img标签即可。

2、鼠标移入,改变鼠标样式图标

系统自带的鼠标样式就那几种,可以通过CSS修改,简单的一句代码:

cursor: url("./IMG/chuizi1.png"), default;

只是需要给定改变样式时的前提要求,此处要求是鼠标移入改变,即hover时改变:

```
body>div aside label img:hover {
     cursor: url("./IMG/chuizi1.png"), default;
}
```

url内为自己选择的“锤子”样式。

3、当用户砸蛋时,让锤子扬起来

因为只能使用CSS,那只有利用鼠标的点击状态(按住鼠标左键)来实现了,当用户点击鼠标左键时,

改表鼠标样式,和上一步一样,只是改变样式时的前提要求不同,这一步为active时改变:

<pre style="max-width: 100%;">
body>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值