是否可以将一个 div 转换成这个 kind of shape然后用图像填充它?或者更好地将图像转换为该形状?都使用 CSS 或 Javascript。
然后在这个 manner 中排列多个
我打算按照第二张图片将形状分组为几个环。至于图片,它会是动态的,所以不能真正预剪。
*编辑:我找到了我真正想要的效果。其实就是掩饰。在 webkit 中,这个 css 属性:-webkit-mask-box-image 效果很好(我也可以使用 .png 图像作为蒙版),但是当我尝试为 firefox 蒙版时(使用 Illustrator 生成的 .svg 文件),它没有似乎不起作用。使用 -webkit-mask-box-image css 属性可以在 Chrome 中使用相同的 .svg 文件
最佳答案
是的,这是可能的。即使不使用任何 JavaScript 或浏览器特定属性。
demo
我已经对其进行了测试,它适用于所有当前版本的 Chrome、IE、FF、Opera、Safari(在 Windows 7 上)。
想法是让多个轮子具有不同 Angular 切片(使用倾斜变换获取 Angular ;切片也使用旋转变换旋转)。内轮覆盖外轮的中心部分。
我制作的版本非常简单,有两个轮子,内轮有 8 个图像(这意味着内轮的每个切片有 360°/8 = 45°)和外轮有 12 个图像(=> 外层的每个切片有 360°/12 = 30°)。
相关HTML:
<div class='picture-wheel'>
<div class='outer-wheel wheel'>
<div class='slice'><div class='bg'></div></div>
<!-- the rest of the slices, 11 more for this demo -->
<div class='inner-wheel wheel'>
<div class='slice'><div class='bg'></div></div>
<!-- the rest of the slices, 7 more for this demo -->
<div class='cover-wheel wheel'></div>
</div>
</div>
</div>
相关CSS:
.wheel {
overflow: hidden;
position: relative;
border-radius: 50%;
box-shadow: 0 0 1em;
}
.picture-wheel {
width: 30em; height: 30em;
margin: 3em auto 0;
}
.slices-wrapper {
position: absolute;
width: 100%; height: 100%;
}
.slice {
overflow: hidden;
position: absolute;
bottom: 50%; right: 50%;
transform-origin: 100% 100%;
}
.outer { width: 30em; height: 30em; }
.inner-wheel {
transform: rotate(7.5deg);
width: 21em; height: 21em;
margin: 4.5em;
}
.cover-wheel {
width: 12em; height: 12em;
margin: 4.5em;
box-shadow: inset 0 0 1em;
background: white;
}
.bg {
border-radius: 50%;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: 8em 6em;
}
.outer-wheel > .slice {
width: 15em; height: 15em;
transform: skewY(60deg);
}
.outer-wheel > .slice:nth-child(2) { transform: rotate(30deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(3) { transform: rotate(60deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(4) { transform: rotate(90deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(5) { transform: rotate(120deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(6) { transform: rotate(150deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(7) { transform: rotate(180deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(8) { transform: rotate(-150deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(9) { transform: rotate(-120deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(10) { transform: rotate(-90deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(11) { transform: rotate(-60deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(12) { transform: rotate(-30deg) skewY(60deg); }
.outer-wheel > .slice .bg {
width: 30em; height: 30em;
transform: skewY(-60deg) rotate(-15deg);
}
.outer-wheel > .slice .bg {
background-image:
url(image-for-first-slice-outer.jpg);
}
.outer-wheel > .slice:nth-child(2) .bg {
background-image:
url(image-for-second-slice-outer.jpg);
}
/* background images for the other slices of the outer wheel */
.inner-wheel > .slice {
width: 10.5em; height: 10.5em;
transform: skewY(45deg);
}
.inner-wheel > .slice:nth-child(2) { transform: rotate(45deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(3) { transform: rotate(90deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(4) { transform: rotate(135deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(5) { transform: rotate(180deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(6) { transform: rotate(-135deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(7) { transform: rotate(-90deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(8) { transform: rotate(-45deg) skewY(45deg); }
.inner-wheel > .slice .bg {
width: 21em; height: 21em;
transform: skewY(-45deg) rotate(-22.25deg);
}
.inner-wheel > .slice .bg {
background-image:
url(image-for-first-slice-inner.jpg);
}
.inner-wheel > .slice:nth-child(2) .bg {
background-image:
url(image-for-second-slice-inner.jpg);
}
/* background images for the other slices of the inner wheel */
另一个略有不同的增强版:
demo
关于html - 使用 css/javascript 进行图像 mask ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12593528/