Question

我在一个网站上工作，我不知道如何使图像围绕静态徽标无限旋转。

我没有任何代码，因为我不熟悉Web编码，所以这里的任何人都可以提供Codepen或jsfiddle吗？我的网站正在使用100％的html，css和js。

我搜索了很多文章，但都没有我想要的。

我希望使用CSS和JS编写HTML代码

Answer 1

一种简单的方法是将CSS类添加到图像元素并使用关键帧动画。

从演示中可以看到，您必须定义一个关键帧（有点像动画序列），然后添加参数来对其进行控制。

Traceback (most recent call last):
  File "/opt/rh/rh-python36/root/usr/lib/python3.6/site-packages/dask/dataframe/utils.py", line 162, in raise_on_meta_error
    yield
  File "/opt/rh/rh-python36/root/usr/lib/python3.6/site-packages/dask/dataframe/core.py", line 3740, in _emulate
    return func(*_extract_meta(args, True), **_extract_meta(kwargs, True))
  File "/opt/rh/rh-python36/root/usr/lib64/python3.6/site-packages/pandas/core/reshape/tile.py", line 306, in qcut
    dtype=dtype, duplicates=duplicates)
  File "/opt/rh/rh-python36/root/usr/lib64/python3.6/site-packages/pandas/core/reshape/tile.py", line 350, in _bins_to_cuts
    dtype=dtype)
  File "/opt/rh/rh-python36/root/usr/lib64/python3.6/site-packages/pandas/core/reshape/tile.py", line 457, in _format_labels
    v = adjust(labels[0].left)
  File "/opt/rh/rh-python36/root/usr/lib64/python3.6/site-packages/pandas/core/indexes/interval.py", line 1303, in __getitem__
    mask = self._isnan[value]
IndexError: index 0 is out of bounds for axis 0 with size 0

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "dask_eda.py", line 7, in <module>
    a = data['tot_top_amt'].map_partitions(pd.qcut,4, duplicates='drop')
  File "/opt/rh/rh-python36/root/usr/lib/python3.6/site-packages/dask/dataframe/core.py", line 568, in map_partitions
    return map_partitions(func, self, *args, **kwargs)
  File "/opt/rh/rh-python36/root/usr/lib/python3.6/site-packages/dask/dataframe/core.py", line 3779, in map_partitions
    meta = _emulate(func, *args, udf=True, **kwargs2)
  File "/opt/rh/rh-python36/root/usr/lib/python3.6/site-packages/dask/dataframe/core.py", line 3740, in _emulate
    return func(*_extract_meta(args, True), **_extract_meta(kwargs, True))
  File "/opt/rh/rh-python36/root/usr/lib64/python3.6/contextlib.py", line 99, in __exit__
    self.gen.throw(type, value, traceback)
  File "/opt/rh/rh-python36/root/usr/lib/python3.6/site-packages/dask/dataframe/utils.py", line 179, in raise_on_meta_error
    raise ValueError(msg)
ValueError: Metadata inference failed in `qcut`.

You have supplied a custom function and Dask is unable to 
determine the type of output that that function returns. 

To resolve this please provide a meta= keyword.
The docstring of the Dask function you ran should have more information.

Original error is below:
------------------------
IndexError('index 0 is out of bounds for axis 0 with size 0',)

Traceback:
---------
  File "/opt/rh/rh-python36/root/usr/lib/python3.6/site-packages/dask/dataframe/utils.py", line 162, in raise_on_meta_error
    yield
  File "/opt/rh/rh-python36/root/usr/lib/python3.6/site-packages/dask/dataframe/core.py", line 3740, in _emulate
    return func(*_extract_meta(args, True), **_extract_meta(kwargs, True))
  File "/opt/rh/rh-python36/root/usr/lib64/python3.6/site-packages/pandas/core/reshape/tile.py", line 306, in qcut
    dtype=dtype, duplicates=duplicates)
  File "/opt/rh/rh-python36/root/usr/lib64/python3.6/site-packages/pandas/core/reshape/tile.py", line 350, in _bins_to_cuts
    dtype=dtype)
  File "/opt/rh/rh-python36/root/usr/lib64/python3.6/site-packages/pandas/core/reshape/tile.py", line 457, in _format_labels
    v = adjust(labels[0].left)
  File "/opt/rh/rh-python36/root/usr/lib64/python3.6/site-packages/pandas/core/indexes/interval.py", line 1303, in __getitem__
    mask = self._isnan[value]

Answer 2

基于答案 How to animate image circular in css

您可以执行以下操作：

HTML ：

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

CSS ：

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

该人还添加了一个jsFiddle链接，供您查看上述链接的效果。 http://jsfiddle.net/aquadk/m23sadrz/

Answer 3

据我了解，您需要像月亮绕地球旋转一样的效果。您可以使用CSS动画和transform-origin属性来做到这一点。

transform-origin更改对象的旋转点。通常，变换原点位于对象的中心，但是更改变换原点的X和Y属性可以更改旋转点。

here is a example

<div class="logo-wrapper">
    <h1>LOGO</h1>
    <span class="img"></span>
</div>

用您的期望图片替换span.img

希望这对您有帮助！

如何使图像围绕静态徽标旋转？

3 个答案: