<!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. mysql 建立表之间关系 一对一 练习1

    创建db5数据库 create database db5 charset=utf8; use db5; 例一:一个用户只有一个博客 用户表: id name 1 mike 2 alex 3 jack ...

  2. 0501-Hystrix保护应用-超时机制、断路器模式简介

    一.概述 hystrix对应的中文名字是“豪猪”,豪猪周身长满了刺,能保护自己不受天敌的伤害,代表了一种防御机制,这与hystrix本身的功能不谋而合,因此Netflix团队将该框架命名为Hystri ...

  3. error：No resource found that matches the given name 'Theme.AppCompat.Light'

    一.stsckoverflow http://stackoverflow.com/questions/17870881/cant-find-theme-appcompat-light-for-new- ...

  4. less本地环境输出hello-world

    在学任何东西之前, 我就是有个习惯, 先搞定这个东西最最简单的使用方法. 然后在 深入学习, 毫无疑问hello-world一直是那么简单. 准备环境 较新版的高级浏览器. WAMP环境. less. ...

  5. SQL基础三

    一.SQL ORDER BY 子句 ORDER BY 语句用于对结果集进行排序,默认按照升序对记录进行排序,如果需要按照降序进行排序,需要在后面追加关键字DESC.应用如下: 原始的表:Orders表 ...

  6. day3-set集合

    set是一个无序且不重复的元素集合 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...

  7. appcmd应用

    appcmd资料: http://www.jb51.net/article/36024.htm 官方文档:https://docs.microsoft.com/zh-cn/iis/get-starte ...

  8. PolyBase--整合SQLServer和Hadoop

    我们一直强调,大数据和传统的关系数据库并不对立,未来公司的的业务将会是大数据和关系型数据库的整合.微软的PolyBase打响了SQL Server和Hadoop整合的第一枪. 在2012年度的SQL ...

  9. Linux 进程管理 vmstat、top、pstree命令

    vmstat命令:监控系统资源 vmstat 是 Linux 中的一个综合性能分析工具,可以用来监控 CPU 使用.进程状态.内存使用.虚拟内存使用.磁盘输入/输出状态等信息.vmstat 命令格式如 ...

  10. shell中的调试与计算

    shell 计算  2.正确方法   1)使用let   var=1   let "var+=1"   echo $var   输出结果为2,这次没有悲剧   注意:   a)经我 ...