欢迎来到鼎商网建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

css3实现鼠标悬停动态特效

       建站、设计教程     2016-03-01     科恒网络     66     0    

 <div align="center" style="position: relative;">
        <div class="contener">
            <div class="txt_init">
                LOW POLY BACKGROUND</div>
            <div class="opac">
                Download</div>
        </div>
</div>

  css3代码:

 

 代码如下
.contener
{
  width:310px;
  height:140px;
  background-image:url(fond.png);
  overflow: hidden;
  cursor: pointer;
  position:relative;
}
.txt_init
{
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-family: 'Roboto';
  font-size: 22px;
  color: #ffffff;
  font-weight: 500;
}
.opac
{
  opacity: 0;
}
.contener:hover .opac
{
  width:310px;
  position: absolute;
  z-index: 1;
  font-family: 'Roboto';
  font-size: 25px;
  color: #ffffff;
  font-weight: 300;
  line-height: 140px;
  height:140px;
  opacity: 1;
  background-color: rgba(0,0,0,0.7);
  -webkit-animation:oblik 0.4s ease-in;
  -webkit-transform-origin: 0% 100%;
  -moz-animation:oblik 0.4s ease-in;
  -moz-transform-origin: 0% 100%;
  -ms-animation:oblik 0.4s ease-in;
  -ms-transform-origin: 0% 100%;
  animation:oblik 0.4s ease-in;
  transform-origin: 0% 100%;
  
}
@-webkit-keyframes oblik {
  0% {opacity:0;-webkit-transform: rotate(-45deg);}
  100% {opacity:1;-webkit-transform: rotate(0deg);}   
}
@-moz-keyframes oblik {
  0% {opacity:0;-moz-transform: rotate(-45deg);}
  100% {opacity:1;-moz-transform: rotate(0deg);}   
}
@-ms-keyframes oblik {
  0% {opacity:0;-ms-transform: rotate(-45deg);}
  100% {opacity:1;-ms-transform: rotate(0deg);}   
}
@keyframes oblik {
  0% {opacity:0;transform: rotate(-45deg);}
  100% {opacity:1;transform: rotate(0deg);}   
}


--结束END--

本文链接: http://moban.maoyi365.com/station/resources/1990.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“鼎商网”
"鼎商网平台前端开发教学"
每日干货技术分享
 

×

成为 鼎商网平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

鼎商网平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 11482339

客服电话: 400-000-2212

售前咨询 售后服务
在线交谈 智能钉钉

工作时间:

周一至周日: 09:00 - 21:00

WAP

手机
访问

移动端访问
手机上也能选模板

鼎商网平台手机端