CSS3 单DIV实现的彩虹转盘

使用css3 radial-gradient方法实现

css3, spinner

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1851
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    background: black;
}
div {
    -webkit-animation: spinny 15s ease-in-out infinite;
    animation: spinny 15s ease-in-out infinite;
    border-radius: 50%;
    width: 66.66vmin;
    height: 66.66vmin;
    -webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin));
    transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin));
    background: -webkit-radial-gradient(center top, circle, #00ffff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(bottom left, circle, #ffff00, rgba(0, 0, 0, 0)), -webkit-radial-gradient(bottom right, circle, #ff00ff, rgba(0, 0, 0, 0));
    background: radial-gradient(circle at center top, #00ffff, rgba(0, 0, 0, 0)), radial-gradient(circle at bottom left, #ffff00, rgba(0, 0, 0, 0)), radial-gradient(circle at bottom right, #ff00ff, rgba(0, 0, 0, 0));
    background-blend-mode: multiply;
}
@-webkit-keyframes spinny {
    from {
        -webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
        transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
    }
    to {
        -webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(100turn);
        transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(100turn);
    }
}
@keyframes spinny {
    from {
        -webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
        transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
    }
    to {
        -webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(100turn);
        transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(100turn);
    }
}

HTML

使用css3 radial-gradient方法实现

css3, spinner

编辑器支持Emmet

快捷键

使用css3 radial-gradient方法实现

css3, spinner

CSS3 单个DIV中画的Poké球

使用CSS3 perspective变换实现的电影卡片悬停3D偏转动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：