<!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本地gradle

    1.从网站上下载http://services.gradle.org/distributions/ 2.打开工程里的gradle-wrapper.properties, distributionUrl ...

  2. Library Cache优化与SQL游标

    Library Cache主要用于存放SQL游标,而SQL游标最大化共享是Library Cache优化的重要途径,可以使SQL运行开销最低.性能最优. 1 SQL语句与父游标及子游标 在PL/SQL ...

  3. loadrunner winsocket sent buffer 乱码

    data.ws里手写的xml参数,调试脚本时一直显示乱码,解决方法如下: tools-recording options--sockets--winsock下: EBCID--translation ...

  4. APP 自动化测试封装结构模式

    原文出处http://www.toutiao.com/a6268089772108333314/ 做过UI自动化测试同学,都会深深体会几个痛点:维护量大.适配量大.编写代码巨大等.基于这些问题,大家都 ...

  5. day3-python-文件操作(2)

    本文内容涉及python中的os模块和os.path模块的常用操作,这两个模块提供了与平台和操作系统无关的文件系统访问方法.os模块负责大部分的文件系统操作,包括:删除文件.重命名文件.遍历目录树等: ...

  6. springmvc 需要用到的核心jar包

    aopbeanscontextcoreexpressionwebwebmvc

  7. Educational Codeforces Round 11A. Co-prime Array 数学

    地址:http://codeforces.com/contest/660/problem/A 题目: A. Co-prime Array time limit per test 1 second me ...

  8. HDU4631(标程代码）

    /*将x从小到大排序,每次插入一个点,直接找比这个点的x大的第一个,然后从这个开始向两边找 ,找点的下标用多重容器实现*/ #include<stdio.h> #include<st ...

  9. 手机调取摄像头问题（getUserMedia）

    先说坏消息,苹果机没法玩这个!!! 而且,必须拥有 https 的安全协议!!! 而安卓机想完成这个功能倒是很 easy 的,看一眼代码 主要传入三个参数,配置对象,成功,失败 var mediaOp ...

  10. Python3.x：定时自动发送邮件

    定时自动发送邮件 一.简述 python发邮件需要掌握两个模块的用法,smtplib和email,这俩模块是python自带的,只需import即可使用.smtplib模块主要负责发送邮件,email ...