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. JVM GC 相关

    http://blog.csdn.net/cutesource/article/details/5904501 http://www.cnblogs.com/dingyingsi/p/3760447. ...

  2. WEB学习-CSS盒模型

    盒子的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin. width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度. he ...

  3. Java中的类反射

    一.反射的概念 : 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力.这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它首先被程序 ...

  4. Codeforces Gym 100286J Javanese Cryptoanalysis 傻逼暴力

    原题地址:http://codeforces.com/gym/100286/attachments/download/2013/20082009-acmicpc-northeastern-europe ...

  5. Java中String字符串toString()、String.valueOf()、String强转、+ ""的区别

    Object#toString(): Object object = getObject(); System.out.println(object.toString()); 在这种使用方法中,因为ja ...

  6. 【深入Java虚拟机】之五：多态性实现机制——静态分派与动态分派

    方法解析 Class文件的编译过程中不包含传统编译中的连接步骤,一切方法调用在Class文件里面存储的都只是符号引用,而不是方法在实际运行时内存布局中的入口地址.这个特性给Java带来了更强大的动态扩 ...

  7. uwsgi 热启动

    uwsgi文件每次启动都要kill进程,这样非常麻烦,理想的情况是须要改动文件就自己主动生效,经查阅资料.发现uwsgi是自带该功能的,该功能的配置节例如以下 <uwsgi> <py ...

  8. Solidworks如何创建投影曲线

    画好草图之后(草图是在上视基准面上画的)然后点击曲线,投影曲线   面选择要投影的曲面,然后就得到了平面曲线在曲面上的投影得到的空间曲线   注意这种方法对于开环轮廓也是可以用的,比如下面,我定义一个 ...

  9. three.js 源代码凝视（十五）Math/Plane.js

    商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发 ...

  10. Jenkins系列之-—07 集成JIRA

    一.Jenkins Jira插件安装&配置 1. 安装插件,主要安装如下插件: Jira Issue Updater 该插件用于更新JIRA ISSUES 的工作流状态或增加备注 JIRA p ...