【CSS3】动画
<!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】动画的更多相关文章
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- CSS3动画事件
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
随机推荐
- 【S】SQL SERVER检查临时表占用空间情况
--检查已标记为需要删除的临时表select * from T_BAS_TEMPORARYTABLENAME; --所有系统创建的临时表及视图SELECT * FROM sys.tables WHER ...
- 深入学习JS执行--创建执行上下文(变量对象,作用域链,this)
一.介绍 本篇继上一篇深入理解js执行--单线程的JS,这次我们来深入了解js执行过程中的执行上下文. 本篇涉及到的名词:预执行,执行上下文,变量对象,活动对象,作用域链,this等 二.预执行 在上 ...
- 模仿J2EE的session机制的App后端会话信息管理
此文章只将思想,不提供具体完整实现(博主太懒,懒得整理),有疑问或想了解的可以私信或评论 背景 在传统的java web 中小型项目中,一般使用session暂存会话信息,比如登录者的身份信息等.此机 ...
- 关于Python在Linux、Mac和Windows上的安装方法总结
一.Linux下安装python 1.python源码安装包下载地址: https://www.python.org/downloads/source/ 2.下载完tar.xz压缩包以后, ...
- JQuery之事件冒泡
JQuery 提供了两种方式来阻止事件冒泡. 方法一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- 12. ZooKeeper配额和认证
ZooKeeper具有与其数据模型相关的可配置配额(quota). 可以设置znode上的配额限制和存储的数据量.如果ZooKeeper命名空间中的一个子树超出与其关联的配额,ZooKeeper会在日 ...
- dnsmasq服务的安装与配置
在ubuntu16.04上安装dnsmasq服务,在本地做泛域名解析 安装 $ apt-get install dnsmasq -y $ /etc/init.d/dnsmasq start 配置 Dn ...
- 【javaFX学习】(二) 控件手册
这里写的控件可能不是所有的控件,但是应该是比较齐全并足够用的了,后面还有图表类的,3d模型类,放在后面来写吧,太多了.javafx的功能比以前想象中的要强大.而且也很方便,所有的控件写完后再用Scen ...
- 从a标签传值中文乱码解决
<% out.print(new String(request.getParameter("a标签的参数").getBytes("iso8859-1"), ...
- 【NOIP2013提高组】火柴排队
https://www.luogu.org/problem/show?pid=1966 Σ(ai-bi)2=Σai2+Σbi2-2Σai*bi,要使Σ(ai-bi)2最小,则需2Σai*bi最大. 由 ...