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

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

admin

2023-08-03 11:59:35

0次

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

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

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

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

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

文章插图
这张是http://www.husay.cn/c/turntable.png位置的。
需要这三张图片，如果要实现一下，直接另存这三图片引入进去即可。如果不会请修改成对应的图片名字，放到同一个文件下。
代码：
抽奖

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

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

效果更好" onload="javascript:ImgReSiz

上一篇：马桶冲水按钮不回弹该怎么解决,教你拆卸修理没弹性的马桶按钮

下一篇：MySQL数据库实战教程-70-视图

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

相关内容

热门资讯