CSS3和动画
定位：
z-index叠层 数字越大越往上层
注意：要用z-index属性必须设position属性
溢出：overflow
属性值：visible 不剪切内容也不添加滚动条
Auto 在必需时对象内容才会被裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条，强制加滚动条
Overflow-x x轴方向溢出
overflow-y y轴方向溢出
缩放：
Zoom 放大、缩小
边框：border
border-radius 圆角
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body> <div>border-radius 属性允许您为元素添加圆角边框！ </div> </body>
</html>
结果为：
box-shadow 阴影
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body> <div></div> </body>
</html>
结果为：
border-image 图片
border-image: source slice width outset repeat|initial|inherit;
border-image-source 用于指定要用于绘制边框的图像的位置
border-image-slice 图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset 用于指定在边框外部绘制 border-image-area 的量
border-image-repeat 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div{
border:15px solid transparent;
width:250px;
padding:10px 20px;
} #round
{ border-image:url(border.png) 30 30 round;
} #stretch
{ border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body> <p>
<b>注意: </b>
Internet Explorer 不支持 border-image 属性。
</p>
<p> border-image 属性用于设置图片的边框。</p> <div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div> <p>这是我们使用的图片素材：</p>
<img src="/images/border.png" /> </body>
</html>
结果为：
背景：
background-size：指定背景大小
实例：
div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
渐变：
线性渐变：从上到下：
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#grad1 {
height: 200px; background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body> <h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p> <div id="grad1"></div> <p>
<strong>注意：</strong>
Internet Explorer 9 及之前的版本不支持渐变。
</p> </body>
</html>
结果为：
线性渐变从左到右
实例：
background: linear-gradient(to right, red , blue); /* 标准的语法 */
线性渐变对角
实例：
<style>
#grad1 {
height: 200px; background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */
}
</style>
结果为：
渐变使用角度：
实例：
#grad2 {
height: 100px;
background: linear-gradient(90deg, red, blue); /* 标准的语法（必须放在最后） */
}
结果：
使用多个颜色结点
实例：
#grad1 {
height: 200px;
background: linear-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
结果为：
2D转换：
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(30deg); }
</style>
</head>
<body> <div>Hello</div> </body>
</html>
结果：
过渡：transition
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div{
width:100px;
height:100px;
background:red;
transition:width 2s; } div:hover{
width:300px;
}
</style>
</head>
<body> <p>
<b>注意：</b>
该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。
</p>
<div></div> <p>鼠标移动到 div 元素上，查看过渡效果。</p> </body>
</html>
动画;
实例：
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s; } @keyframes myfirst{
from {background:red;}
to {background:yellow;}
} </style>
</head>
<body> <p>
<b>注意:</b>
该实例在 Internet Explorer 9 及更早 IE 版本是无效的。
</p> <div></div> </body>
</html>
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s; } @keyframes myfirst{
0% {
background:red;
}
25% {
background:yellow;
}
50% {
background:blue;
}
100% {
background:green;
}
} </style>
</head>
<body> <div></div> <p>
<b>注释：</b>
当动画完成时，会变回初始的样式。
</p> <p> <b>注意:</b>
该实例在 Internet Explorer 9 及更早 IE 版本是无效的。
</p> </body>
</html>
动画属性：
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */ } @keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
} </style>
</head>
<body> <p>
<b>注意:</b>
该实例在 Internet Explorer 9 及更早 IE 版本是无效的。
</p> <div></div> </body>
</html>
CSS3和动画的更多相关文章
- CSS3 @keyframes 动画
CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- CSS3简单动画
css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...
- css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
随机推荐
- 关于CSRF攻击详解
CSRF的原理以及防范 CSRF概念:CSRF跨站点请求伪造(Cross—Site Request Forgery),跟XSS攻击一样,存在巨大的危害性,你可以这样来理解: 攻击者盗用了你的身份,以你 ...
- 乐字节Java8核心特性之Optional类
大家好啊,上次小乐给大家介绍了Java8最最重要的一个特性——Stream流,点击可以回顾哦. Optional<T>类(java.util.Optional)是一个容器类,代表一个值存在 ...
- 解决eclipse双击类名、选中类名出现假死或者非常慢的问题（取消Eclipse鼠标悬停和自定义快捷键）
eclipse(MyEclipse)关闭鼠标移动提示代码功能和自定义快捷键代码提示设置的方法 eclipse(MyEclipse)关闭鼠标移动提示代码功能: eclipse(MyEclipse)--& ...
- sysbench压力测试总结
sysbench压力测试工具简介sysbench是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有MySQL.Orac ...
- 分层图 （可以选择K条路的权为0，求最短路）
分层图可以处理从图中选取k条边使其边权变为0,求最短路 Description 在你的强力援助下,PCY 成功完成了之前的所有任务,他觉得,现在正是出去浪的大好时光.于是,他来到高速公路上,找到一辆摩 ...
- 解决 This application requires Java Runtime Environment XX
已经安装了 jdk ,并且设置好了 java 环境变量,CMD 运行 java 或 javac 都正常,其他依赖 jdk 的应用程序都能正常运行.但是在运行 jd-gui 1.1.0 的时候,出现错误 ...
- jQuery对ajax的支持
有load,get,post和ajax四个方法都可以,其中后三个直接使用$.xx调用 使用方法大致相同,这里只介绍get和post方法 -------------------------------- ...
- ForkJoin有参无返回值、有参有返回值实例
介绍: a . Fork/Join为JKD1.7引入,适用于对大量数据进行拆分成多个小任务进行计算的框架,最后把所有小任务的结果汇总合并得到最终的结果 b . 相关类 public abstract ...
- ace admin 左侧菜单定位
后台模版来自:Ace Admin http://ace.jeka.by/form-elements.html 左侧菜单,通过js根据url来判断显示哪块 window.location.pathnam ...
- Teradata 认证系列 - 2. Teradata数据库总览
Teradata (以下简称TD) 总览本课的学习目标 描述Teradata数据库产品的功能 知晓支持的操作系统 描述Teradata的并行架构 解释线性可扩展性 列出Teradata DBA永远不需 ...