一个使用CSS3动画效果实现的图片宽度 横向展开的效果。
HTML代码如下:
<ul id="kwicks"> <li><a class="john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon">John Lennon</a></li> <li><a class="paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney">Paul McCartney</a></li> <li><a class="george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison">George Harrison</a></li> <li><a class="ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr">Ringo Starr</a></li> </ul>
上面的代码仅由一个ul组成,对应的CSS代码如下:
/*横向展示关键是添加: overflow-x:hidden,避免出现异常*/ #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; } /* 实现宽度变大的动态过程*/ #kwicks li a { display: block; text-indent: -9999px; width: 134px; height: 143px; transition-property: width; transition-duration: 1s; }
非常简单的一个动画效果,代码解析:
transition-property:width; /*会产生带有平滑改变元素宽度的过渡效果*/ transition-duration: 1s; /*过渡效果持续1秒*/
相关推荐
2. **CSS样式设置**:设定菜单的基本样式,如宽度、高度、颜色等,并通过CSS3的`transition`属性实现平滑的滑动效果。 3. **jQuery绑定事件**:在`$(document).ready()`函数内,使用`.hover()`方法绑定鼠标悬停事件...
在现代网页设计中,实现一个美观且交互式的横向时间轴是非常常见的需求。...希望本文能够帮助到那些在寻求如何通过jQuery实现动态横向时间轴的开发者们,并且也欢迎转载和分享,但请注明出处,表示对原作者的尊重。
UI框架对canvas进行分层 1.base为基础层,放基础界面,主游戏菜单、操作杆、小地图等; 2.main为主业务层,放全部业务界面,背包、榜单等 3.toast层,放吐司 4.loading层,放loading界面 使用方式: 1.在场景中挂上UIManager脚本,并在游戏启动时进行初始化,传入资源加载器 2.显示界面直接UIManager.ShowPanel<T>(),不需要其他操作 3.隐藏界面UIManager.ClosePanel()
IMG_1399.PNG
【毕业设计】java-springboot-vue教师工作量管理系统实现源码(完整前后端+mysql+说明文档+LunW).zip
python教程学习
【深圳来觅数据信息科技-2025研报】减产提价!多重因素影响,国内存储芯片逐步崛起.pdf
python学习资源
本协力服装厂服装生产管理系统设计目标是实现协力服装厂服装生产的信息化管理,提高管理效率,使得协力服装厂服装生产管理作规范化、科学化、高效化。 本文重点阐述了协力服装厂服装生产管理系统的开发过程,以实际运用为开发背景,基于Springboot框架,运用了Java编程语言和MYSQL数据库进行开发,充分保证系统的安全性和稳定性。本系统界面良好,操作简单方便,通过系统概述、系统分析、系统设计、数据库设计、系统测试这几个部分,详细的说明了系统的开发过程,最后并对整个开发过程进行了总结,实现了服装生产相关信息管理的重要功能。 本协力服装厂服装生产管理系统运行效果稳定,操作方便、快捷,界面友好,是一个功能全面、实用性好、安全性高,并具有良好的可扩展性、可维护性的服装生产管理平台。 关键词:服装生产管理,Java编程语言,Springboot框架,MYSQL数据库
网络编程,资源和大家上学的时候的差不多,tcp
vmware虚拟机安装教程
【毕业设计】java-springboot-vue教师人事档案管理系统实现源码(完整前后端+mysql+说明文档+LunW).zip
【毕业设计-java】springboot-vue会员制医疗预约服务管理系统实现源码(完整前后端+mysql+说明文档+LunW).zip
比赛前开源题目
UniApp开发一个简单的记事本应用文字教程
内容概要:本文档详细介绍了C#编程语言的基础知识和高级特性的相关内容。首先阐述了C#语言的特点和应用场景,涵盖其简单、安全及面向对象三大优点。接着讲述了准备工作的关键步骤,重点提及了开发工具Visual Studio的安装以及推荐的经典书籍和学习资源。文档深入解析了C#基础语法的各个要素,包括数据类型、变量与常量、运算符、控制结构,并结合代码实例强化理解。面向对象编程部分,文档讲解了类与对象的概念,以及继承、多态和封装的原则,并附带具体示例说明,以便读者更容易理解面向对象的理念。此外,文档对比了.NET Framework和.NET Core两大框架的区别和优势,并介绍了一些常用的类库,使开发者在不同平台环境下都可以顺利开发高质量的软件。最后一章提供了一些建议和资源推荐,如参与开源项目、加入技术社区等,为学习者的成长之路指明方向。 适合人群:希望初次接触C#编程的人士、希望通过系统学习达到掌握C#的初级开发者,亦适用于有一定C#经验,想巩固和提升面向对象思想及相关技术的专业技术人员。 使用场景及目标:该文章可以帮助初学者建立完整的C#编程基础框架,快速上手机编程,并引导他们深入了解面向
仅供资料参考,YeeCOM移讯通DTU连接OneNet平台MQTT说明使用手册。
python学习一些项目和资源
python学习资源
【毕业设计-java】springboot-vue家具销售电商平台实现源码(完整前后端+mysql+说明文档+LunW).zip