html照片墙实验报告,HTML5+CSS3实战(二)——照片墙效果
现在的前端做的越来越炫酷了,各种特效让人眼花缭乱。
前几天逛网站的时候,看见有个照片墙的效果不错,就想着自己也做做看。
首先上图:
照片呈不规则的角度摆放,当鼠标放在照片上时,照片会放大;
鼠标离开照片时,照片回到原来的状态。
其实只要用CSS3的一些属性完全就可以实现这样的效果,无须一行js代码~~
代码实现:
HTML代码部分的代码,就是一个div里放上几张图片而已。
@H_301_25@
样式表中的代码
@H_301_25@.images{ width:960px; margin:60px 60px 10px 40px; position:absolute; }
.pic{ width:160px; }
.images img:hover{ Box-shadow:15px 15px 20px rgba(50,50,0.4); transform:rotate(0deg) scale(2.20); -webkit-transform:rotate(0deg) scale(1.20); z-index:1000; }
.images img{ padding:10px 10px 15px; background:white; border:1px solid #ddd; Box-shadow:2px 2px 3px rgba(50,0.4); -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -ms-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; transition:all 0.5s ease-in; position:absolute; z-index:1; }
.pic1{ left:400px; top:0; transform:rotate(-5deg); -webkit-transform:rotate(-5deg); }
.pic2{ left:200px; top:10px; transform:rotate(-20deg); -webkit-transform:rotate(-20deg); }
.pic3{ top:220px; right:80px; transform:rotate(5deg); -webkit-transform:rotate(5deg); }
.pic4{ top:100px; left:300px; transform:rotate(-10deg); -webkit-transform:rotate(-10deg); }
.pic5{ top:20px; right:150px; transform:rotate(-10deg); -webkit-transform:rotate(-10deg); }
.pic6{ left:10px; top:0; transform:rotate(10deg); -webkit-transform:rotate(10deg); }
.pic7{ left:850px; top:0; transform:rotate(20deg); -webkit-transform:rotate(20deg); }
.pic8{ bottom:-20px; top:250px; transform:rotate(5deg); -webkit-transform:rotate(5deg); }
.pic9{ left:550px; top:90px; transform:rotate(15deg); -webkit-transform:rotate(15deg); }
可以看到,主要设置position属性为absolute,然后使用left,top,right,bottom来设置图片的摆放位置;使用 transform:rotate(15deg)来设置图片的旋转角度。
@H_301_25@.images img:hover{ Box-shadow:15px 15px 20px rgba(50,0.4); transform:rotate(0deg) scale(2.20); -webkit-transform:rotate(0deg) scale(2.20); z-index:1000; }
在hover鼠标悬浮在图片上的事件中,设置transform:rotate(0deg) scale(2.20)图片缩放为原来的2.2倍,然后设置z-index 防止被其他图片遮盖即可。
就是这么简单!关于缩放的倍数和旋转的角度可以自行修改。图片的位置也可以自己调整。
html照片墙实验报告,HTML5+CSS3实战(二)——照片墙效果相关推荐
- html5 相册翻转效果,HTML5 css3:3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
- HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例 主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换 案例 ...
- 网页编程课程大作业实验报告HTML5 、CSS5 、JavaScript
网页编程课程大作业实验报告 课程名称 网页编程 实验成绩 计算机学院制 一.实验内容与要求 利用HTML5 .CSS5 .JavaScript等知识,按照特定的主题制作一个完整的网站. 二.网站名称以 ...
- html5实验教程,html5+css3+js开发APP实例教程1 -- 文字列表
不多说直接先上实例. 所有实例在后续成品将会用到. 如果有需要讲添加具体文字说明. 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几 ...
- html5 抽奖效果,html5+css3实现抽奖活动的效果
看过我博客的知道,前几天我发过一个通过form表单来实现和用户交互效果,上次是通关过table实现用户注册页面,那么今天我们也是通过table的表单效果来画出抽奖的页面,通过css3和javascri ...
- HTML5+CSS3实战(二)——照片墙效果
现在的前端做的越来越炫酷了,各种特效让人眼花缭乱. 前几天逛网站的时候,看见有个照片墙的效果不错,就想着自己也做做看. 首先上图: 照片呈不规则的角度摆放,当鼠标放在照片上时,照片会放大: 鼠标离开照 ...
- HTML5+CSS3笔记(二)
一.css基础 派生选择器 ul li <ul> <li></li> </ul> id选择器 #main <div id="main&q ...
- android博学谷实验报告,Android项目实战系列—基于博学谷(四)我的模块(上)...
image 由于这个模块内容较多,篇幅较长,请耐心阅读. "我"的模块分为四个部分 一."我"的界面 1.底部导航栏 (1).导入界面图片 将底部导航栏所需图片 ...
- 数据库原理及安全技术教学实验报告SQL实践(二)
目录 一.实验目的 二.实验软硬件要求 三.实验预习 四.实验内容(实验步骤.测试数据等) 运行结果: 1.使用查询语句完成以下任务(每一个查询都要给出SQL语句,并且列出查询结果). 2.使用数据操 ...
最新文章
- leangoo领歌敏捷工具工作台可查看最近访问脑图和项目
- 根据名字,获取线程,进程。
- 如何将catia装配件附材料_在网上买的快餐桌椅如何安装?餐厅快餐桌椅安装顺序与流程知识...
- 分布式系统概念 | 一致性协议:拜占庭将军问题、Paxos、Raft
- SAP Fiori s2 controller init
- Codeforces 313
- java erlang_Java开发人员的Erlang
- Java 7:使用NIO.2进行文件过滤-第2部分
- 【ECharts系列|01入门】 从入门到天黑【入门级教程实战】
- 本博打开方式,请详读
- lwip 数据处理流程
- 简单选择排序_一文带你读懂排序算法(一):冒泡 amp; 快速选择排序 amp; 简单插入排序算法...
- html span设置外边距,行内元素内外边距探究:为何span设置上下margin和padding不起效...
- 【1】redis的安装和配置,以及简单的增删查改uinx命令
- php html转ubb,php实现转换ubb代码的方法
- 加密货币「雷曼时刻」回顾,「UST脱锚」带来哪些次生灾害?
- BW型模拟带通滤波器设计的Matlab仿真
- 周末DIY,三花聚顶,练就静音功夫!
- Python中hashlib.sha1()和hashlib.MD5()哈希算法的区别
- linux磁盘写保护怎么修改_磁盘被写保护怎么办_磁盘被写保护的解决方法 - 驱动管家...
热门文章
- 深度学习YOLO模型
- c# messageboxbutons.ok,MessageBoxIcon.Information 是什么意思
- 浙大MBA的录取由初试和复试两面组成
- 关于 JS动态生成的 iframe 引入CSS 的踩坑
- html5 video 文本轨道,VideoJS-轨道-文本轨道
- python 作业2:人民币大写转换问题
- 电脑可识别,但无法使用
- 新版Microsoft Edge配置 (Internet Explorer模式,默认浏览器设置)、组策略模板的中央存储创立及ADMX管理
- “您当前未使用连接到Nvidia GPU的显示器”和“显卡驱动安装失败”的解决方法
- 浅谈VUE全家桶(Vue、VueX、Vue-Router、axios、Vue-cli)的理解与认识