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. Codeforces 552E Vanya and Brackets（枚举 + 表达式计算）

    题目链接 Vanya and Brackets 题目大意是给出一个只由1-9的数.乘号和加号组成的表达式,若要在这个表达式中加上一对括号,求加上括号的表达式的最大值. 我们发现,左括号的位置肯定是最左 ...

  2. Python 和 Elasticsearch 构建简易搜索

    Python 和 Elasticsearch 构建简易搜索 作者:白宁超 2019年5月24日17:22:41 导读:件开发最大的麻烦事之一就是环境配置,操作系统设置,各种库和组件的安装.只有它们都正 ...

  3. STM32F10x_StdPeriph_Driver_3.5.0(中文版).chm的使用

    以熟悉的固件库函数说明中函数GPIO_Init(GPIO_TypeDef *GPIOx, GPIO_IintTypeDef *GPIO_InitStructure)为例 GPIOA...G       ...

  4. Codeforces 12 D Ball

    Discription N ladies attend the ball in the King's palace. Every lady can be described with three va ...

  5. 【C#】RGB,CMYK,HSB各种颜色表示的转换（转）

    [C#]RGB,CMYK,HSB各种颜色表示的转换   一.表示颜色的方式有很多种,如RGB,CMYK,HSB,Hex等等 1.RGB:这种表示颜色由三原色构成,通过红,绿,蓝三种颜色分量的不同,组合 ...

  6. 【Todo】一些scala的实验 & 与Java的混合

    另外,如果要支持 java 和 scala混合build,可以看看这篇文章: http://www.cnblogs.com/yjmyzz/p/4694219.html Scala和Java实现Word ...

  7. docker nginx镜像+phpfpm 镜像 组合配置 搭建 PHP+nginx 环境

    前言 在以往的容器环境部署中 运行环境 我们通常把 类似 apache nginx php 等 打包在一个镜像中 起一个容器. 这样做的好处是 方便 简单. 不便的地方是 如果PHP 需要扩展新的 相 ...

  8. 《大话操作系统——做坚实的project实践派》(7)

     写操作系统内核须要了解一个详细计算平台的CPU,包含这个CPU里的寄存器和异常中断处理机制

  9. 关于OC的内存管理-01

    1.什么是内存管理? 大家都知道手机的内存是有限的,app应用的内存也应该是受限制的,随着app应用的使用会导致内存的占用率增大.当内存占用率达到一种程度时.系统会发出内存警告.这时我们须要把一些不用 ...

  10. php生成.php文件

    <?php // -- test.php -- // //搜集资料 $str_tmp="<?php\r\n"; //得到php的起始符.$str_tmp将累加 $str ...