基于CSS的几个图片交互设计

三种动画交互设计：

hover属性:

 

 1.鼠标移入图片，图片自动放大。

 2.鼠标移入时div由半透明状态转换为透明文字上移消失，鼠标指向icon颜色变化为红色。

 3.鼠标移入时边框下移，文字显示。

 用到以下属性较多:

transition 实现逐渐变化的动画

hover 鼠标移入事件

scale 函数放大图片

overflow: hidden; 控制图片在图片外围盒子中

 为了方便好写代码，没有单独用容器装图片，直接设置的容器背景，

部分Css代码如下：

效果1-CSS：

.fudong:hover .xiaoguo1{
    -webkit-transform:scale(1.15);
    -moz-transform:scale(1.15);
    -o-transform:scale(1.15);
    transform:scale(1.15);
    -webkit-transition:all 2s ease;
    -moz-transition:all 2s ease;
    -o-transition:all 2s ease;
    transition:all 2s ease;
}

效果2-css

   .bc{
    background-color: rgba(0,0,0,0.51);    /*先给背景图层设置透明度,*/
    position: relative;
    transition: all 1s linear;
    }
    .bc h2{
    color: white;
    position: absolute;
    transition:  all 1s linear;
    }
    .beijing{
    background:url("../img/dongtai.jpg") ;
    background-size: cover;
    }
    .bc:hover{
    background-color: rgba(0,0,0,0.0);    /*鼠标移入时变成全透明*/
    }
    .bc:hover h2{
     opacity: 0;                          /* 鼠标移入时文字消失*/
    }
    .beijing div span:hover{              /* 鼠标移入时icon变红*/
    color: red;                           
    }

为了精简代码将宽高移除，icon使用的是<span>标签

 效果3-css

#bk{
    border: 8px solid white;
    width: 220px;
    height: 100px ;
    position: relative;
    top: 15px;
    left: 20px;
}
.type_text{
    font-size: 20px;
    color: white;
    position: relative;
    left: 50px;
    top: -70px;
}
.type_text2 {
    width:200px ;
    height:100px;
    color: white;
    position: relative;
    left: 50px;
    top: 20px;
    opacity: 0;   /* 设置不可见*/
    background-color: rgba(0,0,0,0.0);   /*设置透明度*/
    transition: all .5s linear;          /*设置动画渐变时间*/
}
.jh :hover   {
    opacity: 1;     /*鼠标移入时可见*/
}
.jh{
    height: 275px;
}
.jh:hover #bk{
    position: relative;
    top: 140px;
}

 部分代码如上，代码写的比较杂乱，后续整理后，将代码上传至GitHub欢迎大家一起改进。