css3
来源:互联网 发布:python自学视频教程 编辑:程序博客网 时间:2024/06/08 12:15
在css3中,如果使用动画功能,可以使页面上的文字或画像具有动画效果,可以使背景色从一种颜色平滑过度到另一种颜色。
css3中的动画功能分为Transition功能与Animations功能,这两种功能都可以通过改变css中的属性值来产生动画效果。
目前为止,Transitions功能支持从一个属性值平滑过度到另一个属性值,Animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果。
Transitions功能
transition: property duration timing-function;
解析:
property表示对哪个属性进行平滑过渡;
duration表示在多长时间内完成属性的平滑过渡;
timing-function表示通过什么方法来进行平滑过渡;
html:
<div>示例文字</div>
1.平滑过渡一个属性值的css:
在线演示(鼠标经过,背景颜色改变)
鼠标悬停颜色渐变:
<style> div { background-color: pink; -webkit-transition: background-color 1s linear; -moz-transition: background-color 1s linear; -o-transition: background-color 1s linear; } div:hover { background-color: blue; /*鼠标经过背景颜色改变*/ }</style>
2.平滑过渡多个属性值的css
在线演示(鼠标经过,背景颜色、字体颜色、宽度改变)
鼠标悬停:
css:
<style> div { background-color: pink; -webkit-transition: background-color 1s linear,color 1s linear,width 1s linear; -moz-transition: background-color 1s linear,color 1s linear,width 1s linear; -o-transition: background-color 1s linear,color 1s linear,width 1s linear; } div:hover { background-color: blue; /*鼠标经过背景颜色改变*/ color: #fff; /*鼠标经过字体颜色改变*/ width: 400px; /*鼠标经过宽度改变*/ }</style>
3.综合使用transitions动画功能
在线演示
鼠标经过图片,先向右移动30px,然后旋转180度;
html:
<div><img src="images/03.jpg" alt="*"></div>
css:
img { position: absolute; top: 70px; left: 0; -webkit-transform: rotate(0deg); -webkit-transitions: left 1s linear, -webkit-transform 1s linear; -moz-transform: rotate(0deg); -moz-transitions: left 1s linear, -moz-transform 1s linear; -o-transform: rotate(0deg); -o-transitions: left 1s linear, -o-transform 1s linear; } div:hover img{ position: absolute; left: 30px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); }
解析:
使用Transitions功能实现动画的缺点是只能指定属性的开始值与终点值,然后在这两个属性之间实现平滑过渡,不能实现更为复杂的动画效果;
但使用Animation功能实现动画效果,它允许通过关键帧的指定来在页面上产生复杂的动画效果。
0 0
- css3
- css3
- css3
- css3
- css3
- css3
- CSS3
- CSS3
- css3
- CSS3
- css3
- css3
- CSS3
- css3
- css3
- css3
- css3
- css3
- Android Studio集成极光推送
- 应用机器学习(三):朴素贝叶斯分类器
- Batch Normalization--全连接神经网络和卷积神经网络实战
- 深入理解windows内部原理系列--笔记二
- scp使用
- css3
- 最小生成树问题(prim算法)POJ-1258 Agri-Net
- 阿里云ESC搭建javaWeb环境
- 面试题24:二叉搜索树的后序遍历序列
- 打印输入的单词长度和各个字符出现频数的直方图(水平方向和垂直方向)
- 移动端身份证识别app如何
- Linux三个特殊权限setuid,setgid,stick bit
- QT, THE BETTER ANDROID NDK:Android Studio调用Qt编写的so库
- Linux下OpenCV2.3.0编译