各位网友大家好,我是陌上花会开,人称陌陌。今天我带领大家开发一个仿天猫首页图片展示动画特效的案例。一如往常,我既不提供源码给大家,也不提供Demo给大家,只是希望大家能跟着我的讲解,然后将代码一步步复制到本地,本人可以保证,页面上的代码复制到本地,绝对百分百运行,且得到与陌陌一样的运行效果。我这么做只为激起大伙的动手能力,望大家能明白我的用心。
好了,不废话了,直接本篇的实战开发吧。
我们看一下我们今天要做的实战案例效果图:
1. 鼠标划过前:
2. 鼠标划过右侧的图片时:
可能大伙看这个静态截图效果不是太清楚,这个大家可以直接访问天猫主页,然后再将本案例中的代码复制到本地运行,大家就会发现,两边实现的效果是一模一样的。
首先,我在天猫主页上面,获得了7张图片,编写html代码如下:
此时页面运行效果如下:
由于图片位于不同的块元素div中,默认是占满一样的,所以我们看到此时是换行显示的。
现在我们让内容居中显示,且按照图片的宽度,设置最外层容器.floor_banner-container的固定宽度为1000px,且让包裹图片的div容器向左浮动,以使所有图片显示在同一样,样式代码如下:
此时我们再查看一下页面效果:
我们再回头看一下最开始成品的效果图,我们发现一大一小两个图片应该显示在一列中,现在确是处于同一行,我们知道,块元素默认占一行的,所以此时我们给.floor_banner应用样式吧:
此时在看一下运行效果图:
至少目前页面样子已经出来了,我们再到天猫首页去看一下动画特效。我们发现,当鼠标划过图片所在区域时,图片会向左偏移一定距离;当鼠标划出时,又恢复原位。
好,知道了动画效果,我们现在就利用CSS3的transition属性来实现今天的实战案例:
大家从上面这段样式代码可以看到,我们只监听left属性的变化,同时为了实现图片相对于当前位置的偏移,我们设定了当前的position:relative.
至此,代码已经讲解完了,想实现天猫的动画效果,是不是很简单呢?
在这个过程中,可能有些讲的不到位或不对的地方,欢迎各位指正。
欢迎大家加入互联网技术交流群:62329335
相关推荐
web期末大作业 基于HTML+CSS+JavaScript实现的仿天猫商城网站源码(9页) web期末大作业 基于HTML+CSS+JavaScript实现的仿天猫商城网站源码(9页) web期末大作业 基于HTML+CSS+JavaScript实现的仿天猫商城网站源码(9页)...
HTML+CSS+JS的仿天猫商城APP源码
迷你天猫商城是一个基于SSM框架的综合性B2C电商平台,需求设计主要参考天猫商城的购物流程:用户从注册开始,到完成登录,浏览商品,加入购物车,进行下单,确认收货,评价等一系列操作。 作为模拟天猫商城系统的...
一、项目简述 功能: 前台: * 用户模块 * 分类模块 * 商品模块 ...环境配置: Jdk1.8 + Tomcat8.5 + mysql + ...项目技术: JSP + C3P0+ Servlert + html+ css + JavaScript + JQuery + Ajax + Fileupload等等。
自己刚学时写的仿天猫 的静态网页 注册-登录-首页-搜索结果页-商品详情页-购物车侧边栏-结算页-确认收货地址页-付款页-支付完成页 电商的生老病死都在了,都是自己写的,留给需要的人。
基于HMTL CSS实现仿天猫首页的静态网页源码+多张效果截图+项目说明.7z 基于HMTL CSS实现仿天猫首页的静态网页源码+多张效果截图+项目说明.7z 基于HMTL CSS实现仿天猫首页的静态网页源码+多张效果截图+项目说明.7z ...
这是一款CSS3仿GPS地图导航定位动画特效,挺不错的GPS地图背景动画效果。
本资源是一份名为《CSS3技巧大揭秘:打造精美的爱心SVG动画特效》的RAR压缩包,其中包含了一份详细的教程和相关的代码示例,旨在帮助读者学习如何使用CSS3技术打造出精美的爱心SVG动画特效。 适用人群:本资源适用...
一款很有创意的CSS3 3D倾斜视差图片展示动画特效,鼠标移动到页面不同位置查看视差动画效果。
jQ CSS3图片展示动画特效是一款使用GSAP和ScrollMagic来制作页面向下或向上滚动时的动画效果。
js css3仿天猫品牌图片墙翻转换一换代码
《CSS3实战:开发与设计》书中所包含的示例的全部源码。 本书英文版书名《Practical CSS3:Developand Design》,作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络...
这是一款使用纯js和CSS3来制作的仿天猫商品品牌图片墙换一批动画特效。该特效中,当用户点击了品牌图片墙上右下角的按钮时,所有的品牌图片会水平翻转360度,然后显示另外一批品牌图片。 使用方法 在页面中引入...
实现了两种登陆方式在同一页面不同条件下呈现 基本实现了天猫网页登陆页面的所有效果 例如两种登陆方式的切换 扫码教程等