当前位置 : IT培训网 > Web前端 > Web培训 > 【CSS教程】鼠标滑过背景的视觉效果

【CSS教程】鼠标滑过背景的视觉效果

时间：2016-09-01 16:26:06  来源：CSS培训网  作者：IT培训网  已有：名学员访问该课程
标签(Tag):   CSS教程(20)
该视觉差特效中，在鼠标滑过圆形图片时，图片中的各层元素以不同的速度开始动画，形成强烈的视觉差效果。

这是一款使用纯CSS3制作的效果非常炫酷的圆形图片鼠标滑过背景视觉差动画特效。该视觉差特效中，在鼠标滑过圆形图片时，图片中的各层元素以不同的速度开始动画，形成强烈的视觉差效果。

使用方法

HTML结构

该视觉差特效使用的HTML结构为嵌套

的HTML结构。在包裹容器div.page中，每一个div.content元素是一个视觉差效果。在它里面是一个用于圆形图片的div.circle元素。所有的图片都放置在div.circle_inner中，div.content_shadow是圆形的阴影效果。

【CSS教程】鼠标滑过背景的视觉效果_www.itpxw.cn

【CSS教程】鼠标滑过背景的视觉效果_www.itpxw.cn

CSS样式

用于制作圆形图片效果的是.circle_inner元素，它采用相对定位，超出的部分会被隐藏，并为所有的动画设置0.3秒的过渡效果。

【CSS教程】鼠标滑过背景的视觉效果_www.itpxw.cn

在鼠标滑过时，它会被放大1.1倍。

【CSS教程】鼠标滑过背景的视觉效果_www.itpxw.cn

同时会以不同的距离来移动它下面的图片，由于各个图片的移动速度不同，所以产生了视觉差效果。

【CSS教程】鼠标滑过背景的视觉效果_www.itpxw.cn

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始！ IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清？点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通，咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
分享到：QQ空间新浪微博腾讯微博人人网微信
------分隔线----------------------------

大话IT

推荐内容

图文推荐