css3的calc函数

发布者: superzhang | 发布时间:2017-11-25

css3的calc函数

calc函数是css3新增的属性，用于动态计算长度值。过去一些需要用js来计算的长度值，现在可以用它来设置。

calc函数有以下特点：

支持四则运算分别是 "+"，"-"，"*"，"/"

使用标准的数学运算优先级规则

任何长度值都可以使用它来进行计算

运算符前后需要保留一个空格

兼容性也不错，就是移动端支持比较少：

css3的calc函数

浏览器兼容性

举个例子，工作经常遇到的需要侧边固定宽度，内容区自适应的页面布局。如下：

想读更多 ->

css3写的小鸟

发布者: superzhang | 发布时间:2017-11-25

css3 写小鸟的核心原理是用到了css3 的自定义动画属性keyframes ，它很灵活，允许你创建更多不一样的动画效果。写法

@keyframes myName

{

0% {xxxx}

10% {xxxx}

20% {xxxx}

30% {xxxx}

}

小鸟的代码片段是这样的，通过调用不同的背景图片

@keyframes myFrist

{

0% {background:url(images/bird1.png);background-size: 100% 100%}

12.5% {background:url(images/bird2.png);background-size: 100% 100%}

25% {background:url(images/bird3.png);background-size: 100% 100%}

37.5% {background:url(images/bird4.png);background-size: 100% 100%}

50% {background:url(images/bird5.png);background-size: 1

想读更多 ->

CSS3 animation-duration 属性

发布者: superzhang | 发布时间:2017-11-25

实例

设置动画在两秒内完成:

animation-duration:2s;-webkit-animation-duration:2s; /* Safari 和 Chrome */

CSS3 animation-duration 属性

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性animation-duration43.03.0 -webkit-10.016.05.0 -moz-9.04.0 -webkit-30.015.0 -webkit-12.0 -o-

CSS3 animation-duration 属性

标签定义及使用说明<

想读更多 ->

CSS3导航栏展开动画效果

发布者: superzhang | 发布时间:2017-11-25

CSS3导航栏展开动画效果,实现不一样的手风琴菜单展开收缩动画效果！效果如下：

CSS3导航栏展开动画效果

实现代码

html：

CSS3导航栏展开动画效果

css：

CSS3导航栏展开动画效果

javascript：

CSS3导航栏展开动画效</p><p><a href='internet/internet_229101.html'> 想读更多 -></a></p></div><div class='art bs'><h1><a href='internet/internet_229100.html'>CSS3学习总结</a></h1><span class='art_des'>发布者: superzhang | 发布时间:2017-11-25</span><p><p>CSS3学习总结</p><p>CSS的学习</p><p>day01</p><p>CSS概述</p><p>CSS作用:层叠样式表（Cascading Style Sheets）,美化页面,布局页面,修饰元素的外观,修改元素的位置.</p><p>CSS基本机构:行内样式,内嵌样式,外联样式(link href=