Bootstrap公司业务分类布局界面设计

这是一款Bootstrap公司业务分类布局界面设计。该设计的目的是在页面上介绍公司的主要业务。它使用bootstrap网格系统进行布局，并用CSS3制作鼠标hover时的动画效果。

使用方法

HTML结构

该Bootstrap公司业务分类布局界面的HTML结构如下：

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="serviceBox">
                <div class="service-icon">
                    <i class="fa fa-globe"></i>
                </div>
                <div class="service-Content">
                    <h3 class="title">Web Design</h3>
                    <p class="description">
                        描述信息1
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-sm-6">
            <div class="serviceBox">
                <div class="service-icon">
                    <i class="fa fa-briefcase"></i>
                </div>
                <div class="service-Content">
                    <h3 class="title">Brand Building</h3>
                    <p class="description">
                        描述信息2
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-sm-6">
            <div class="serviceBox">
                <div class="service-icon">
                    <i class="fa fa-mobile"></i>
                </div>
                <div class="service-Content">
                    <h3 class="title">Responsive Design</h3>
                    <p class="description">
                        描述信息3
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
                

CSS样式

然后通过下面的CSS样式来对该Bootstrap公司业务分类布局界面进行美化。

.serviceBox{
    border: 1px solid #ededed;
    padding: 30px 30px 30px 90px;
    position: relative;
    transition: all 0.5s ease 0s;
}
.serviceBox:hover{
    border-color: #41d7f7;
}
.serviceBox:before,
.serviceBox:after{
    content: "";
    display: block;
    width: 50px;
    height: 5px;
    background: #41d7f7;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.serviceBox:before{
    top: -3px;
}
.serviceBox:after{
    bottom: -3px;
}
.serviceBox:hover:before,
.serviceBox:hover:after{
    left: 40px;
    opacity: 1;
}
.serviceBox .service-icon{
    display: inline-block;
    position: absolute;
    top: 33%;
    left: 23px;
    font-size: 45px;
    color: #41d7f7;
    opacity: 0.3;
    transition: all 0.5s ease-in 0s;
}
.serviceBox:hover .service-icon{
    opacity: 1;
}
.serviceBox .title{
    font-size: 16px;
    font-weight: 700;
    color: #41d7f7;
    margin-bottom: 15px;
}
.serviceBox .description{
    font-size: 13px;
    color: #666;
    line-height: 20px;
}
@media only screen and (max-width: 990px){
    .serviceBox{ margin-bottom: 30px; }
}