<!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. Android Studio设置行宽、格式化断行

    设置基于Android studio 1.2,其它版本可能位置不大一样,可以直接搜索 1.设置行宽 就是那条右标准线的位置:Setting-->Editor-->Code Style,右侧 ...

  2. java反射基础知识（二）

    1. 了解 Java 中的反射 1.1 什么是 Java 的反射 Java 反射是可以让我们在运行时获取类的函数.属性.父类.接口等 Class 内部信息的机制.通过反射还可以让我们在运行期实例化对象 ...

  3. c9.io

    老常时间没写了,这次是真碰到心动的东西了,赶快给大家奉献上来. (先上图!) (Cloud9 IDE,云端IDE,简单一点就是运行在浏览器中的IDE,你不需要安装任何东西, 只要打开任何一个浏览器,甚 ...

  4. SVN更新的时候报断言失败解决办法

    解决办法:没啥好方法,重新检出代码就好使了.

  5. CSS3自定义滚动条样式 之 -webkit-scrollbar

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  6. UEFI引导修复

    一.用bcbboot自动修复 我们建议大家启动64位8PE,用它带的bcdboot来修复. (一)指定esp分区修复 环境为64位8PE,bios/uefi启动进入下都可以 1.启动64位8PE,并用 ...

  7. HTML5堆木头游戏

    在线演示 本地下载

  8. Linux下Mysql的安装步骤

    (1).下载安装包 https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.23-linux-glibc2.12-x86_64.tar [roo ...

  9. 20145229吴姗珊《网络对抗》WEB基础实践

    20145229吴姗珊<网络对抗>WEB基础实践 基础与实践 基础问题 1.什么是表单 表单是可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁. 一部分是HTML源代码用于 ...

  10. [BZOJ1116]CLO[并查集]

    看了样例突然发现= =无向边不会增加入度. 然后发现是环套环. 一个环所有点入度都为2. 最后的图无视所有无向边的话大概是这样的(将就一下 然后就可以并查集维护一下联通性... 当x , y属于一个联 ...