|
@@ -354,24 +354,24 @@
|
|
.chose-img-box{
|
|
.chose-img-box{
|
|
li{
|
|
li{
|
|
width: 25%;display: inline-block;
|
|
width: 25%;display: inline-block;
|
|
- div{width: 190px;height: 190px;border-radius:50%;position:relative;margin: 48px auto 24px;transition: all 0.3s;background-size: cover}
|
|
|
|
- i{width: 62px;height: 62px;position: absolute;top: 63px;left: 45px;background-size: cover;}
|
|
|
|
|
|
+ div{width: 152px;height: 152px;border-radius:50%;position:relative;margin: 48px auto 24px;transition: all 0.3s;background-size: cover}
|
|
|
|
+ i{width: 55px;height: 50px;position: absolute;top: 45px;left: 35px;background-size: cover;}
|
|
h5{@include setFontStyle(-2);text-align: center;color: rgba(0,0,0,0.85);}
|
|
h5{@include setFontStyle(-2);text-align: center;color: rgba(0,0,0,0.85);}
|
|
}
|
|
}
|
|
li:nth-child(1){
|
|
li:nth-child(1){
|
|
- div{background-image: url("~static/images/client/index/index-chose-service.png");}
|
|
|
|
|
|
+ div{background-image: url("~static/images/client/index/index-chose-service.svg");}
|
|
i{background-image: url("~static/images/client/index/index-chose-service-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
|
|
i{background-image: url("~static/images/client/index/index-chose-service-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
|
|
}
|
|
}
|
|
li:nth-child(2){
|
|
li:nth-child(2){
|
|
- div{background-image: url("~static/images/client/index/index-chose-system.png");}
|
|
|
|
- i{background-image: url("~static/images/client/index/index-chose-system-icon.svg");top: 30px;left: 50px;animation: 3s choseImgUpDown2 linear infinite;}
|
|
|
|
|
|
+ div{background-image: url("~static/images/client/index/index-chose-system.svg");}
|
|
|
|
+ i{background-image: url("~static/images/client/index/index-chose-system-icon.svg");top: 22px;left: 40px;animation: 3s choseImgUpDown2 linear infinite;}
|
|
}
|
|
}
|
|
li:nth-child(3){
|
|
li:nth-child(3){
|
|
- div{background-image: url("~static/images/client/index/index-chose-tech.png");}
|
|
|
|
|
|
+ div{background-image: url("~static/images/client/index/index-chose-tech.svg");}
|
|
i{background-image: url("~static/images/client/index/index-chose-tech-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
|
|
i{background-image: url("~static/images/client/index/index-chose-tech-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
|
|
}
|
|
}
|
|
li:nth-child(4){
|
|
li:nth-child(4){
|
|
- div{background-image: url("~static/images/client/index/index-chose-operate.png");}
|
|
|
|
|
|
+ div{background-image: url("~static/images/client/index/index-chose-operate.svg");}
|
|
i{background-image: url("~static/images/client/index/index-chose-operate-icon.svg");animation: 3s choseImgUpDown3 linear infinite;}
|
|
i{background-image: url("~static/images/client/index/index-chose-operate-icon.svg");animation: 3s choseImgUpDown3 linear infinite;}
|
|
}
|
|
}
|
|
li:hover{
|
|
li:hover{
|
|
@@ -380,12 +380,12 @@
|
|
}
|
|
}
|
|
//选择我们动画效果
|
|
//选择我们动画效果
|
|
@keyframes choseImgUpDown1 {
|
|
@keyframes choseImgUpDown1 {
|
|
- 0%, to {top: 65px;}
|
|
|
|
|
|
+ 0%, to {top: 45px;}
|
|
50% {top: 55px;}
|
|
50% {top: 55px;}
|
|
}
|
|
}
|
|
@keyframes choseImgUpDown2 {
|
|
@keyframes choseImgUpDown2 {
|
|
- 0%, to {top: 30px;}
|
|
|
|
- 50% {top: 40px;}
|
|
|
|
|
|
+ 0%, to {top: 22px;}
|
|
|
|
+ 50% {top: 32px;}
|
|
}
|
|
}
|
|
@keyframes choseImgUpDown3 {
|
|
@keyframes choseImgUpDown3 {
|
|
0%, to {top: 40px;}
|
|
0%, to {top: 40px;}
|