PPT制作转盘抽奖活动游戏示例教程,比用希沃白板好做,效果更好

现在学习到了过渡效果了,已经开始有做动画效果的意识了,会实现一些比较炫的小玩意,
一个网页加入过渡动画效果,会让人看起来很有美观,不僵硬,有看头,动画是一个网页
美观的主要体现之一,下面做个使用个过渡效果实现的抽奖例子 。
先来效果图:

PPT制作转盘抽奖活动游戏示例教程,比用希沃白板好做,效果更好

文章插图
这个的实现需要使用到一些js代码 。
所需图片:

PPT制作转盘抽奖活动游戏示例教程,比用希沃白板好做,效果更好

文章插图
这张图是pointer.png的位置的 。
PPT制作转盘抽奖活动游戏示例教程,比用希沃白板好做,效果更好

文章插图
turntable-bg.jpg这张是背景图,在背景位置 。
PPT制作转盘抽奖活动游戏示例教程,比用希沃白板好做,效果更好

文章插图
这张是turntable.png位置的 。
需要这三张图片,如果要实现一下,直接另存这三图片引入进去即可 。如果不会请修改成对应的图片名字,放到同一个文件下 。
代码:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>抽奖</title> <!-- 这里是css部分 --> <style> #bg{width: 650px;height: 600px;margin: 0 auto;background: url(turntable-bg.jpg) no-repeat;position: relative; } img[src^="pointer"]{position: absolute;z-index: 10;top: 155px;left: 247px; } img[src^="turntable"]{position: absolute;z-index: 5;top: 60px;left: 116px;transition: all 4s; }</style></head><body><!-- 这里是HTML结构部分 --> <div id="bg"> <img src=https://www.dangaocn.com/q/rhsd/"pointer.png" alt="pointer"> PPT制作转盘抽奖活动游戏示例教程,比用希沃白板好做,效果更好




css和HTML代码不多,主要是为了实现过渡设置,还有为了实现层叠而使用position定位,让元素脱离文档流,js代码在于获取元素和
事件的点击,点击指针会旋转,所以要给指针加个点击事件,然后是判断旋转是否停止,如果没有就点击也不能调用函数ratating(),这个
函数执行转盘的旋转和判断指针停在什么位置,然后弹出相应的内容,而函数里实现旋转的过程,是获取转盘的元素,然后使用js控制css
的属性-transform:rotate(),我们不是使用过这个属性在css里直接使它实现旋转的效果吗?就是和伪类选择器:hover及过渡属性一起使
用去实现的,那么因为css实现不了数字的运算和鼠标点击,所以让js去实现且控制css属性,实现到点击旋转这个功能,然而定时器的使用
暂时不说,思路就是使用js实现数字的运算和鼠标的点击及css属性的控制达到旋转的效果 。