css-animate制作列表鼠标移动覆盖透明层

发布时间:2017-7-1 11:24:14编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"css-animate制作列表鼠标移动覆盖透明层 ",主要涉及到css-animate制作列表鼠标移动覆盖透明层 方面的内容,对于css-animate制作列表鼠标移动覆盖透明层 感兴趣的同学可以参考一下。

效果

 

比列使用bootcdn加速

html

<!DOCTYPE html><!-- saved from url=(0065)javascript:; --><html lang="en" ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!-- Meta --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <!-- SITE TITLE --><title>Home</title>            <!-- Latest Bootstrap min CSS --><link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"><!-- animate CSS -->        <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"><!-- Style CSS --><link rel="stylesheet" href="./style.css">    </head><body data-spy="scroll" data-offset="80"><!-- START OUR TEAM --><section id="team" class="our_team section-padding">    <div class="container">                <div class="row text-center">                    <div class="col-md-3 col-sm-6">                <div class="single_team">                    <div class="img_wrap">                        <img src="./1(1).jpg" class="img-responsive" alt="">                        <div class="social_link">                            <div class="social_table">                                <ul class="list-inline">                                    <li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-linkedin"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-google-plus"></i></a></li>                                </ul>                            </div>                        </div>                    </div>                </div>            </div> <!-- End Col -->                            <div class="col-md-3 col-sm-6">                <div class="single_team">                    <div class="img_wrap">                        <img src="./2(1).jpg" class="img-responsive" alt="">                        <div class="social_link">                            <div class="social_table">                                <ul class="list-inline">                                    <li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-linkedin"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-google-plus"></i></a></li>                                </ul>                            </div>                        </div>                    </div>                </div>            </div> <!-- End Col -->                                <div class="col-md-3 col-sm-6">                <div class="single_team">                    <div class="img_wrap">                        <img src="./3(1).jpg" class="img-responsive" alt="">                        <div class="social_link">                            <div class="social_table">                                <ul class="list-inline">                                    <li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-linkedin"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-google-plus"></i></a></li>                                </ul>                            </div>                        </div>                    </div>                                    </div>            </div> <!-- End Col -->                            <div class="col-md-3 col-sm-6">                <div class="single_team">                    <div class="img_wrap">                        <img src="./4(1).jpg" class="img-responsive" alt="">                        <div class="social_link">                            <div class="social_table">                                <ul class="list-inline">                                    <li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-linkedin"></i></a></li>                                    <li><a href="javascript:;"><i class="fa fa-google-plus"></i></a></li>                                </ul>                            </div>                        </div>                    </div>                                    </div>            </div> <!-- End Col -->            </div>    </div></section><!-- END TEAM -->        </body></html>

css

body {    background-color: #fff;    color: #777;    font-family: "Source Sans Pro",sans-serif;    font-size: 16px;    font-weight: 400;    line-height: 26px;}html,body { height: 100% }a {    font-family: "Montserrat",sans-serif;    text-decoration: none;    -webkit-transition: all 0.2s;    transition: all 0.2s;}a, a:hover {    color: #8bc34a;    text-decoration: none;}a:focus {    outline: none;    text-decoration: none;}ul,li {    margin: 0;    padding: 0;}.section-padding { padding: 60px 0 }.single_team{    margin-top: 30px;}.single_team h3{    color: #8bc34a;    font-size: 18px;    margin-bottom: 5px;    margin-top: 15px;    text-transform: uppercase;}.img_wrap{    position:relative;}.social_link{    height: 100%;    opacity: 0;    position: absolute;    text-align: center;    top: 0;    transition: all 0.5s ease 0s;    visibility: hidden;    width: 100%;    z-index: 1;    background: rgba(0,0,0,0.5);    transform: scale(0);}.img_wrap:hover .social_link{    opacity: 1;    visibility: visible;    transform: scale(1)}.social_table{    display: table;    height: 100%;    width: 100%;    }.social_table ul{    list-style: none;    display: table-cell;    list-style: outside none none;    padding: 0;    vertical-align: middle;}.social_table ul a{    background: #8bc34a none repeat scroll 0 0;    border: 1px solid #8bc34a;    border-radius: 50%;    color: #fff;    display: inline-block;    height: 40px;    line-height: 40px;    transition: all 0.5s ease 0s;    width: 40px;}.social_table ul a:hover{background: #fff none repeat scroll 0 0;    color: #333;    border-color: #fff;}

 另两个css为bootcdn的极速加载文件


上一篇:王者荣耀、阴阳师后,VR游戏将成腾讯网易新战场
下一篇:hdu4801 PocketCube 2阶魔方

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款