图片展示html css代码,纯CSS3实现图片展示特效
Web浏览器端的特效越来越让人兴奋,通过CSS和JavaScript,各种意想不到的绚丽效果都能用简单的几句代码完成。本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能。而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无比的顺滑。
观看演示
HTML代码
通过上的演示,估计你已经能猜到,它的HTML结果应该是一个父元素里包含多个子元素,没错:这里用的是一个ol和其子元素li。
- John Lennon
- Paul McCartney
- George Harrison
- Ringo Starr
CSS代码
CSS代码要实现的动作就是当鼠标悬停时让宽度发生变化。
/* structure */
#kwicks { width: 590px; overflow-x: hidden; }
#kwicks:hover li a { width: 100px; }
#kwicks li {
float: left;
overflow-x: hidden;
display: block;
}
#kwicks li:hover a { width: 285px !important; }
/* individual kwicks */
#kwicks li a {
display: block;
text-indent: -9999px;
width: 134px;
height: 143px;
transition-property: width;
transition-duration: 1s;
}
非常简单的几段CSS代码就能实现我们要求的动作,但这里有几个事情需要注意:
最好要设置overflow-x: hidden;,以免出现奇怪的效果。
我们用两个transition-属性控制图片展示的宽度,起初都是显示一半,当鼠标悬停在某个图片上时,宽度增加。
这里我们只使用了几个图片,但图片的个数是不受限制的。
观看演示
5年前的时候我们根本无法用这么简单的代码实现这么漂亮的效果。随着浏览器的进步,javascript和CSS的发展,Web程序员的工作将变得越来越轻松。
图片展示html css代码,纯CSS3实现图片展示特效相关推荐
- css鼠标经过图片镜像翻转,css代码实现鼠标指向图片翻转效果
烈火网(Liehuo.Net)教程 今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为"翻转"效果(roll-over).原来这种效果大多使用Javascript实现,实际 ...
- html如何设置图片循环旋转动画效果,纯CSS3实现图片无限旋转加载动画特效
纯 CSS3 实现 loading... 动画加载效果,需要一张透明的 png 图片,代码如下: HTML: CSS: /*动画效果*/ #loading-img { display: block; ...
- css3 3d立体三角形展示图片,纯css3实现图片三角形排列
当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 实现的代码. ...
- html5 css3鼠标滑过效果,Hover.css纯CSS3鼠标滑过特效动画库
Hover.css是一款非常简单实用的纯CSS3鼠标滑过特效动画库.有100多种效果可以选择,包括:2D动画.背景动画.边框动画.图标动画.发光渐变.阴影.对话框.折角等100多种特效. 使用方法 首 ...
- [css] 请使用css3实现图片的平滑转换
[css] 请使用css3实现图片的平滑转换 以全局监听的方式通过 a 标签的描点进行 view 动态切换页面,只要把 a 标签带有 id 的 href 属性的值指到锚点,用 CSS3 的动画进行切换 ...
- 实现图片大小的自动控制( 图片大小控制CSS代码)
图片大小控制CSS代码 将以下代码放到你的样式表文件中即可实现图片大小的自动控制. /*图片大小控制CSS By Tekin */ img,a img{ border:0; margin:0; pad ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载 更多专业前端知识,请上 [猿2048]www.mk2048.com
- 纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
- html图片鼠标动态效果代码,纯css3实现鼠标经过图片显示描述的动画效果
今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 源码下载 我们一起学习下此案例的代码. html代码: 复制 ...
最新文章
- 排序算法—sort(),stable_sort(),merge()
- 69张图看懂Elon Musk的脑机接口芯片项目
- 垂垂老矣,一代人的回忆,Adobe Flash 寿命将尽
- html 查询表单,如何让我的HTML表单查询适用于所有表单元素?
- gitHub网站上常见英语翻译
- 10 分钟学会 5 个酷炫 Linux 命令
- 继承thread类创建线程
- python3线程gil_python3爬虫GIL修改多线程实例讲解
- ICCV 2019 VisDrone挑战赛冠军方案解读
- linux a8启动过程,51CTO博客-专业IT技术博客创作平台-技术成就梦想
- 多线程下单例模式:懒加载(延迟加载)和即时加载
- 项目管理工具maven
- ios 企业签名需要源文件么_苹果ios企业签名是什么?苹果ios企业签名了解一下!...
- 原理图与 PCB 绘制备忘
- 在线计算机辅助翻译软件,科学网—计算机辅助翻译软件OmegaT - 李继存的博文
- php 内网/外网ip判断
- 伤感qq日志-爱冷了 情淡了、心累了,陌生了
- 2021贵港市地区高考成绩排名查询,贵港高中成绩排名2021,贵港中考分数线排行榜...
- P41-前端基础-clear解决受浮动元素的影响而改变位置
- Android在线源码网站推荐
热门文章
- 招聘 | 北京-内推-好未来-NLP算法实习生/博士后研究员
- 从产品销量考虑渠道布局——洗衣机行业数据分析
- 如何用ajax做登录页面,ajax如何制作登录页面?登录页面ajax的请求详解(附完整实例)...
- 天真面具下真实的白羊座!
- java httpunit_实例简介HttpUnit结合JUnit自动测试Web应用
- java利用Freemarker模板生成docx格式的word文档(全过程)
- gee学习笔记 第二天
- 如何用excel计算断色断码_Excel单元格局部加密,纯干货教程,工资表再也不用拆分了-excel拆分单元格...
- 理解setTimeout()
- YOLOv5改进Shuffle主干系列:高效结合ShuffleNet V2主干网络,高效CNN架构设计的实用指南