用css怎么实现背景色交叉显示?

发布网友 发布时间：2022-04-06 10:26

我来回答

共6个回答

懂视网 时间：2022-04-06 14:47

本篇文章给大家带来的内容是关于如何用纯CSS实现接扎啤的特效（附源码） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含一个表示酒桶的 .keg 元素和表示啤酒杯的 .glass 元素。酒桶有 2 个子元素，.handle 表示把手，.pipe 表示出水管，酒杯有 1 个表示啤酒的子元素 .beer：

<div class="container">
 <div class="keg">
 <span class="handle"></span>
 <span class="pipe"></span>
 </div>
 <div class="glass">
 <span class="beer"></span>
 </div>
</div>

居中显示：

body {
 margin: 0;
 height: 100vh;
 display: flex;
 justify-content: center;
 background: linear-gradient(
 lightslategray 300px,
 #333 300px
 );
}

定义容器尺寸和伪元素的共有属性：

.container {
 width: 700px;
 height: 300px;
 position: relative;
}

.container *::before,
.container *::after {
 content: '';
 position: absolute;
}

画出酒桶：

.keg {
 position: absolute;
 width: 90px;
 height: 200px;
 background: linear-gradient(
 to right,
 #777 70px,
 #555 70px
 );
 bottom: 0;
 left: 310px;
}

画出出水管和它的支架：

.keg .pipe {
 position: absolute;
 width: 10px;
 height: 40px;
 background-color: #ccc;
 top: 33px;
 left: 10px;
}

.keg .pipe::before {
 width: 40px;
 height: 20px;
 background: 
 radial-gradient(
  circle at 10px 10px,
  #eee 7px,
  #ccc 7px, #ccc 10px,
  transparent 10px
 ),
 linear-gradient(
  #ccc 50%,
  #999 50%
 );
 border-radius: 10px;
 top: -2px;
 left: -5px;
}

画出把手：

.keg .handle {
 position: absolute;
 border-style: solid;
 border-width: 50px 10px 0 10px;
 border-color: black transparent transparent transparent;
 top: -10px;
 left: 5px;
}

.keg .handle::before {
 width: 20px;
 height: 10px;
 background-color: #ccc;
 top: -60px;
 left: -10px;
 border-radius: 5px 5px 0 0;
}

.keg .handle::after {
 width: 10px;
 height: 20px;
 background-color: #ccc;
 top: -20px;
 left: -5px;
}

画出酒杯：

.glass {
 position: absolute;
 width: 70px;
 height: 100px;
 color: rgba(255, 255, 255, 0.3);
 background-color: currentColor;
 bottom: 0;
 left: 300px;
 border-radius: 5px;
}

.glass::before {
 width: 50px;
 height: 40px;
 border: 10px solid;
 top: 20px;
 right: -20px;
 border-radius: 0 40% 40% 0;
 clip-path: inset(0 0 0 72%);
}

画出杯中的啤酒和泡沫：

.beer {
 position: absolute;
 width: 60px;
 height: 80px;
 background-color: rgba(255, 206, 84, 0.8);
 bottom: 15px;
 left: 5px;
 border-radius: 0 0 5px 5px;
 border-top: solid rgba(255, 206, 84, 0.8);
}

.beer::before {
 width: inherit;
 height: 15px;
 background-color: #eee;
 top: -15px;
 border-radius: 5px 5px 0 0;
}

接下来制作动画。

增加酒杯把手被压下的动画效果：

.keg .handle {
 transform-origin: center 50px;
 animation: handle 5s infinite;
}

@keyframes handle {
 10%, 60% {
 transform: rotate(0deg);
 }

 20%, 50% {
 transform: rotate(-90deg);
 }
}

增加啤酒被斟满的动画效果：

.beer {
 animation: fillup 5s infinite;
}

@keyframes fillup {
 0%, 20% {
 height: 0px;
 border-width: 0px;
 }

 40% {
 height: 40px;
 }

 80%, 100% {
 height: 80px;
 border-width: 5px;
 }
}

增加啤酒泡沫泛起的动画效果：

.beer::before {
 animation: 
 wave 0.5s infinite alternate,
 fillup-foam 5s linear infinite;
}

@keyframes fillup-foam {
 0%, 20% {
 top: 0;
 height: 0;
 }

 60%, 100% {
 top: -15px;
 height: 15px;
 }
}

@keyframes wave {
 from {
 transform: skewY(-3deg);
 }

 to {
 transform: skewY(3deg);
 }
}

增加啤酒从出水口流出的效果：

.keg .pipe::after {
 width: 10px;
 background-color: rgba(255, 206, 84, 0.5);
 animation: flow 5s infinite;
}

@keyframes flow {
 0%, 15% {
 top: 40px;
 height: 0;
 }

 20% {
 height: 115px;
 }

 40% {
 height: 75px;
 }

 55% {
 top: 40px;
 height: 50px;
 }

 60%, 100% {
 top: 80px;
 height: 0;
 }
}

最后，增加酒杯滑动的效果：

.glass {
 animation: slide 5s ease infinite;
}

@keyframes slide {
 0% {
 left: 0;
 filter: opacity(0);
 }

 20%, 80% {
 left: 300px;
 filter: opacity(1);
 }

 100% {
 left: 600px;
 filter: opacity(0);
 }
}

大功告成！

热心网友 时间：2022-04-06 11:55

其实很简单啊，通过css 的background: linear-gradient() 就可以实现了，最后一个其实也是可以实现的，先写一个从上到下的重复线性渐变，然后再写一个从做到右的重复线性渐变，第二个颜色设置透明，然后通过定位在一起就可以实现了。都是一些比较简单的效果。

热心网友 时间：2022-04-06 13:13

css有背景色渐变的属性background: linear-gradient()，最后两个不知道能不能实现，反正前几个耐心点写应该没问题。实在不行也可以用多个div拼接的形式写。

热心网友 时间：2022-04-06 14:48

第一张到第三张原理一样，一个div包含一个ul和若干个li（横条）
<div class="box1">
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
第一张，分别给基数和偶数li设置不动背景色即可
.box1{width: 240px;height: 240px;margin: 100px auto;overflow: hidden;}
.box1 li{width: 100%;height: 30px;list-style: none;}
.box1 li:nth-child(odd){background: #01aaed;}
.box1 li:nth-child(even){background: #34b9f1;}
第二张张给ul旋转 90度;

.box1 ul{ transform:rotate(90deg);}
第三张，设置ul的宽度大于div对角线的长度的长度即可，增加li的个数，然后使用绝对定位将ul的中心和div的中心点重合，在旋转-45度
.box1 ul{width:340px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);}
注意下transform属性中 translate和rotate的前后位置关系，先位移再旋转而不是先旋转再位移；
第四张合第三张原理一样，只需要用两个li（也可以一个li都不需要直接使用伪类伪类），设置li的高度和div的高度一致即可
.box1 li{width: 100%;height: 240px;list-style: none;}
其余的和第三步样式一样
第五张图，可以看成若干第四张图组合而成，一起是16个小正方形也就是16个li每个李里面一个span，每一个li相当一个第四张图里面的div，li里面的span相当于ul，给span添加两个伪类after和before（相当于第四张图里面的li），然后span的宽度大于li的对角线长度，高度为两个li的长度，伪类的宽高同li，然后span进行定位和旋转，样式如下
.box1{width: 240px;height: 240px;margin: 100px auto;}
.box1 ul{overflow: hidden;}
.box1 li{width: 60px;height: 60px;list-style: none;float: left;position: relative;overflow: hidden;}
.box1 ul li span{width: 90px;height: 120px;display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(45deg);}
.box1 ul li span:before{content: '';display: block;width: 100%;height: 60px;background: #b8d427;}
.box1 ul li span:after{content: '';display: block;width: 100%;height: 60px;background: #c5db52;}
第六张的话 要点在于运用背景色rgba属性的运用，设置50%半透明背景色，div包含一个ul，里面再加两个li，样式如下
.box1{width: 240px;height: 240px;margin: 100px auto;overflow: hidden;}
.box1 ul{width: 100%;height: 100%;position: relative}
.box1 li{width: 100%;height: 120px;list-style: nonebackground: rgba(255,164,163,.5)}
.box1 li:last-child{position: absolute;top:0;left:0;transform: rotate(-90deg);transform-origin: 120px 120px}

最后一张相当于多个第六张图片的集合，布局的话就是给你每个li添加两个伪类 before和after
样式如下
.box1{width: 240px;height: 240px;margin: 100px auto;overflow: hidden;position: relative;}
.box1 ul{width: 100%;height: 100%;overflow: hidden;}
.box1 li{width: 60px;height: 60px;list-style: none;float:left;position: relative;}
.box1 li:after{content: '';display: block;width: 100%;height: 30px;background: rgba(255,164,163,.5);}
.box1 li:before{content: '';display: block;width: 100%;height: 30px;background: rgba(255,164,163,.5);position: absolute;top:0;left:0;transform: rotate(-90deg);transform-origin: 30px 30px}

热心网友 时间：2022-04-06 16:39

<style>

div {float:left; width:200px; height:200px; margin-right:10px}

div.box1 {background:linear-gradient(to bottom, #3bf 0%, #3bf 50%, #0ae 50%, #0ae 100%) left top / 50px 50px}

div.box2 {background:linear-gradient(to right, #3bf 0%, #3bf 50%, #0ae 50%, #0ae 100%) left top / 50px 50px}

div.box3 {background:linear-gradient(45deg, #3bf 0%, #3bf 25%, #0ae 25%, #0ae 50%, #3bf 50%, #3bf 75%, #0ae 75%, #0ae 100%) left top / 72px 72px}

div.box4 {background:linear-gradient(225deg, #ac0 0%, #ac0 50%, #bd3 50%, #bd3 100%) left top / 100% 100%}

div.box5 {background:linear-gradient(225deg, #ac0 0%, #ac0 50%, #bd3 50%, #bd3 100%) left top / 50px 50px}

div.box6 {background:linear-gradient(to bottom, rgba(255,160,160,0.5) 0%, rgba(255,160,160,0.5) 50%, rgba(255,160,160,0) 50%, rgba(255,160,160,0) 100%) left top / 100% 100%, linear-gradient(to right, rgba(255,160,160,0.5) 0%, rgba(255,160,160,0.5) 50%, rgba(255,160,160,0) 50%, rgba(255,160,160,0) 100%) left top / 100% 100%}

div.box7 {background:linear-gradient(to bottom, rgba(255,160,160,0.5) 0%, rgba(255,160,160,0.5) 50%, rgba(255,160,160,0) 50%, rgba(255,160,160,0) 100%) left top / 50px 50px, linear-gradient(to right, rgba(255,160,160,0.5) 0%, rgba(255,160,160,0.5) 50%, rgba(255,160,160,0) 50%, rgba(255,160,160,0) 100%) left top / 50px 50px}

</style>

<div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div><div class="box7"></div>

热心网友 时间：2022-04-06 18:47

纯CSS实现不了 而且后面几张图片 我说了解的知识 是无法实现的