前言

以下代码都是从网络中总结下来
为了日后有所应用而总结

功能描述

主要展示鼠标经过这个范围的时候，会有一个动画展示（半透明悬浮下来）

再不点击的情况下（文字后面是全覆盖不滚动的背景图）

刚开始是这样

如果鼠标 在开始的 附近
会出现一个类似如下的界面并且可以显示文字（动态）

代码展示

代码展示

<div align="center" style="position: relative;">
        <div class="contener">
            <div class="txt_init">
                开始</div>
            <div class="opac">
                进入</div>
        </div>
    </div>

关于css的实现代码模块

.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);}   
}