Question

我目前正在与sencha合作开展一个项目。在这个项目中，我有一个旋转的'wheeloffortune'轮子，旋转到轮子的某个部分以获得奖励。

之前我用一些javascript做了这个，我创建了间隔来切换div的css类但是效果不好。

我现在想用css3动画做，我有以下css：

    @-webkit-keyframes rotater {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(3600deg);
    }
}

.css3-rotaterFull {
    -webkit-animation-name: rotater;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function:ease-out;
    -webkit-animation-duration: 15s;
}

但我需要将它旋转到一个可变的角度。因此我需要能够设置

to {
    -webkit-transform: rotate(3600deg);
}

在将类添加到div

之前，

部分到可变的度数

关于如何做到这一点的任何想法？

Answer 1

使用CSSOM：http://dev.w3.org/csswg/cssom/

function rotate(deg) {
    var elem = document.getElementById('wheel');
    var lastStyleSheet = document.styleSheets[document.styleSheets.length - 1];
    var rule = '@-webkit-keyframes menuBreadcrumbAnimation {\
            0%  {\
                -webkit-transform: rotate(0deg);\
            } 100% {\
                -webkit-transform: rotate(' + deg + 'deg);\
            }';

    function rotateAnimationEnd() {
        lastStyleSheet.removeRule(lastStyleSheet.length);
        elem.removeEventListener('webkitAnimationEnd', rotateAnimationEnd,  false);
    };

    lastStyleSheet.insertRule(rule, lastStyleSheet.rules.length);
    elem.addEventListener('webkitAnimationEnd', rotateAnimationEnd, false);
    elem.classList.add('css3-rotaterFull');
};

一旦你知道最终学位是什么，把它传递给这个功能。它将获取文档中的最后一个样式表，创建一个插入了动态程度的规则，然后将规则插入到样式表中，并将适当的类添加到元素中，以便它使用动画。

一旦动画结束，webkitAnimationEnd侦听器就会从样式表中删除规则，因此规则不会持续构建，也会删除webkitAnimationEnd侦听器本身，因此它不会干扰下一次旋转。

Answer 2

将其放在样式标记中，以便能够使用def getImg(fname): pygame.camera.init() cm = pygame.camera.list_cameras() cam = pygame.camera.Camera(cm[0]) cam.start() img = cam.get_image() pygame.image.save(img,fname) cam.stop()获取/设置它。

更改或生成然后删除css3关键帧

2 个答案: