html5--6-53 阶段练习4-画廊

学习要点

  • 运用所学过的知识完成一个简单的小练习,理解对过渡动画的应用。

 @charset "utf-8";
/* CSS Document */
img{
width: 50px;
height: 150px;
border: 3px groove orange;
} div{
width: 800px;
height: 600px;
background: rgba(0,0,0,0.2) url(res/hl.jpg) no-repeat;
background-size: cover;
padding: 20px; margin-left: auto;
margin-right: auto;
} ul{
list-style-type: none;
margin-top: 150px;
} li{
float: left;
transform-origin: left top;
transform: rotate(10deg);
transition: all 1s ease;
} li:nth-child(2){
transform: rotate(15deg);
} li:nth-child(3n){
transform: rotate(-25deg);
} li:nth-child(4n){
transform: rotate(30deg);
} li:nth-child(5n){
transform: rotate(-20deg);
} li:hover{
position: relative;
z-index:;
transform: rotate(0deg) scale(3);
}
 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div>
<ul>
<li><a href=""><img src="res/gh1.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh2.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh3.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh4.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh5.jpg" alt=""></a></li> <li><a href=""><img src="res/gh1.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh2.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh3.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh4.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh5.jpg" alt=""></a></li> <li><a href=""><img src="res/gh1.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh2.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh3.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh4.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh5.jpg" alt=""></a></li> <li><a href=""><img src="res/gh1.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh2.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh3.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh4.jpg" alt=""></a></li>
<li><a href=""><img src="res/gh5.jpg" alt=""></a></li>
</ul>
</div>
<body>
</body>
</html>

html5--6-53 阶段练习4-画廊的更多相关文章

  1. HTML5和CSS3阶段,我是如何学习的?

    经过一个月的学习,我收获了许多,今天的测验是做一个企业中文网站,令我自己感到吃惊的是,我前前后后用了4个小时就完成了,这在一个月前根本不可能,因为对布局属性的理解还不够深刻,常常会在调试中浪费大量时间 ...

  2. 零基础如何迅速学习HTML5?新手小白学习web前端H5自白!

    很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...

  3. angular2 学习笔记 ( Router 路由 )

    参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...

  4. HTML的发展及认识

    首先HTML全称是Hypertext Markup Language,它是一门超文本标记语言: HTML已经有了HTML2.0.HTML3.2.HTML 4.0. HTML4.01. HTML5几个阶 ...

  5. IT兄弟连 HTML5教程 HTML5的学习线路图 第二、三阶段

    第二阶段编写用户交互功能 通过第一阶段的学习虽说可以完成页面制作,但并不完美,不能算是合格的前端工程师,所以要继续学习如图1.13中的第二阶段内容.现在的Web页面都融入了大量的特效,并且多数需要与用 ...

  6. IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

    学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...

  7. 萧墙HTML5手机发展之路(53)——jQueryMobile页面之间的参数传递

    基于单个页面模板HTTP通过路POST和GET请求传递参数.在多页模板,并且不需要server沟通,通常有三种方式在多页模板来实现页面之间的参数传递. 1.GET道路:上一页页生成参数并传递到下一个页 ...

  8. 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

  9. HTML5进阶段内联标签汇总(小篇)

    内联元素,与别人公用一行,但是设置宽高无效.其特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 ...

  10. html5 css练习 画廊 元素旋转

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. ado:SqlDataAdapter的两种不同写法,以及SqlCommand的两种不同写法

    原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] SqlDataAdapter:(它是自动打开连接且自动关闭的,所以可以不必显示打开关闭连接) SqlConnect ...

  2. oracle查询当前用户名下所有表

    select * from all_tables where owner='TEST': TEST为用户名,用户名必须是大写. 查看当前登录的用户的表: select table_name from ...

  3. Codeforces Round #268 (Div. 2) D. Two Sets [stl - set + 暴力]

    8161957                 2014-10-10 06:12:37     njczy2010     D - Two Sets             GNU C++     A ...

  4. android图片上传

    package com.example.center; import java.io.ByteArrayOutputStream;import java.io.InputStream; import ...

  5. Spring Tool Suite (STS) 安装SVN插件

    今天STS安装SVN时遇到很多问题,度娘搜索几个小时才安装成功. 在此记录下安装过程. 我的 STS版本: 安装SVN有两种方式: 方法1:依次选择help->preferences->e ...

  6. systemtap notes

    systemtap notes -- 10 June 2014 1 Systemtap systemtap是红帽开发的一款分析工具,如果你需要使用的话,最好在redhat的系统上,在 Ubuntu上兼 ...

  7. IIS Express 的怪毛病 vs2013本机调试

    本机调试时,如果同一个项目有多个版本,同时debug,可能会串项目调试,造成不必要的困扰: 通常情况下是 IIS express的映射出现了问题: 解决方案: 1.打开目录:查看文件C:\Users\ ...

  8. JSONKit升级XCODE后报一堆警告解决办法

    虽然我已经该用apple自己的json解析了,但是对于需要兼容低版本的,还是需要用第三方的, 目前用的最多的就有JSONKit了,包括微博sdk,但是一编译报一堆警告,看着很不爽.可以自己手动一个个修 ...

  9. 安卓开发懒鬼最爱之ButterKnife,依赖注入第三方是库,进一步加速开发速度

    转载请注明出处:王亟亟的大牛之路 还在烦躁一大堆findById的控件操作而烦恼么? 平时,我们的那一系列findById是一个"浩大的project"样比例如以下 这是以前一个项 ...

  10. iphone 消息推送 实现

    IPhone 消息推送实现 参考 资料 http://blog.csdn.net/victormokai/article/details/39501277 对生成pem 的补充 拿到mac 上生成导出 ...