<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <div id="div1"><div id="div2"></div></div>

 </body>

 </html>
 #div1{

     width: 200px;

     height: 150px;

     background:pink;

     perspective: 900px;/*为子元素定义3D效果*/

 }

 #div2{

     width: 200px;

     height: 150px;

     background:orange;

 }

 #div2:hover{

     /*transform: translate(50px,1em);*//*右下平移*/

     /*transform: translate(2em);*//*右平移*/

     /*transform: translate(-50px);*//*左平移*/

     /*transform: translate(0,-50px);*//*上平移*/

     /*transform: translateX(60px);*/

     /*transform: translateY(40px);*/

     /*transform: none;*//*不偏移*/

     /*transform: scale(0.5,0.5);*//*小于1为缩小*/

     /*transform: scale(1.5);*//*大于1为放大。当只有一个值时为x轴y轴同时缩放同样大小倍数*/

     /*transform: scaleX(0.9);*/

     /*transform: scaleY(0.7);*/

     /*transform: rotate(30deg);*//*单位角度。正值顺时针旋转，负值逆时针旋转。*/

     /*transform: rotate(0.2rad);*//*单位弧度*/

     /*transform: skewX(30deg);*//*倾斜*/

     /*transform: skewY(30deg);*/

     /*transform: skew(30deg,30deg);*/

     /*transform: matrix(1,0,0.5,1,0,0);*//*第1个参数x轴缩放，第2个参数y轴倾斜，第3个参数x轴倾斜，第4个参数y轴缩放，第5个参数x轴平移，第6个参数y轴平移*/

     /*transform: scale(0.5,0.5) rotate(30deg);*/

     /*transform-origin: left top;*//*像素/百分比，x轴left、right、center，y轴top、bottom、center*/

     /*transform-origin: 0 75px;*/

     /*transform-origin: 50% 0;*/

     /*transform: rotate(0.3rad);*/

     /*transform: rotate(30deg);*/

     /*transform: translate3d(0,0,-200px);*//*z轴参数为正则靠近，为负则远离*/

     /*transform: translateZ(-300px);*/

     /*transform: rotate3d(1,0,0,30deg);*//*绕x轴旋转*/

     /*transform: rotate3d(0,1,0,30deg);*//*绕y轴旋转*/

     /*transform: rotate3d(0,0,1,30deg);*//*绕z轴旋转*/

     transform: rotate3d(1,1,1,30deg);/*绕xyz轴旋转*/

 }
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <ul>

         <li class="li1">HTML5</li>

         <li class="li1">CSS3</li>

         <li class="li1">JavaScript</li>

         <li class="li1">jQuery</li>

     </ul>

     <hr>

     <ul>

         <li>HTML5</li>

         <li>CSS3</li>

         <li>JavaScript</li>

         <li>jQuery</li>

     </ul>

 </body>

 </html>
 li{

     list-style: none;

     background:linear-gradient(to left,orange,pink);

     margin: 10px;

     padding: 10px;

     width: 90px;

     border-radius: 5px;

     text-shadow: rgba();

 }

 .li1{

     float: left;

 }

 hr{

     clear: left;

     border:2px dotted blue;

 }

 li:hover{

     background:linear-gradient(to right,orange,pink);

     transform-origin: left top;

     transform: rotate(10deg);

 }

过渡：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <div></div>

 </body>

 </html>
 div{

     width: 300px;

     height: 200px;

     background-color: red;

 }

 div:hover{

     width: 150px;

     height: 100px;

     background-color: blue;

     transition-property: all;

     /*transition-property: background-color;*/

     transition-duration: 1s;

     /*transition-timing-function: ease;*//*先慢后快*/

     transition-timing-function: linear;/*匀速*/

     transition-delay: 1s;/*默认0无延时*/

 }

【CSS3】动画的更多相关文章

  1. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  2. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  3. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  4. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  5. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  6. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  7. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  8. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  10. 简单CSS3动画制作

    本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...

随机推荐

  1. Struts2初探

    我记得美妙的瞬间:在我的面前出现了你,有如昙花一现的幻影 今天写一篇Struts2框架的,在很久很久以前,Struts2可谓是称霸江湖,纵然现在有后起之秀,但Struts2依然可以成为老牌的主流框架, ...

  2. ORA-01745: 无效的主机/绑定变量名 ORA-00917: 缺失的逗号 oracle日期格式错误

    今天在oracle中执行插入语句的时候报了一个奇怪的错误,在程序中报的错误是ORA-01745: 无效的主机/绑定变量名,网上一查说是缺失逗号,在查询分析器执行的时候报缺失的逗号,仔细看了一下也没有缺 ...

  3. 微信小程序支付及退款流程详解

    微信小程序的支付和退款流程 近期在做微信小程序时,涉及到了小程序的支付和退款流程,所以也大概的将这方面的东西看了一个遍,就在这篇博客里总结一下. 首先说明一下,微信小程序支付的主要逻辑集中在后端,前端 ...

  4. 【转】Swig 使用指南

    原文链接:https://www.cnblogs.com/elementstorm/p/3142644.html 如何使用 API swig.init({ allowErrors: false, au ...

  5. 一个部署了tomcat服务的linux服务器，运行一段时间后出现内存和空间不足的问题

    —— 前段时间项目上的事比较忙,期间笔记都是临时存在本地txt,这些天有点时间了,整理出来,以便日后查看: linux 查看内存使用情况:free -m 释放缓存: /proc/sys/vm/drop ...

  6. yii2数据条件查询-where专题

    条件查询 $customers = Customer::find()->where($cond)->all(); $cond就是我们所谓的条件,条件的写法也根据查询数据的不同存在差异,那么 ...

  7. 关于websorm卡顿的问题

    要是电脑不卡的话,使用webstorm真可谓是一种享受,但是随着项目的开展,文件逐渐增大,webstorm自然也会出现卡顿(毕竟缺点就是吃内存),这个时候我们可以增加Xms设置 Start1: 1 找 ...

  8. ios7 以后准确获取iphone设备的MAC（物理地址）

    通过参考 钉钉 项目,知道是通过wifi拿到路由的MAC地址.那么可不可以拿到iphone 设备的MAC 地址呢? 经过一番搜索,发现所有文章都是针对 ios 7 以前 可以拿到. 而且方法也都是同一 ...

  9. Angular页面加载闪现解决方案 ng-cloak

    在做Angular项目时,经常会遇见在浏览器上闪烁表达式({{ express }} ),及模块(div)的闪烁,会闪现/闪烁隐藏的数据,之前用过vue.js,可以通过v-clock解决,同理Angu ...

  10. NOIP2017 小凯的疑惑

    题目描述 小凯手中有两种面值的金币,两种面值均为正整数且彼此互素.每种金币小凯都有 无数个.在不找零的情况下,仅凭这两种金币,有些物品他是无法准确支付的.现在小 凯想知道在无法准确支付的物品中,最贵的 ...