纯CSS3液态胶合效果环形菜单特效

秒速五厘米 2022-12-08 06:04 135阅读 0赞

![04c3fc73f3f20b30c1429e393b7db64d.png][]

点击上方蓝字关注我哦

![1a0ad430e00e15c3f7e50869ab3a1c3c.png][]

![b58760a2c992229781f658268b61b026.gif][]

**我们要实现这样的效果,首先看我们的html结构**

<i></i>

</label>

</div>

![26c7a96391d280e9c3f7b0f3d36d1e39.png][]

**   然后书写CSS样式  **

\* \{

margin: 0;

padding: 0

body \{

background-color: \#000

.wrap \{

position: relative;

width: 230px;

height: 250px;

border: 1px solid red;

margin: 50px auto;

![b1b642999a7fed27b6b48f1f93e157be.png][]

**  然后是label的样式  **

.wrap label \{

position: absolute;

left: 0px;

top: 10px;

width: 70px;

height: 70px;

background-color: \#f44336;

text-align: center;

border-radius: 35px;

/\* font-size:0; \*/

line-height: 1;

.wrap label i \{

display: inline-block;

width: 40px;

height: 6px;

background-color: \#fff;

border-radius: 4px;

![cc25ee3ef45883b7f7f9679051734c7b.png][]

**最后是每一个图标菜单的样式,一开始肯定是叠在一起的并且被Label覆盖 我们可以使用绝对定位去实现.**

![101558a46f647d6066e0c51c0280e979.png][]

**之后input被点击后  也就是相当于label被点击后让他们改变样式走到相应的位置**

.wrap input:checked~.blob \{

background-color: \#fff;

color: \#888;

.wrap input:checked~.blob:nth-of-type(1) \{

left: 100px;

top: 35px;

.wrap input:checked~.blob:nth-of-type(2) \{

left: 65px;

top: 85px;

.wrap input:checked~.blob:nth-of-type(3) \{

left: 15px;

top: 120px;

.wrap input:checked~.blob:nth-of-type(4) \{

left: 180px;

top: 45px;

.wrap input:checked~.blob:nth-of-type(5) \{

left: 160px;

top: 100px;

.wrap input:checked~.blob:nth-of-type(6) \{

left: 120px;

top: 145px;

.wrap input:checked~.blob:nth-of-type(7) \{

left: 70px;

top: 180px;

.wrap input:checked~.blob:nth-of-type(8) \{

left: 15px;

top: 200px;

**到此我们效果全部完成了,以下去全部源码↓**

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

\* \{

margin: 0;

padding: 0;

body \{

background-color: \#000;

.wrap \{

position: relative;

width: 230px;

height: 250px;

border: 1px solid red;

margin: 50px auto;

.wrap label \{

position: absolute;

left: 0px;

top: 10px;

width: 70px;

height: 70px;

background-color: \#f44336;

text-align: center;

border-radius: 35px;

/\* font-size:0; \*/

line-height: 1;

.wrap label i \{

display: inline-block;

width: 40px;

height: 6px;

background-color: \#fff;

border-radius: 4px;

.wrap input \{

display: none;

.wrap .blob \{

position: absolute;

left: 10px;

top: 10px;

width: 50px;

height: 50px;

border-width: 0;

background-color: \#f44336;

outline: none;

font-size: 30px;

border-radius: 25px;

transition: 0.5s;

.wrap input:checked ~ .blob \{

background-color: \#fff;

color: \#888;

.wrap input:checked ~ .blob:nth-of-type(1) \{

left: 100px;

top: 35px;

.wrap input:checked ~ .blob:nth-of-type(2) \{

left: 65px;

top: 85px;

.wrap input:checked ~ .blob:nth-of-type(3) \{

left: 15px;

top: 120px;

.wrap input:checked ~ .blob:nth-of-type(4) \{

left: 180px;

top: 45px;

.wrap input:checked ~ .blob:nth-of-type(5) \{

left: 160px;

top: 100px;

.wrap input:checked ~ .blob:nth-of-type(6) \{

left: 120px;

top: 145px;

.wrap input:checked ~ .blob:nth-of-type(7) \{

left: 70px;

top: 180px;

.wrap input:checked ~ .blob:nth-of-type(8) \{

left: 15px;

top: 200px;

</style>

</head>

<body>

<div>

<i></i>

</label>

</div>

</body>

</html>

![727c89530c9131cc311b7f0732eea6bf.png][]

END

![aee366aed26a441ac9e2ab4703b509d5.png][]

![5d24daa671a83103670992ba4d898ed3.png][]

![40519e7d7ba8dd23ad0229b74696b065.png][]

长按二维码识别

精彩内容早知道

![ecb5608ecc806ba8104e60314220e586.png][]

![54b0db17cbb8d97ab807b707a8371763.png][]

三连一下，了解更多软件知识

[04c3fc73f3f20b30c1429e393b7db64d.png]: /images/20221123/3ebc107a2de54ec8acecdd29d387438c.png
[1a0ad430e00e15c3f7e50869ab3a1c3c.png]: /images/20221123/3341082c870e49068b102f89ccefdbba.png
[b58760a2c992229781f658268b61b026.gif]: /images/20221123/91f0266c1cc74e72adf2fc3b48d33729.png
[26c7a96391d280e9c3f7b0f3d36d1e39.png]: /images/20221123/a8b6599485904036983d56d7383818c9.png
[b1b642999a7fed27b6b48f1f93e157be.png]: /images/20221123/4e2d3183283744a1b919b7247bee5f7d.png
[cc25ee3ef45883b7f7f9679051734c7b.png]: /images/20221123/8ae16d7abeb845b8806e208d1ebeeb80.png
[101558a46f647d6066e0c51c0280e979.png]: /images/20221123/75887886820e4ff69f14b915d5a5e339.png
[727c89530c9131cc311b7f0732eea6bf.png]: /images/20221123/4e372791e8064cb898227adc62dcb7b0.png
[aee366aed26a441ac9e2ab4703b509d5.png]: /images/20221123/5abed7f0f7834f64949381dab93d337c.png
[5d24daa671a83103670992ba4d898ed3.png]: /images/20221123/8238076bf7c54721a88cbdb1c65c9e9b.png
[40519e7d7ba8dd23ad0229b74696b065.png]: /images/20221123/23ababe98f104648aa81acfca0f9356b.png
[ecb5608ecc806ba8104e60314220e586.png]: /images/20221123/0a9cd3dc65d045b49795f6b5664216cc.png
[54b0db17cbb8d97ab807b707a8371763.png]: /images/20221123/8cd338f0108640bca42406ac2b30b9ea.png