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. 【POJ3415】Common Substrings（后缀数组，单调栈）

    题意: n<=1e5 思路: 我的做法和题解有些不同 题解是维护A的单调栈算B的贡献,反过来再做一次 我是去掉起始位置不同这个限制条件先算总方案数,再把两个串内部不合法的方案数减去 式子展开之后 ...

  2. javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  3. web信息搜索之目标扫描篇

    https://blog.csdn.net/dongfei2033/article/details/78175421

  4. rsync同步文件

    rsync中的参数 -r 是递归 -l 是链接文件,意思是拷贝链接文件:-p 表示保持文件原有权限:-t 保持文件原有时间:-g 保持文件原有用户组:-o 保持文件原有属主:-D 相当于块设备文件: ...

  5. jquery.fullPage.js全屏滚动插件

    注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...

  6. Python 和 Elasticsearch 构建简易搜索

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

  7. memcached安装与初步

    mac 首先安装homebrew 根目录下 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew ...

  8. C++ OCX控件开发后出现的注册问题

    error MSB3075: 命令“regsvr32 /s /c "F:\JOBS\项目\格网数据的动态三维可视化\Dev\GridDynamicDisplay\gdiplusplot\GD ...

  9. （二）《机器学习》（周志华）第4章 决策树 笔记 理论及实现——“西瓜树”——CART决策树

    CART决策树 (一)<机器学习>(周志华)第4章 决策树 笔记 理论及实现——“西瓜树” 参照上一篇ID3算法实现的决策树(点击上面链接直达),进一步实现CART决策树. 其实只需要改动 ...

  10. 如何快速的开发一个完整的iOS直播app(美颜篇)

    前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重要的,如果没有美颜功能,可能分分钟钟掉粉千万,本篇主要讲 ...