HTMLcss3鼠标移入图片张开样式

原创于 2019-03-28 19:11:59 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片展开模式

前端总结专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用HTML和CSS3实现鼠标悬停时图片张开的动态效果。通过Adobe Dreamweaver CC2018设计页面，文章详细介绍了设置图片布局、定位及旋转角度的方法，并展示了最终的视觉效果。

                                        HTMLcss3鼠标移入图片张开样式

开发工具与关键技术：Adobe Dreamweaver CC 2018
作者：姚世添
撰写时间：2019年1月16日

下面我们使用AdobeDreamweaverCC2018来设计页面，实现鼠标移入图片的张开样式。
一、设计div，把图片封装进去。
在这里插入图片描述
二、设计基本的布局，把全部图片放到一个div里面，只显示第一张图片的样式。

三、给图片定位还有展开的时间，还有旋转的角度，把相同的代码简化放到一个类里面，这样就可以节省时间。

四、设计鼠标移入，获取到第几张图片，给它设计图片张开的位置。
在这里插入图片描述
四、实现效果图一

五、实现效果图二

在这里插入图片描述