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. AnyChart创建实时仪表

    AnyChart创建实时仪表 简述: AnyChart是一款基于Flash和HTML5的图表.仪表控件,所包含的图表类型众多和跨平台以及跨浏览器是该产品的主要特点和优点,另外该产品基于XML文件作为数 ...

  2. Day 1 计算机基础

    计算机基础 一.为什么学习计算机基础? 编程语言的作用:人类使机器明白并动作的指令.类似:人文社会的英语.   关系:计算机硬件 —— 操作系统(OS) —— 软件(编程语言成品,学习成果). 自语: ...

  3. saltstack 开发相关命令记录

    SALT API开发相关命令记录. 查看当前的salt key信息salt-key -L 测试被控主机的连通性salt '*' test.ping 远程命令执行测试salt '*' cmd.run ' ...

  4. 论DATASNAP结合FIREDAC的使用方法

    论DATASNAP结合FIREDAC的使用方法 自DELPHI XE5开始引入FIREDAC数据引擎以来,FIREDAC就正式成为了官方的数据引擎.一直到XE10.1 UPDATE1,据笔者观察,FI ...

  5. 解决asp.net core 日期格式 datetime Json返回 带T的问题

    原文:解决asp.net core 日期格式 datetime Json返回 带T的问题 记录一下: Startup中,将 services.AddMvc(); 改为: services.AddMvc ...

  6. memcache的学习路线图

     memcache学习材料 //memcache自带的github 上的 wiki     //席剑飞 Memcache(MC)系列 1~8系列 评注: memcache系统写的最深的一博客,建议一读 ...

  7. 《ASP.NET》数据绑定—DataList实践篇

    上篇文章大概讲了DataList的一些基础知识,掌握这些知识在将来的应用中起到非常大的作用,如今我们就開始讲上篇文章中说的基础知识做一个小样例. 首先,我机子的数据库中有一张person表.例如以下图 ...

  8. 系统重装 WIN7如何创建和使用VHD文件

    1 在磁盘管理中,点击操作-创建VHD,然后可以创建一个空的VHD文件   2 右击这个磁盘,点击初始化磁盘,然后可以新建简单卷   3 右击这个磁盘,设置为脱机或者联机就可以在计算机中显示和隐藏这个 ...

  9. Linux-----Ubuntu设置开机启动模式

  10. Json实现异步请求（提交评论）

    主要将代码粘贴,通过阅读代码理解当中的相关逻辑. html代码: <form id="form1" runat="server"> <p> ...