<!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. cas添加验证码

    cas添加验证码,折腾了好久,终于整理好了,很大部分都是借鉴http://binghejinjun.iteye.com/blog/1255293这个的.但是他的有一个很不好的地方就是不能提升验证码错误 ...

  2. go——变量

    在数学概念中,变量(variable)表示没有固定值且可以改变的数.但从计算机系统实现角度来看,变量是一段或多段用来存储数据的内存.作为静态类型语言,Go语言总是有固定的数据类型,类型决定了变量内存的 ...

  3. day13 迭代器

    迭代器 'iterable' 可迭代的 内部含有__iter__方法的数据类型就是可迭代的 —— 可迭代协议 print(dir([])) print(dir({})) print(dir(5)) p ...

  4. C#驱动级模拟按键操作

    C#驱动级模拟按键操作 2013-09-26 03:17 ·AB叔 447 3 <- 点击左侧的数字“攒”一个吧 昨天遇到一个程序自动输入财付通密码的任务. 因为财付通密码控件是有安全保护的,所 ...

  5. CNN学习笔记：卷积运算

    CNN学习笔记:卷积运算 边缘检测 卷积 卷积是一种有效提取图片特征的方法.一般用一个正方形卷积核,遍历图片上的每一个像素点.图片与卷积核重合区域内相对应的每一个像素值乘卷积核 .内相对应点的权重,然 ...

  6. springmvc 自定义拦截器

    <mvc:interceptors> <!-- 配置自定义的拦截器 --> <bean class="com.atguigu.springmvc.interce ...

  7. leetcode每日一题——两数之和

    题目: 两数之和 难度: 简单 描述: 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 解法: class Solutio ...

  8. java 工厂模式的作用，为什么要用工厂模式以及示例演示

    1 工厂模式的作用,为什么要用工厂模式? 工厂模式是为了解耦:把对象的创建和使用的过程分开.就是Class A 想调用Class B,那么只是调用B的方法,而至于B的实例化,就交给工厂类. 工厂模式可 ...

  9. SVN插件下载地址及更新地址

    SVN插件下载地址及更新地址,你根据需要选择你需要的版本.现在最新是1.8.xLinks for 1.8.x Release:Eclipse update site URL: http://subcl ...

  10. hadoop28---netty传对象

    Netty中,通讯的双方建立连接后,会把数据按照ByteBuf的方式进行传输,例如http协议中,就是通过HttpRequestDecoder对ByteBuf数据流进行处理,转换成http的对象.基于 ...