Here I will share with you some of the knowledge I have summarized on the Internet, I hope it will be helpful to everyone
1. Rendering
Recording the screen with a mobile phone and converting it to a gif with a small program may be a bit lacking in precision.
2. Implementation process
1. Observation and thinking
Before we start coding, we first observe the expanded structure: two quarter circles plus three circle menu items. The article is called using css to draw a fan shape. As shown in the picture above, it can achieve the effect of shrinking and expanding without any Javascript assistance. How to achieve it?
2. Use labels skillfully
The graphic content is very simple, and we can use labels to realize the two quarter circles <div>. But as the title shows, interaction can be achieved without JavaScript. How to use tags cleverly? I thought of it label+inputand realized it with the help of their pseudo-classes.
<input checked="checked" type="checkbox">
<label for="menubtn">
<i>开</i>
<i>收</i>
</label>
have to be aware of is:
- The for attribute in the label tag should be the same as the id attribute of the related element, which means that when
labelthe label is used with the label, the attribute in the label must have the same value as the d attribute in the label , otherwise this option will not be selected. , For example: the for attribute in the label tag is menutn, then the id attribute in the input must be menutn, otherwise the label and input will not be associated.inputlabelforinputiinput inputThetypeattribute is set to checkbox. Here we must set the type attribute to the checkbox type, which is a very important step.
3. Realize the small dark purple circle
Through observation, it is not difficult to find that no matter whether the menu is expanded or contracted, the state of the purple campus has not changed, so its style is much simpler. Style directly.
//把label转换成块级元素并定位
label{display: block;transition: transform 0.5s, top 0.5s;position: absolute;bottom: 0;right: 0;margin: auto;z-index:99;cursor:pointer;}
//使用伪类实现深紫色背景
label::after{content:"";width:240px;height:240px;background-color:#8a2be1;position: absolute;bottom:-120px;right:-120px;border-radius: 50%;z-index: 9;}
4. Realize the large circle of lavender
When the menu is expanded, the lavender background is displayed with the menu, and when it is contracted, it is hidden with the menu. So let's add the menu first.
//菜单
<ul class="menu-list">
<li><a>你</a></li>
<li><a>好</a></li>
<li><a>啊</a></li>
</ul>
menu-list
, or use pseudo-classes. In order to realize the subsequent interaction, we need to use pseudo-classes here.
//使用伪类实现淡紫色背景
.menu-list::after{content:"";width:560px;height:560px;background-color: #ebddf8;position: absolute;bottom:-280px;right:-280px;border-radius: 50%;z-index: 9;opacity: 1;transition: opacity .5s;}
5. Complete the interaction
页面基本上画完，我们来实现交互效果。聪明的我们布局的时候借助了label+input组合，input复选框标签具有checked属性，通过此属性可以设置复选框的选中状态。于是便有了input{} input:checked{}
还有一个知识点，元素的兄弟元素：
element1~element2 {// CSS 属性}element1 和 element2 是要选择的两个元素，~ 符号表示选择 element1 后面的所有 element2 元素。element1 + element2 {// CSS 属性}+ 符号表示选择 element1 后面的第一个 element2 元素。CSS 元素的兄弟元素很重要，可以方便地选择相邻的元素并进行样式设置。 重要的知识点就这么多，剩下的修修补补，画画圆定定位，这里不做过多赘述。
6、收工
上代码~
html：
<div class="menu mvcenter">
<input checked="checked" class="menu-btn mvcenter" id="menubtn" type="checkbox">
<label for="menubtn">
<i class="iconfont icon-caidan">开</i>
<i class="iconfont icon-quxiaoguanbi1">收</i>
</label>
<ul class="menu-list">
<li class="mvcenter menu-item"><a class="iconfont icon-lianxi">你</a></li>
<li class="mvcenter menu-item"><a class="iconfont icon-dizhi">好</a></li>
<li class="mvcenter menu-item"><a class="iconfont icon-fankui">啊</a></li>
<li class="mvcenter menu-item"><a class="iconfont icon-fankui">啊</a></li>
</ul>
</div>
body,ul,li,input,div{padding:0;margin:0;}
body{overflow: hidden;}
i{font-style: normal;}
.mvcenter{position: absolute;bottom:20px;right:20px;}
.menu-btn.mvcenter{margin-top: -20px;margin-left:-20px;}
.menu-btn{width:40px;height:40px;cursor: pointer;background-color: red;border-radius: 20px;display: block;z-index: 99;opacity: 0;}
.menu-btn + label{display: block;transition: transform 0.5s, top 0.5s;position: absolute;bottom: 0;right: 0;margin: auto;z-index:99;cursor:pointer;}
.menu-btn + label i{color:#fff; font-size:40px;position: absolute;bottom:5px;right:0;z-index: 12;}
.menu-btn + label i.icon-caidan,.menu-btn:checked + label i.icon-quxiaoguanbi1{opacity: 1;}
.menu-btn + label i.icon-quxiaoguanbi1,.menu-btn:checked + label i.icon-caidan{opacity: 0;}
.menu-btn:checked + label + .menu-list::after{opacity: 1;}
.menu-btn + label::after{content:"";width:240px;height:240px;background-color:#8a2be1;position: absolute;bottom:-120px;right:-120px;border-radius: 50%;z-index: 9;}
.menu-list::after{content:"";width:560px;height:560px;background-color: #ebddf8;position: absolute;bottom:-280px;right:-280px;border-radius: 50%;z-index: 9;opacity: 0;transition: opacity .5s;}
.menu-list > li.mvcenter{margin-top: -40px;margin-left:-40px;}
.menu-list > li{width:70px;height:70px;border-radius:80px;border:3px solid #b880eb;color:#8a2be1;display: flex;align-items: center;justify-content: center; opacity: 0;transition: all .5s;transform-origin: center center;z-index: 12;}
.menu-list > li:nth-child(1){transform:rotate(0)}
.menu-list > li:nth-child(2){transform:rotate(-45deg)}
.menu-list > li:nth-child(3){transform:rotate(-90deg)}
.menu-list > li a{font-size:30px;font-weight: bold;}
.menu-list > li:nth-child(1) a{transform:rotate(10deg)}
.menu-list > li:nth-child(2) a{transform:rotate(-45deg)}
.menu-list > li:nth-child(3) a{transform:rotate(-90deg)}
.menu-btn:checked ~ ul .menu-item {opacity: 1;}
.menu-btn:checked ~ ul .menu-item:nth-child(1) {transform: rotate(0) translateX(-120px);}
.menu-btn:checked ~ ul .menu-item:nth-child(2) {transform: rotate(45deg) translateX(-120px);}
.menu-btn:checked ~ ul .menu-item:nth-child(3) {transform: rotate(90deg) translateX(-120px);}
本文转载于:
https://juejin.cn/post/7265624177775624252
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
