html5--6-51 阶段练习3-旋转导航

 @charset="UTF-8";

 ul{

     list-style: none;

     font-size:24px;

     font-weight: bold;

 }

 a{

     text-decoration: none;

 }

 li{

     background: linear-gradient(to left,orange, red);

     width: 150px;

     margin:5px;

     padding:10px 10px;

     border-radius: 5px;

 }

 #ul1 li{

     float: left;

 }

 li:hover{

         background:linear-gradient(to right,orange, red);

         transform: rotate(15deg);

         transform-origin: left top;

 }

 hr{

     clear: both;

     margin-top: 50px;

     /*width: 3px;*/

     border: 3px dotted green;

 }
 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>旋转导航</title>

     <link rel="stylesheet" type="text/css" href="but.css">

 </head>

 <body>

     <ul id="ul1">

         <li><a href="#">HTML5</a></li>

         <li><a href="#">CSS3</a></li>

         <li><a href="#">JavaScript</a></li>

         <li><a href="#">jQuery</a></li>

     </ul>

 <br><br>

 <hr>

     <ul id="ul2">

         <li><a href="#">HTML5</a></li>

         <li><a href="#">CSS3</a></li>

         <li><a href="#">JavaScript</a></li>

         <li><a href="#">jQuery</a></li>

     </ul>

 </body>

 </html>

学习要点

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

html5--6-51 阶段练习3-旋转导航的更多相关文章

  1. html5——3D案例（立体汉字，旋转导航）

    1.立体汉字:旋转点left,attr(data-cont)可获取自定义属性值,skewY(倾斜转换)参考地址 2.旋转导航:先移动后旋转,li标签需要延迟执行旋转 注意::hover事件触发自己的: ...

  2. CSS3特效----制作3D旋转导航

    大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...

  3. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  4. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  5. html5--6-57 阶段练习6-折叠导航栏

    html5--6-57 阶段练习6-折叠导航栏 实例 @charset="UTF-8"; *{ ; ; } h3+div{ ; overflow: hidden; transiti ...

  6. html5 旋转导航练习

    ul{    list-style: none;    font-size: 24px;    font-weight: bold; }a{    text-decoration: none;}li{ ...

  7. html5人物图片360度立体旋转

    体验效果:http://hovertree.com/texiao/html5/10.htm 下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm 代码如下: ...

  8. 3D HTML5 Logo标志 超炫酷旋转特效

    今天又要为大家带来一款超酷的HTML5 Canvas 3D动画特效,是一款可以旋转的HTML5 Logo标志.画面上一共有两块可旋转的区域,第一是可旋转的背景,第二则是可旋转的Logo标志.Logo标 ...

  9. 基于HTML5 WebGL实现3D飞机叶轮旋转

    在上一篇<基于HT for Web矢量实现2D叶轮旋转>中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用. 在3D拓扑上可以创建各种各样的图元,在HT for W ...

随机推荐

  1. 清除svn检出导致的所有文件的问号

    问题:将svn项目检出到桌面后,桌面的图标都有问号了,怎么消除这一大堆问号? 解决方案:(1)新建一个a.txt文件,把这行代码复制进去for /r . %%a in (.) do @if exist ...

  2. 装B技能GET起来！Apple Pay你会用了吗？

    科技圈儿有一个自带光环的品牌 它每次一有任何动静 不用宣传 也不用刻意营销 消息还是能传天下 2月18日 你敢说你的朋友圈儿没有被下面这个词儿刷屏? Apple Pay 这不,我就跟着凑凑热闹,开个小 ...

  3. MD5进行文件完整性校验的操作方法

    我组产品包含大量音频和图片资源,MD5主要就用来检测这些资源文件的完整性.主要思路是:先计算出所有资源文件的MD5值,存到一个xml文件中,作为标准的MD5值.然后把这个xml文件放到我们的产品中,每 ...

  4. 普元OA平台介绍

    Primeton Portal提供了访问企业信息资源的统一入口,是一个面向企业的内容管理.信息发布和集成展现平台,提供了单点登录.内容管理.信息发布.应用集成.个性化等功能,能够帮助企业快速搭建一个集 ...

  5. BUPT复试专题—网络传输(2014网研)

    题目描述 网络的高效互联与智能传输是提升海量用户服务请求映射效率的重要措施.在这个任务中,你需耍在最小的传输时间内,将数据源传输到指定的网络节点中.我们给定的网络一共包含N个节点,其中节点1为数据源. ...

  6. Android电子书项目实训【项目说明】【1】

    概述: 本实训项目是本科教学中,Android课程实训的项目,旨在训练Android App訪问server,获取server数据,解析,并呈现的流程.主要包括的功能有: 1.用户注冊 2.登录 3. ...

  7. 一致性hash算法在memcached中的使用

    一.概述 1.我们的memcacheclient(这里我看的spymemcache的源代码).使用了一致性hash算法ketama进行数据存储节点的选择.与常规的hash算法思路不同.仅仅是对我们要存 ...

  8. 【转】DevOps原则

    DevOps的出现有其必然性.在软件开发生命周期中,遇到了两次瓶颈. 第一次瓶颈是在需求阶段和开发阶段之间,针对不断变化的需求,对软件开发者提出了高要求,后来出现了敏捷方法论,强调适应需求.快速迭代. ...

  9. 令人赞叹的 MySQL

    原文链接 译文链接 感谢 艾凌风 小伙伴校稿 令人赞叹的 MySQL 一个很棒的 MySQL 软件.库以及资源列表. 这个列表接受并鼓舞 pull requests,请看 CONTRIBUTING 文 ...

  10. ActiveMQ(一) 转

    package pfs.y2017.m11.mq.activemq.demo01; import javax.jms.Connection; import javax.jms.DeliveryMode ...