WEB前端

css动画 鼠标放上弹出文字效果

位置:首页 > WEB前端 > css教程,2019-08-06 13:43
不用jquery 实现的css动画 鼠标放上弹出文字效果,网站开发是这样的效果经常用到。在此分享一下。

不用jquery 实现的css动画 鼠标放上弹出文字效果,网站开发是这样的效果经常用到。在此分享一下。

css动画(图0)

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>css动画 鼠标放上弹出文字效果</title>
  <style>
  *{margin:0px;border:0px;padding:0px;text-align:center;}
  ul,li{list-style:none;}


.clear{clear:both;}
.model{  width: 100%; }

.model .modList{ overflow: hidden; width: 102%; margin-top: 50px; position: relative}
.model .modList li{ float: left; position: relative; width: 25%;}
.model .modList li img{ display: block; width: 100%;}
.model .nextMode{ position: absolute; top:0; left:0; background: url("modelBg.png") repeat center; width: 100%; height: 100%;}
.model .wen{background: url("modle_wenBg.png") no-repeat center top;width: 160px;height: 160px;position: absolute;left:50%;margin-left: -80px;top: 50%;margin-top: -80px; transition: margin-top .5s ease-in-out}
.model .wen h3{ font-size: 24px; text-align: center; margin-top: 50px; color: #fff; font-weight: normal; line-height: 35px;}
.model .nextMode p{ text-align: center; color: #fff; font-size: 18px; position: absolute; width: 100%; left:500px; top:50%; filter: alpha(opacity=0); opacity: 0; transition: left .5s,opacity .5s ease-in-out; margin-top: 30px;line-height: 30px;}
.model .nextMode a.more{ display: block; width: 33px; height:11px; left:50%; margin-left: -500px;bottom: 130px; position: absolute;filter: alpha(opacity=0); opacity: 0; transition: margin-left .5s ease-in-out,opacity .5s ease-in-out;}
.model .modList li:hover .wen{ margin-top: -160px; background-position:bottom}
.model .modList li:hover .nextMode p{  opacity: 1; left:0; filter: alpha(opacity=100)}
.model .modList li:hover .nextMode a.more{  opacity: 1; margin-left:-16px; filter: alpha(opacity=100)}


 </style>
 </head>
 <body>
 <div class="model">

  <ul class="modList">
    
            <li>
                <img src="20170424213250_23912.jpg" alt=" 景观风车设计">
                <div class="nextMode">
                    <div class="wen">
                        <h3>
                            专业从事<br>
                            <b>
                                景观风车设计</b></h3>
                    </div>
                    <p>
                        专业从事景观风车和园林风车、情趣动感风车、<br>水车、各种雕塑、园林设计、<br>园林施工以及能源等相关产品的研发<br>设计和应用推广</p>
                   
                </div>
            </li>
        
            <li>
                <img src="20170424213401_42874.jpg" alt="景观风车设计">
                <div class="nextMode">
                    <div class="wen">
                        <h3>
                            技术力量雄厚<br>
                            <b>
                                 设计理念新颖</b></h3>
                    </div>
                    <p>
                        公司产品以精巧的设计、先进的技术、<br>独特的造型、可靠的质量、<br>赢得客户的较好的口碑、产品遍布国内外</p>
                   
                </div>
            </li>
        
            <li>
                <img src="20170424213447_67586.jpg" alt="景观风车设计">
                <div class="nextMode">
                    <div class="wen">
                        <h3>
                            高级设计人员<br>
                            <b>
                                 11名</b></h3>
                    </div>
                    <p>
                        本公司拥有高级设计人员11名,<br>高级工程师6名,<br>新能源设计研发人员数名,<br>
                        也是目前高专业从事园林景观风车<br>
                        加工制作的企业。</p>
                   
                </div>
            </li>
        
            <li>
                <img src="20170424213512_21616.jpg" alt="景观风车设计">
                <div class="nextMode">
                    <div class="wen">
                        <h3>
                            携手合作<br>
                            <b>
                                共创辉煌</b></h3>
                    </div>
                    <p>
                        青州美亚景观能源有限公司<br/>与您携手共创辉煌</p>
                   
                </div>
            </li>
        <div class="clear"></div>
</ul>
</div>

 </body>
</html>

TAGS:css动画

猜你喜欢

NewHot