<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>transform的使用</title>

    <style>

        li{

            list-style: none;

            float: left;

            width: 80px;

            line-height: 40px;

            background: rgba(242, 123, 5, 0.61);

            border-radius: 6px;

            font-size: 16px;

            margin-left: 3px;

        }

        li a{

            text-decoration: none;

            color: #fff;

            display: block;

            text-align: center;

            height: 40px;

        }

        li a:hover{

            background: rgba(242, 88, 6, 0.87);

            border-radius: 6px;

            /*设置a元素在鼠标移入时向右下角移动4px，8px*/

            /* transform: translate(4px,8px); 平移*/

            /*鼠标放入  显示1.5倍的效果

            transform: scale(1.5);*/

            /* transform: skewX(15deg);只针对X轴

             transform: skewY(15deg);只针对Y轴*/

             transform: skew(15deg,-15deg);

        }

        img:hover{

            /*旋转 默认是 顺时针旋转*/

            transform: rotate(90deg) scale(1.5);

        }

    </style>

</head>

<body>

    <ul>

        <li><a href="#">服装城</a></li>

        <li><a href="#">美妆馆</a></li>

        <li><a href="#">超市</a></li>

        <li><a href="#">全球购</a></li>

        <li><a href="#">闪购</a></li>

        <li><a href="#">团购</a></li>

        <li><a href="#">拍卖</a></li>

        <li><a href="#">金融</a></li>

    </ul>

<img src="cat.jpg" alt="小猫咪"  height="100px" width="100px">

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>transition属性</title>

    <style type="text/css">

/*

transition属性的值：

transition-property：过渡效果的css属性的名称（color,background,font-size....）!

                      可以只设置一个属性， 一般方便起见使用all！针对于所有的属性

transition-duration:过渡效果需要多少秒

transition-timing-function：速度曲线！

     ease：慢速开始，之后变快！

     linear：匀速！

     ease-in:慢速开始!

     ease-out:慢速结束：

     ease-in-out:慢速开始!慢速结束!

transition-delay:过度效果开始前的等待时间！ 默认是0s！

*/

  div{

      width: 100px;

      height: 100px;

      text-align: center;

      line-height: 100px;

      background-color: orange;

      /*过度效果*/

      transition:all  1s  linear;

  }

 div:hover{

     background-color: red;

     font-size: 25px;

     transform: rotate(360deg);

 }

    </style>

</head>

<body>

<div>

    能旋转不？

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>animation的使用</title>

    <style  type="text/css">

        div{

            width: 100px;

            height: 100px;

            background: red;

            /*调用动画*/

            animation:animates 3s linear infinite;

        }

       /*创建关键帧*/

        @keyframes  animates{

            0%{

                width: 0px;

                transform: translate(50px,0) ;

            }

            25%{

                width: 25px;

                height: 150px;

                transform: translate(150px,0) rotate(90deg);

                background-color: pink;

            }

            50%{

                width: 50px;

                height: 300px;

                background-color: aqua;

                transform: translate(300px,0) rotate(180deg);

            }

            75%{

                width: 75px;

                height: 150px;

                background-color: orange;

                transform: translate(150px,0) rotate(270deg);

            }

            100%{

                width: 100px;

                transform: translate(50px,0) rotate(360deg);

            }

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

css11动态效果的更多相关文章

  1. jQuery动态效果实例

    jQuery常见的动态效果: 隐藏/显示效果: 1.(1):隐藏,显示:通过 jQuery,使用 hide() 和 show() 方法可以用来隐藏和显示 HTML 元素. (2):隐藏/显示的速度: ...

  2. JS中for循序中延迟加载实现动态效果

    JS中for循序中延迟加载实现动态效果 今天在做一个前端的效果的时候碰到一个棘手的问题,就是实现一个动态的圆柱效果,废话不多少,直接上代码. <script src="js/jquer ...

  3. D3.js：动态效果

    D3 提供了 4 个方法用于实现图形的过渡: - transition() 启动过渡效果,其前后是图形变化前后的状态(形状.位置.颜色等等),例如: .attr("fill",&q ...

  4. 3个简单CSS实现的动态效果

    这里只是鼠标移入的时候出现的动态效果,并没有使用CSS的动画属性animation和变形属性transform.后面再补... HTML代码如下: <!DOCTYPE html><h ...

  5. jQuery实现点赞动态效果

    实现动态效果基本上都是用到定时器,修改标签的位置大小颜色属性 <!DOCTYPE html> <html lang="en"> <head> & ...

  6. atitit.按钮光标滑过高亮切换以及其他动态效果的实现css html js --attilax总结

    atitit.按钮光标滑过高亮切换以及其他动态效果的实现css html  js --attilax总结 4. 鼠标越过动态图片切换实现 1 4.1. 优先模式::css模式... 1 4.2. 其次 ...

  7. D3.js系列——动态效果和Update、Enter、Exit的理解

    一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再 ...

  8. HTML5 Canvas 六角光阑动态效果

    光阑是光具组件中光学元件的边缘.框架或特别设置的带孔屏障,本人实现了结构比较简单的六角光阑,效果有点像宇航员在徐徐张开的飞船舷窗中看到逐渐完整的地球,下面四张图可以感受一下. 当然看动态效果才能真正体 ...

  9. Unity---DOTween插件学习(4)---Andy老师自己写的动态效果工具插件

    本文及系列参考于Andy老师的DOTween系列 欢迎大家关注Andy老师 13.动态效果工具插件 这个插件是Andy老师自己利用DOTween写的按钮点击和显示的效果控件,有非常多的种类,还是挺好用 ...

随机推荐

  1. Parcel

    1.IPC解决方案 而非 序列化机制 Container for a message (data and object references) that can be sent through an ...

  2. Python基础教程-Dict和Set

    Python的dict Python内置了字典:dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 比如,要根据同学的名字查找对应的 ...

  3. Tomcat的session

    创建session 在具体说明session的创建过程之前,先看一下BS访问模型:  browser发送Http request: tomcat内核Http11Processor会从HTTP requ ...

  4. DBCC SHRINKFILE收缩日志/收缩数据库/收缩文件

    DBCC SHRINKFILE 收缩相关数据库的指定数据文件或日志文件大小. 语法 DBCC SHRINKFILE    ( { file_name | file_id }        { [ ,t ...

  5. oracle Dba之路

    如何快速的成为一个合格的 DBA? 2010年11月03日 11:25:00 阅读数:584 原文来自:http://topic.csdn.net/u/20101031/21/A78B2EA1-6F2 ...

  6. 07 Spring框架 依赖注入（四）基于注解的依赖注入

    前面几节我们都在使用xml进行依赖的注入,但是在实际的开发中我们往往偏爱于使用注解进行依赖注入,因为这样更符合我们人的思维,并且更加快捷,本节就来讲述Spring基于注解的依赖注入: 信息注入注解 @ ...

  7. HDOJ 2203 亲和串 【KMP】

    HDOJ 2203 亲和串 [KMP] Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...

  8. SVN使用—工作模式及运行原理以及优缺点对比

    一.SVN原理 (1)运行方式 svn服务器有2种运行方式:独立服务器和借助apache运行. 1.独立服务器访问 访问地址如:svn://svn.test.com/test 2.借助Apache等h ...

  9. MySQL行级锁和表级锁

    锁定用于确保事务完整性和数据库一致性. 锁定可以防止用户读取其他用户正在更改的数据,并防止多个用户同时更改相同的数据. 如果不使用锁定,数据库中的数据可能在逻辑上变得不正确,而针对这些数据进行查询可能 ...

  10. Linux中Nginx安装部署

    前言 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sys ...