CSS3渐变条纹背景图案的旋转效果

Gradient rotation

css3, stripes, pattern

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}
div::before,
div::after {
    background-color: #111111;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNTAnIGhlaWdodD0nNTAnIHZpZXdCb3g9JzAgMCAxMCAxMCcgPgoJPGcgaWQ9J2cnPgoJCTxwYXRoIGQ9J001IDZsLTYgLTYgdi0yIGw2IDYnIGZpbGwtb3BhY2l0eT0nMCcgc3Ryb2tlPScjMjIyMjIyJyAvPgoJCTxwYXRoIGQ9J001IDVsNiAtNiB2LTIgbC02IDYnIGZpbGwtb3BhY2l0eT0nMCcgc3Ryb2tlPScjMTgxODE4Jy8+Cgk8L2c+Cgk8dXNlIHhsaW5rOmhyZWY9JyNnJyB5PSctNCcvPgoJPHVzZSB4bGluazpocmVmPScjZycgeT0nNCcvPgoJPHVzZSB4bGluazpocmVmPScjZycgeT0nOCcvPgoJPHVzZSB4bGluazpocmVmPScjZycgeT0nMTInLz4KPC9zdmc+');
}
div {
    position: relative;
    width: 100%;
    height: 100%;
}
div::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
div::before {
    content: "";
    z-index: -1;
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

HTML

Gradient rotation

css3, stripes, pattern

编辑器支持Emmet

快捷键

Gradient rotation

css3, stripes, pattern

CSS3渐变实现的斜折线条纹背景图案

使用SVG+CSS3实现带旋转星辰背景的动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：