css动画和渐变
变形：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
元素的变形：transform
transform:none | <transform-function>
none：默认值，不设置变形
<transform-function>：设置变形函数，如旋转rotate()、缩放scale()、移动translate()、倾斜skew()、矩阵变形matrix()。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动画之简单变化</title>
<style type="text/css">
ul {
margin-top: 30px;
list-style: none;
line-height: 25px;
font-family: Arial;
font-weight: bold;
}
li {
width: 120px;
float: left;
margin: 2px;
border: 1px solid #cccccc;
background-color: #e4e4e4;
text-align: left;
}
li:hover {
background-color: #;
}
a {
display: block;
padding: 5px 10px;
color: #;
/*text-decoration 属性规定添加到文本的修饰。如下划线等*/
text-decoration: none;
/*定义原点 */
transform-origin: ;
}
li:nth-child():hover a{
background-color: #f90;
/*字体颜色 */
color: #FF3321;
/*旋转 */
transform:rotate(30deg);
}
li:nth-child():hover a{
background-color: #f90;
/*字体颜色 */
color: #FF3321;
/*移动 */
transform:translate(5px,5px);
}
li:nth-child():hover a{
background-color: #f90;
/*字体颜色 */
color: #FF3321;
/*缩放 */
transform:scale(0.8,1.5);
}
li:nth-child():hover a{
background-color: #f90;
/*字体颜色 */
color: #FF3321;
/*倾斜 */
transform:skew(30deg);
}
</style>
</head>
<body>
<ul>
<li><a href="#">html </a></li>
<li><a href="#">css </a></li>
<li><a href="#">flash</a></li>
<li><a href="#">ps</a></li>
</ul>
</body>
</html>
旋转：rotate(<angle>)
angle：旋转角度，代为deg，正值顺时针，负值逆时针。
缩放和翻转：scale(<x>,<y>)
<x>：水平方向放大倍数
<y>：垂直方向放大倍数
注释：中间用逗号隔开数值，大于1表示放大，小于1表示缩放。为负数表示翻转。如果y值省略，会水平方向和垂直方向上放大或缩放相同倍数。
移动：translate(<dx>,<dy>)
<dx>：元素在水平方向上的偏移距离
<dy>：元素在垂直方向上的偏移距离
注释：<dx><dy>可为负值或带小数的的值。偏移方向不解释。若<dy>的值省略，则垂直偏移距离为0
倾斜：skew(<x-angle>,<y-angle>)
<x-angle>：元素在空间x轴上的倾斜角度
<y-angle>：元素在空间y轴上的倾斜角度
注释：<x-angle><y-angle>单位deg，值为正，顺时针，值为负，逆时针。若<y-angle>值省略，则在垂直方向上的倾斜角度为0deg
矩阵变形：省略吧先，以后研究。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>过渡效果</title>
<style type="text/css">
div {
margin: 100px auto;
width: 200px;
height: 100px;
background-color: #00f;
/*总写 */
/*transition:all 1000ms linear 500ms;*/
/*分写 */
transition-propety:all;
transition-duration:1s;
transition-dely:0.5s;
transition-tinming-funtion:liner;
}
div:hover {
background-color: #f90;
transform:rotate(200deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
定义变形原点：transform-origin
transform-origin:<x> <y>
<x>：定义变形原点的x位置
<y>：定义变形原点的y位置
注释：<x>默认值是50%，取值包括left、center、right、百分比值，长度值
<y>默认值是50%，取值包括top、middle、bottom、百分比值、长度值
过渡效果：transition：transition-property | transition-duration | transition-timing-function | transition-delay
transition-property：定义过渡属性
none：没有过渡效果
all：默认值，所有的css属性都有过渡效果
<property>：指定一个用逗号分隔的多个属性，针对指定的这些属性有过渡效果
transition-duration：定义过渡过程的需要的时间
<time>：时间可以是秒或毫秒，默认是0
transition-timing-function：定义过渡方式
linear：一直是同一速度
ease：先慢，再快，最后非常慢
ease-in：先慢，再快，直至结束
ease-out：先快，再慢，直至结束
ease-in-out：在开始和结束时，都很慢
cubic-bezier(n,n,n,n)：自定义贝塞尔曲线，参数为0到1的数字。
transition-delay：定义开始过渡的延迟时间
<time>：同transition-duration中的<time>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
关键帧动画：@keyframes <animationname> {<keyframes-selector>{<css-styles>}}
<animationname>：动画的名称，用于绑定
<keyframes-selector>：动画持续时间的百分比
<css-styles>：设置样式
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>关键帧动画</title>
<style type="text/css">
div {
position: absolute;
-moz-animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
}
@-moz-keyframes mymove{
0% {top:0px;}
25% {top:200px;left: 200px}
75% {top:50px;left: 10px}
100% {top:100px;left: 60px}
}
@-webkit-keyframes mymove{
0% {top:0px;}
25% {top:200px;left: 200px}
75% {top:50px;left: 10px}
100% {top:100px;left: 60px}
}
</style>
</head>
<body>
<div><img src="54图片\图1.jpg" width="250" height="200"></div>
</body>
</html>
解释：那个百分比指的是时间，即时间轴
动画属性：animation:
-name：动画的名称，类似于Flash中的元件
none：没有动画
<keyname>：动画名称
-duration：定义动画播放的周期时间
<time>：略
-timing-function
linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)
-delay：动画播放延迟时间
<time>
-iteration-count：定义播放次数
infinite：无限次播放
<n>；确定的次数，默认是1
-direction：播放的方向
normal：默认值
alternate:与上一周期方向相反
css动画和渐变的更多相关文章
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
- CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
- 《CSS动画实用技巧》课程笔记
概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...
- CSS动画总结与呼吸灯效果
首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...
- 跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画
Xuijs超轻量级的框架+Emile CSS动画效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS 动画一站式指南
CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...
随机推荐
- MySQL存储过程-通过数据库里已存在的IP查询城市
CREATE DEFINER=`mazey`@`%` PROCEDURE `sp_find_city_by_ip`(IN `in_visitor_ip` varchar(20),OUT `out_vi ...
- Python中pymysql模块详解
安装 pip install pymysql 使用操作 执行SQL #!/usr/bin/env pytho # -*- coding:utf-8 -*- import pymysql # 创建连接 ...
- GTK+重拾--07 GTK+中的事件
(一):写在前面 在这一个小节中,我们主要是学习GTK+2.0中最重要的部分.就是信号和事件.GTK+函数工具库是基于"事件"系统的.全部的GUI应用都是基于"事件&qu ...
- Python 面试题（上）
Python语言特性 1 Python的函数参数传递 看两个例子: a = 1 deffun(a): a = 2 fun(a) printa # 1 a = [] deffun(a): a.appen ...
- Java进阶学习：JSON解析利器JackSon
Java:JSON解析利器JackSon JackSon基础 1.Maven项目引入 <!-- https://mvnrepository.com/artifact/org.codehaus.j ...
- link_to嵌套
= link_to theses_path, :class=>"btn" do .text-center 购买
- Android Media应用开发
Java层API : AudioRecord 采集音频(PCM格式)AudioTrack 播放音频 Camera 用来采集摄像头的数据Surface / SurfaceView / GLSurface ...
- 【leetcode刷题笔记】Unique Paths II
Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...
- FOJ 2232 匈牙利算法找二分图最大匹配
题目链接 简单理解匈牙利算法 简单理解二分图 尽量让每一个随从击败一个对手且随从全部存活,关键是为每一个随从找对手(递归过程),"腾". #include<iostream& ...
- EntityFramework 学习 一 Spatial Data type support in Entity Framework 5.0
MS SQl Server引进两种特殊的数据类型geography and geometry public partial class Course { public Course() { this. ...