胶囊式的CSS移动效果
一个胶囊式的css打开效果。
用的基本html和css，当页源码为简化的基础版，而且是。
高级版本演示：save.rthe.xyz/404
HTML部分：
<!--cente 选择元素用--> <div class="center"> <!--全部内容--> <div class="j-h"> <!--背景，为了观察，后期可删除--> <div class="background"></div> <!--左胶囊部分--> <div class="j-x"> <!--左胶囊外部圆角部分--> <div class="j-x-x"></div> <!--左胶囊内部尖突部分--> <div class="j-x-t"></div> </div> <!--右胶囊部分--> <div class="j-y"> <!--右胶囊内部尖突部分--> <div class="j-y-t"></div> <!--右胶囊外部圆角部分--> <div class="j-y-y"></div> </div> <!--中心方块/圆球部分--> <div class="j-h-c"> <!--胶囊闭合时显示的内容--> <span class="case">开始</span> <!--胶囊打开后显示的内容--> <span class="cu">出来吧！<br>皮卡丘！</span> </div> </div> </div>
CSS部分：
/*整体略微居中（不严谨），给胶囊留出打开空间。*/
.j-h {
position: relative;
margin: 200px auto;
margin-left: 50%;
left: -5%;
}
/*胶囊闭合时方块属性设置*/
.j-h-c {
width: 60px;
height: 60px;
margin: 20px;
background-color: rgb(255, 217, 0);
z-index: 5;
transform: rotate(45deg);
position: absolute;
}
/*左侧胶囊居左*/
.j-x {
position: absolute;
left: -100px;
}
/*设置左胶囊圆角部分的属性*/
.j-x-x {
width: 100px;
height: 100px;
background-color: #f50;
border-radius: 50% 0% 0% 50%;
z-index: 10;
float: left;
}
/*设置左胶囊尖突部分的属性*/
.j-x-t {
border: 50px solid transparent;
border-left-color: #f50;
border-bottom-color: #f50;
z-index: 10;
float: left;
}
/*右居中*/
.j-y {
left: 0;
position: absolute;
}
/*右圆角部分*/
.j-y-y {
width: 100px;
height: 100px;
background-color: rgb(224, 224, 224);
border-radius: 0% 50% 50% 0%;
z-index: 10;
float: left;
}
/*右尖突部分*/
.j-y-t {
border: 50px solid transparent;
border-right-color: rgb(224, 224, 224);
border-top-color: rgb(224, 224, 224);
z-index: 10;
float: left;
}
/*方块-文字部分*/
.case{
display: block;
width: 40px;
height: 40px;
transform: rotate(-45deg);
line-height: 60px;
text-align: center;
font-weight: bold;
color: #000000;
}
/*方块-隐藏文字部分*/
.cu {
transform: rotate(-45deg);
display: none;
line-height: 25px;
margin: 10px 0 0 10px;
}
/*没啥用。。。*/
.center {
margin-top: 20px;
margin-left: 20px;
}
/*胶囊打开-方块变圆球*/
.center:hover .j-h-c {
width: 100px;
height: 100px;
margin: 0;
border-radius: 50%;
background-color: blueviolet;
transition: 0.4s;
transform: rotate(405deg);
}
/*圆球显示*/
.center:hover .cu {
display: block;
color: white;
transition: 0.4s;
}
/*方块隐藏*/*/
.center:hover .case {
display: none;
}
/*左胶囊打开*/
.center:hover .j-x {
left: -300px;
transition: 0.4s;
}
/*右胶囊打开*/
.center:hover .j-y {
left: 200px;
transition: 0.4s;
}
/*背景变大*/
.center:hover .background {
width: 700px;
left: -300px;
}
/*背景部分属性设置*/
.background{
width: 300px;
height: 100px;
position: absolute;
left: -100px;
background: #146634;
}请注意修改。
