现在学习一种过渡效果，已经开始做动画的意识，可以实现一些更不寻常的小玩意，一个过渡动画网页，会让人看起来很漂亮，不僵硬，有看头，动画是一个网页的主体是一个美丽的，在这里做一个使用一个过渡效果图实例。



先到效果图：


此实现需要在一些js代码中使用。

所需要的图片：


这是pointer.png位置。


turntable-bg.jpg这是背景图，背景中的位置。

这是一个在turntable.png位置。

你需要这三张照片。如果你想这样做，直接保存三幅图片。如果没有，请将其改为相应的图片名称，并将其放在同一文件下。



代码uff1a






幸运抽奖


# BG {
宽度：650px；
身高：600px；
保证金：0汽车；
背景：网址（转盘BG，JPG）不重复；
职位：相对；
}
img { SRC ^ =指针} {
位置：绝对；
Z指数：10；
上图：155px；
左：247px；
}
img { SRC ^ =转盘} {
位置：绝对；
Z指数：5；
上图：60px；
左：116px；
转换：所有4S；
}











无功opointer = document.getelementsbytagname（IMG）{ 0 }；
Var oTurntable=document.getElementsByTagName (img) {1};
var猫= 51.4；
var = 0；
无功地=真；
文档标题；

opointer。onclick =函数（）{
如果（大）{
oturntable。风格。变换=旋转（0度）；
大=！大；
旋转（）；
}
}

功能旋转（）{
var定时器= null；
VaR RDM = 0；
ClearInterval（定时器）；
定时器= setInterval（）{（）函数（
如果（math.floor（RDM / 360）＜3）{
RDM = math.floor（Math.random（）* 3600）；
其他{ }
oturntable。风格。变换=旋转（+ +RDM°）；
ClearInterval（定时器）；
setTimeout（）{（）函数（
大=！大；
Num = RDM % 360；
如果（数字=猫* 1）{
警戒（4999元）；
否则如果（数字< =猫* 2）{
警戒（50元）；
否则如果（数字< =猫* 3）{
警戒（10元）；
否则如果（数字< =猫* 4）{
警戒（5元）；
否则如果（数字< =猫* 5）{
警报（无兴趣服务）；
否则如果（数字< =猫* 6）{
警报（提交白金）；
否则如果（数字< =猫* 7）{
警报（unawarded ）；
}
}，4000）；
}
}，30）；
}






CSS和HTML代码，主要为了实现过渡，并使用位置堆叠，从文件流使元素，JS代码是获取元素和事件的点击，点击指针会旋转，所以你需要添加一个单击事件指针，然后决定是否停止转动，如果不点击不调用函数），旋转（旋转功能和判断指针转盘停在什么位置，然后弹出相应的内容和功能在旋转过程中，是获得旋转元件，利用变换的CSS JS控制性能：旋转（），我们做的不使用此属性直接在CSS实现旋转的效果伪类：悬停和过渡特性一起使用来实现的，因为CSS可以实现数字计算和鼠标点击，所以JS来实现和控制的CSS属性，实现点击旋转这个功能，但是，定时器的使用不说，控制的方法是使用js点击CSS属性数字运算和鼠标实现旋转效果。

（数学。随机）是一个随机数发生器，math.floor（向下取整）。



以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。