基于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欢迎大家一起改进。