css3-元素属性动画--transition
2016-07-28 00:00
751 查看
摘要: 看到炫酷的东西,想记下来,以后应该会用到。
参考w3c的例子,自己尝试改改上面的属性和属性值
html代码如下:
css代码如下:
除了颜色和宽高属性外,还有很多可以动画属性,请参考
http://www.css88.com/book/css/properties/transition/transition-property.htm
参考w3c的例子,自己尝试改改上面的属性和属性值
html代码如下:
<div>123456</div>
css代码如下:
div{ width: 200px; background-color: yellow; height: 200px; text-align: center; line-height: 200px; opacity: 1; font-size: 1em; transition: all 2s; -moz-transition: all 2s; /* Firefox 4 */ -webkit-transition: all 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ } div:hover{ width: 300px; background-color: blue; height: 400px; font-size: 2em; opacity: 0.5; }
除了颜色和宽高属性外,还有很多可以动画属性,请参考
http://www.css88.com/book/css/properties/transition/transition-property.htm
相关文章推荐
- css选择器记录大全
- 《Head first HTML与CSS 第二版》读书笔记 第一章 了解HTML
- 《Head first HTML与CSS 第二版》读书笔记 第二章 关于超文本
- 前端资源多个产品整站一键打包&包版本管理(四)—— js&css文件文件打包并生成哈希后缀,自动写入路径、解决资源缓存问题。
- css 超过长度省略
- css 居中总结
- css样式重置
- css中具有继承性的属性
- CSS3中各标签、id、class等名称须与相应html文件中一一对应
- JS+CSS 实现 悬浮滚动广告
- CSS 学习笔记思维导图版
- HTML+CSS基础课程(一)
- css sprite 优缺点
- 鼠标移入移出,样式修改,显示隐藏提示消息
- CSS文字垂直居中和font-family属性
- css引入外部字体
- css3选择器
- css3开发工具推荐
- 读《CSS那些事儿》笔记一
- CSS3 RGBA 属性高级用法