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-画廊的更多相关文章

HTML5和CSS3阶段，我是如何学习的？
经过一个月的学习,我收获了许多,今天的测验是做一个企业中文网站,令我自己感到吃惊的是,我前前后后用了4个小时就完成了,这在一个月前根本不可能,因为对布局属性的理解还不够深刻,常常会在调试中浪费大量时间 ...
零基础如何迅速学习HTML5？新手小白学习web前端H5自白！
很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...
angular2 学习笔记 ( Router 路由 )
参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...
HTML的发展及认识
首先HTML全称是Hypertext Markup Language,它是一门超文本标记语言: HTML已经有了HTML2.0.HTML3.2.HTML 4.0. HTML4.01. HTML5几个阶 ...
IT兄弟连 HTML5教程 HTML5的学习线路图第二、三阶段
第二阶段编写用户交互功能通过第一阶段的学习虽说可以完成页面制作,但并不完美,不能算是合格的前端工程师,所以要继续学习如图1.13中的第二阶段内容.现在的Web页面都融入了大量的特效,并且多数需要与用 ...
IT兄弟连 HTML5教程 HTML5的学习线路图第一阶段学习网页制作
学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...
萧墙HTML5手机发展之路（53）——jQueryMobile页面之间的参数传递
基于单个页面模板HTTP通过路POST和GET请求传递参数.在多页模板,并且不需要server沟通,通常有三种方式在多页模板来实现页面之间的参数传递. 1.GET道路:上一页页生成参数并传递到下一个页 ...
小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
HTML5进阶段内联标签汇总（小篇）
内联元素,与别人公用一行,但是设置宽高无效.其特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 ...
html5 css练习画廊元素旋转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...

随机推荐

ado:SqlDataAdapter的两种不同写法，以及SqlCommand的两种不同写法
原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] SqlDataAdapter：(它是自动打开连接且自动关闭的，所以可以不必显示打开关闭连接) SqlConnect ...
oracle查询当前用户名下所有表
select * from all_tables where owner='TEST': TEST为用户名,用户名必须是大写. 查看当前登录的用户的表: select table_name from ...
Codeforces Round #268 (Div. 2) D. Two Sets [stl - set + 暴力]
8161957 2014-10-10 06:12:37 njczy2010 D - Two Sets GNU C++ A ...
android图片上传
package com.example.center; import java.io.ByteArrayOutputStream;import java.io.InputStream; import ...
Spring Tool Suite (STS) 安装SVN插件
今天STS安装SVN时遇到很多问题,度娘搜索几个小时才安装成功. 在此记录下安装过程. 我的 STS版本: 安装SVN有两种方式: 方法1:依次选择help->preferences->e ...
systemtap notes
systemtap notes -- 10 June 2014 1 Systemtap systemtap是红帽开发的一款分析工具,如果你需要使用的话,最好在redhat的系统上,在 Ubuntu上兼 ...
IIS Express 的怪毛病 vs2013本机调试
本机调试时,如果同一个项目有多个版本,同时debug,可能会串项目调试,造成不必要的困扰: 通常情况下是 IIS express的映射出现了问题: 解决方案: 1.打开目录:查看文件C:\Users\ ...
JSONKit升级XCODE后报一堆警告解决办法
虽然我已经该用apple自己的json解析了,但是对于需要兼容低版本的,还是需要用第三方的, 目前用的最多的就有JSONKit了,包括微博sdk,但是一编译报一堆警告,看着很不爽.可以自己手动一个个修 ...
安卓开发懒鬼最爱之ButterKnife，依赖注入第三方是库，进一步加速开发速度
转载请注明出处:王亟亟的大牛之路还在烦躁一大堆findById的控件操作而烦恼么? 平时,我们的那一系列findById是一个"浩大的project"样比例如以下这是以前一个项 ...
iphone 消息推送实现
IPhone 消息推送实现参考资料 http://blog.csdn.net/victormokai/article/details/39501277 对生成pem 的补充拿到mac 上生成导出 ...

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

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

学习要点

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

随机推荐

热门专题