gpt4 book ai didi

css - 使用 Css 创建 Minion Logo

转载 作者:行者123 更新时间:2023-12-02 15:29:43 26 4
gpt4 key购买 nike

我目前正在尝试生成此内容,作为从著名的《神偷奶爸》电影中创建完整“小黄人”的一部分。

enter image description here

一切顺利,除了我正在尝试使黑色部分透明(即取出内部黑色部分并使其透明),以便可以看到后面的渐变色)。


.wrap {
height: 300px;
width: 300px;
background: lime;
position: relative;
overflow:hidden;
border-radius:50%;
}
.logoWrap {
height: 200px;
position: absolute;
top: 15%;
left: 15%;
width: 200px;
transform: rotate(45deg);
background: black;
transition:all 0.8s;
}
.logoWrap:before {
content: "";
position: absolute;
height: 100px;
width: 100px;
background: blue;
top: 25%;
left: 25%;
border-radius: 50%;
transition:all 0.8s;
}
.logoWrap:after {
content: "";
position: absolute;
height: 20px;
width: 160px;
background: blue;
border-bottom: 20px solid black;
top: 10%;
right: -40px;
transform: rotate(-45deg);
transition:all 0.8s;
}
.wrap:hover .logoWrap{
background:tomato;
}
.wrap:hover .logoWrap:after{
border-bottom: 20px solid tomato;
}
<div class="wrap">
<div class="logoWrap"></div>
</div>


所以在我的代码片段中,我正在寻找蓝色部分来采用背景色。


请注意

  • 背景颜色将不是纯色(而是渐变或纹理)。

  • 使用图片是不可能的

  • 仍在努力“改进”当前 Logo ,因此首选可更改解决方案,即仍然能够快速更改大小(无需更改剪辑路径的 100 个值)

  • 我有兴趣添加一些动画/悬停,所以这将加强前面的观点

最佳答案

我想这是没有 SVG 的最接近的东西。在这种情况下,SVG 是唯一的选择。

白色部分透明

这是未编辑问题的答案(第一次修订)

  • 我添加了background: transparent; pseudoelementma​​in element

  • 我将 box-shadow 添加到 pseudoelement 并将 overflow: hidden; 添加到主元素。

body {
background: url(http://i.imgur.com/lDKpzMO.jpg);
background-size: 40% 60%;
}
.wrap {
height: 300px;
width: 300px;
background: transparent;
position: relative;
overflow: hidden;
border-radius: 50%;
}
.wrap:before {
content: "";
position: absolute;
height: 200px;
width: 200px;
top: 50px;
left: 50px;
transform: rotate(45deg);
background: transparent;
box-shadow: 0px 0px 0px 1000px black;
}
.circ {
height: 100px;
width: 100px;
background: transparent;
z-index: 10000;
position: relative;
top: 100px;
left: 100px;
border-radius: 50%;
overflow: hidden;
}
.circ:before {
content: "";
position: absolute;
height: 20px;
width: 50px;
top: 50px;
left: 50px;
background: transparent;
box-shadow: 0px 0px 0px 1000px black;
}
.bar {
position: relative;
height: 20px;
width: 200px;
top: 30px;
left: 120px;
background: black;
}
<div class="wrap">
<div class="circ"></div>
<div class="bar"></div>
</div>

编辑

对于你更新的问题,我使用了一个伪元素并添加了一个大的盒子阴影,一个大到它的边变直的盒子阴影。

body {
background: url(http://i.imgur.com/lDKpzMO.jpg);
background-size: 40% 60%;
}
div {
height: 300px;
width: 300px;
position: relative;
transform: rotate(45deg);
overflow: hidden;
margin: 80px;
}
div:before {
content: "";
position: absolute;
height: 120px;
width: 120px;
top: 90px;
left: 90px;
border-radius: 50%;
background: transparent;
box-shadow: -200px 0px 0px 100px black,
0px 200060px 0px 200000px black,
0px -200090px 0px 200000px black;
transform: rotate(-45deg);
}
div:after {
content: "";
position: absolute;
height: 30px;
width: 120px;
top: 96px;
left: 150px;
background: black;
transform: rotate(-45deg);
}
<div></div>

输出:

enter image description here

关于css - 使用 Css 创建 Minion Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28476842/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com