CSS3 过渡、动画、多列、用户界面
CSS3 过渡、动画、多列、用户界面
transition过渡
transition: transition-property transition-duration transition-timing-function transition-delay;//过渡名称 过渡时长 过渡时间曲线 过渡延时
.box {
width: 100px;
height: 100px;
line-height: 100px;
color: red;
text-align: center;
background-color: yellow;
transition: width 2s, height 2s, line-height 2s;
-webkit-transition: width 2s, height 2s, line-height 2s;
-moz-transition: width 2s, height 2s, line-height 2s;
-o-transition: width 2s, height 2s, line-height 2s;
}
.box:hover {
width: 200px;
height: 200px;
line-height: 200px;
}
animation 动画
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode;
/*动画名称 动画周期 动画时间曲线 动画延时 动画次数 动画方向(normal、alternate) 动画暂停或运行(paused、running) 动画在播放之前或之后,其动画效果是否可见(none、forwards、backwards、both)*/
.box {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: green;
color: yellow;
-webkit-animation: move 5s linear infinite;
}
@-webkit-keyframes move {
0% { left:; top:; }
25% { left: 200px; top:; background-color: orange;}
50% { left: 200px; top: 200px; background-color: red; }
75% { left:; top: 200px; background-color: lightblue; }
100% { left:; top:; }
}
多列
column-count 元素应该被分隔的列数
column-gap 列与列之间的间隔
column-rule 列与列之间的宽度、样式、颜色规则
div {
-moz-column-count:; /* Firefox */
-moz-column-rule:3px outset #ff0000;
-moz-column-gap:40px;
-webkit-column-count:; /* Safari 和 Chrome */
-webkit-column-gap:40px;
-webkit-column-rule:3px outset #ff0000;
column-count:;
column-gap:40px;
column-rule:3px outset #ff0000;
}
用户界面
resize 规定是否可由用户调整元素的尺寸
resize: none|both|horizontal|vertical;
box-sizing 允许您以确切的方式定义适应某个区域的具体内容
box-sizing: content-box|border-box|inherit;
outline-offset 对轮廓进行偏移,并在边框边缘进行绘制
outline-offset: length|inherit;
CSS3 过渡、动画、多列、用户界面的更多相关文章
- css3过渡动画 transition
transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果. 要实现这一点,必须规定两项内容: 指定要添加效果的CSS属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...
- CSS3过渡动画&关键帧动画
一.过渡动画 过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...
- CSS3 过渡动画
实现如下效果:当鼠标移动到图片上是图片有类似于放大镜放大的效果 transition : CSS属性 时间 当transition中监测的css属性发生变化时,会触发动画 .img_box img{ ...
- css3贝塞尔曲线过渡动画速率——transition-timing-function:cubic-bezier(n,n,n,n)
css3过渡动画速率用到的是三阶贝塞尔曲线,曲线有四个点,p0,p1,p2,p3 有几个属性: linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)). ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- CSS3过渡、变形和动画
1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{ text-decoration: n ...
- CSS3学习(CSS3过渡、CSS3动画)
CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- CSS3过渡与动画
一.CSS3 过渡 transition-property 规定过渡效果的 CSS 属性名 -webkit-transition-property: none / all / property; -m ...
随机推荐
- mysql数据库索引原理及其常用引擎对比
索引原理 树数据结构及其算法简介 B+/-树: - 多路搜索树; - 时间复杂度O(logdN);h为节点出度,d为深度 红黑树: - 节点带有颜色的平衡二叉树 - 时间复杂度O(log2N);h节点 ...
- C# 1.将整个文件夹复制到目标文件夹中 2.将指定文件复制到指定目标文件夹中
].Items.Clear(); string filePath = Application.StartupPath; string sourcePath = Path.Combine(filePat ...
- httpclient模拟浏览器
package com.java.httpclient; import java.io.IOException; import org.apache.http.HttpEntity; import o ...
- spring boot (一)
spring boot 启动注解 @SpringBootApplication @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIM ...
- BZOJ 1666: [Usaco2006 Oct]Another Cow Number Game 奶牛的数字游戏 幼儿园测试题
本来以为是一道数学题,一顿XJBT导式子,结果就是个幼儿园都会的模拟. Code: #include<bits/stdc++.h> #define ll long long using n ...
- 路飞学城Python-Day171
Evernote Export 线性结构: python的列表操作 列表是如何存储的:顺序存储的,是一块连续的内存,内存是一堆格子,列表是一串连续的编号 32位机器上一个整数占4个字节 数组和列表有2 ...
- 使用js控制文本超出部分显示省略号
js代码 // 字数限制30字,超出不显示 fontNumber (date) { const length = date.length if (length > 30) { var str = ...
- Blender软件导出的obj数据格式文件内容解读
[cube.obj] # Blender v2.78 (sub 0) OBJ File: '' # www.blender.org mtllib cube.mtl #这里是引用了一个外部材质文件cub ...
- HDU2035 - 人见人爱A^B
求A^B的最后三位数表示的整数. 说明:A^B的含义是"A的B次方" Input 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B<=1 ...
- linux 遇到(vsftpd)—500 OOPS:chroot
今天在用vsftpd 时出现一个问题: 500 OOPS:chroot 解决办法: 1.关闭SELINUX [root@localhost ~]#vi /etc/sysconfig/selinux # ...