SS3过渡动画函数总结,总结了动画函数属性transition-timing-function里面的值的用法,方便大家以后使用该属性时就知道有这么一回事!
代码如下:
html结构:
css样式:
用技巧会让人变的越来越懒,没错,我就是想让你变懒。
下面是我收集的CSS高级技巧,希望你懒出境界。
这段代码会让你的彩色照片显示为黑白照片,是不是很酷?
img{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }
效果图:
下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果:
body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; }
效果图:
你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:
body {
line-height: 1;
}
这样文本元素就可以很容易地从 body 继承。
为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。
#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */ }
效果图:
突然发现红到蓝也太丑了点,换一个好看一点的,红到绿:
h1 { text-shadow: 5px 5px 5px #FF0000; }
div { width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } div:hover { width:300px; }
效果如图:
今天的代码写得我老阔疼,虽然CSS还有很多很多高级用法,但精力有限,因此今天的分享就到这里啦,需要详细代码可留言或私信我哦~
css3过渡 转换
css3过渡(transition)允许我们在限定的时间内从一个属性值转变到另一个属性值.
●transition-property:指定要转换的属性
●transition-duration:指定转换发生的持续时间
●transition-timing-function:指定转换的速度在其持续时间内如何变化
●transition-delay:指定过渡效果的延迟(以秒为单位)
在下面的例子中,我们将transition属性设置为持续时间为5s的转换效果.并设置ease-in定时函数,该函数有淡入的效果.
css代码:
transition:transform 5s ease-in;
过渡效果可以应用于各种css属性,包括:背景颜色,宽度,高度,不透明度等等.
在下面的例子中,div元素的宽度和高度都是100px,并有一个红色的背景.我么为width属性指定一个过渡效果,持续时间为3s.
css代码:
div.transition{ width:100px; height:100px;background:red;color:white;transition:width 3s; }
div.transition:hover{ width:250px;}
效果如下:
如果你将光标悬停在div元素上,则会从左向右移动.
当光标被移出div元素时,它将逐渐变回原来的样式.
transition-timing-function属性指定过渡效果的速度曲线.
它可以有以下值:
ease:动画开始缓慢,然后加速(默认值)
ease-in:缓慢开始,然后加速,突然停止.
ease-out:快速启动,但减速停止.
ease-in-out:类似于缓解,但更加微妙的加速和减速.
linear:匀速转换
cubic-bezier()函数,它允许你在cubic-bezier(立方体-贝塞尔)函数中定义你自己的值.取值范围为0~1之间.
css代码:
transition-timing-function:cubic-bezier(0,0,1,1);
二 css3 transform:rotate()
css3中transform(转换)允许你翻转,旋转,缩放和倾斜元素.
transform(转换)是一种让元素更改形状,大小和位置的效果
css3支持2d和3d转换.
设置15deg的角度旋转(顺时针方向旋转),css代码如下:
transform:totate(15deg);
正值,顺时针旋转;负值,逆时针旋转.
三 css3 transform-origin,translate(),skew()
transition-origin(原点)属性允许你更改要转换元素的位置.该属性的默认值是50% 50%,对应于元素的中间.
在下面的例子中,我们将transform-origin属性和transform-ratate一起使用.x轴(水平)的原点从左侧设定为30%.
y轴(垂直)的原点从上方设定为80%.
css代码:
div.empty-div{position:relative;height:100px;width:100px;margin:30px;padding:10px;border:2px solid black;}
div.green-div{ padding:50px; position:absolute;background-color:LightGreen;border:2px solid red;transform:rotate(15deg);transform-origin:30% 80%;}
效果如下:
0 0 与左上相同,100% 100%与右下相同.
transform-origin属性必须与transform属性一起使用.
translate()方法从当前位置移动一个元素(根据给定的x轴和y轴的参数).正值会将元素
向下推到其默认位置的右侧.而负值则会将元素向上并拖至其默认位置的左侧.
css代码:
transform:translate(120px,60px);
skew()通过给元素设置x轴和y轴的倾斜角度值来实现倾斜.
以下例子,沿着x轴将<div>元素倾斜45度
css代码:
transform:skew(45deg);
-webkit-transform:skew(45deg);
如果没有指定第二个参数,则它的默认值为零.
四 css3 scale()函数和多重变换
scale()方法根据已设定的高度和宽度参数来增加或减少元素的大小.1代表原始大小,2代表原始尺寸的两倍,以此类推.
css代码:
transform:scale(0.7 0.7);
如果只传递一个参数,则默认宽度与高度都使用该参数.
一次可以使用多个转换.比如同时旋转和缩放元素的大小.对元素应用多个变换,只需要用空格隔开它们.
css代码:
transform:rotate(35deg) translate(120px);
五 css3关键帧与动画
动画让一个元素从一种风格变为另一种风格.
你可以根据需要更改任意数量的css属性.
关键帧将保存元素在特定时间的样式
@keyframes规则
当你在@keyframes规则中指定css样式时,动画将在某些时间从当前样式逐渐变为新样式.
要使动画起作用,必须将动画绑定到元素.
以下例子,将更改元素的背景颜色三次:动画完成50%,完成70%,动画完成100%时.
@keyframes animation-name{ 0% {background-color:red;} 50% {background-color:yellow;} 70% {background-color:green;}
100% {background-color:green;} }
animation-name是为动画指定的名字,你可以设置成任意的名字.
作为百分比的替代方法,你可以使用from和to关键字分别代替0%起始点,100%结束点.
要使动画起作用,必须将动画绑定到元素.
在下面的例子中,动画持续一秒钟,并将红色div的背景颜色更改为绿色和蓝色
div.animation{ width:100px;height:100px;background-color:red;animation-name:能否;animation-duration:1s;}
@keyframes 能否{ 0% {background-color:red;} 50%{ background-color:green;} 100%{background-color:blue;} }
效果如下:
背景颜色将在1s内自动变化.
animation-name:指定动画的名字.
animation-duration:指定所选动画的持续时间.
如果为指定animation-duration属性,则动画将不起作用.因为默认值是0.
*请认真填写需求信息,我们会在24小时内与您取得联系。