实现样式:
1, 鼠标移入后, 鼠标样式图标变为 "锤子".
2, 用户砸金蛋, 锤子简单的扬起效果.
3, 砸碎金蛋, 显示内容.
分析实现步骤:
1, 在 html 中插入一颗金蛋
找一张静态图片或带一点效果的动态图, 直接放入 img 标签即可.
2, 鼠标移入, 改变鼠标样式图标
系统自带的鼠标样式就那几种, 可以通过 CSS 修改, 简单的一句代码:
cursor: url("./IMG/chuizi1.png"), default;
只是需要给定改变样式时的前提要求, 此处要求是鼠标移入改变, 即 hover 时改变:
- <pre style="max-width: 100%;">
- body>div aside label img:hover {
- cursor: url("./IMG/chuizi1.png"), default;
- }
url 内为自己选择的 "锤子" 样式.
</pre>
3, 当用户砸蛋时, 让锤子扬起来
因为只能使用 CSS, 那只有利用鼠标的点击状态 (按住鼠标左键) 来实现了, 当用户点击鼠标左键时,
改表鼠标样式, 和上一步一样, 只是改变样式时的前提要求不同, 这一步为 active 时改变:
- <pre style="max-width: 100%;">
- body>div aside label img:active {
- cursor: url("./IMG/chuizi2.png"), default;
- }
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
注: 锤子扬起来和没扬起来, 给两个锤子扬起角度不同的图片即可:
移入显示 chuizi1, 按住鼠标左键显示 chuizi2, 就会有一种把锤子扬起来的视觉效果.
4, 用户砸蛋过后, 显示结果
首先, 砸金蛋分两个状态, 砸蛋前, 砸蛋后, 前面三步为砸蛋前状态, 第四步为砸蛋后状态, 为了把状态区分开,
想到伪类选择器有访问前和访问后两个状态, 但是只能用于链接标签 a, 此处不适用, 就想到了 form 表单
里面的复选框, 它有选中和不选中两种情况, 和砸蛋前, 砸蛋后相符合, 就用它了;
其次, 状态区别出来了, 变为砸蛋后的状态, 要让页面当中内容改变, 只有通过隐藏页面中的图片, 然后
把结果用背景图的方式展示出来
- /* 当选中时, 隐藏图片 */
- body>div aside input:checked+label>img {
- display: none;
- }
- /* 当选中时, 用背景的方式显示结果 */
- body>div aside input:checked+label {
- animation: zadan linear 1 8s;
- background-size: 200px 200px;
- background-image: url("./IMG/dan5.jpg");
- }
注: 我设置了几张图片的动画显示: animation: zadan linear 1 8s;, 这样结果会过渡得更好看, 动画结果固定显示: background-image: url("./IMG/dan5.jpg");
下面是完整代码:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- 砸蛋
- </title>
- <style>
- /* 砸蛋动画 */ @keyframes zadan { 0% { background-image: url("./IMG/dan11.jpg");
- } 30% { background-image: url("./IMG/dan2.gif"); } 60% { background-image:
- url("./IMG/dan3.gif"); } 90% { background-image: url("./IMG/dan4.jpg");
- } } body>div { width: 100%; } body>div aside { width: 200px; margin: 70px
- auto 0px; height: 200px; } /* 隐藏复选框默认样式 */ body>div aside input { display:
- none; } body>div aside label { width: 200px; height: 200px; display: block;
- } body>div aside label img { width: 200px; height: 200px; } /* 鼠标移入改变样式
- */ body>div aside label img:hover { cursor: url("./IMG/chuizi1.png"), default;
- } /* 鼠标左击时样式 */ body>div aside label img:active { cursor: url("./IMG/chuizi2.png"),
- default; } /* 当选中时, 隐藏图片 */ body>div aside input:checked+label>img { display:
- none; } /* 当选中时, 用背景的方式显示结果 */ body>div aside input:checked+label { animation:
- zadan linear 1 8s; background-size: 200px 200px; background-image: url("./IMG/dan5.jpg");
- }
- </style>
- </head>
- <body>
- <div>
- <aside>
- <input type="checkbox" id="zadan">
- <label for="zadan">
- <img src="./IMG/dan1.jpg" alt="">
- </label>
- </aside>
- </div>
- </body>
- </HTML>
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
注意: 蛋碎的图片必须是自定义
来源: http://www.jianshu.com/p/d8643ab5f78e