css3过渡 css和css3学哪个
大家好,今天小编来为大家解答以下的问题，关于css3过渡，css和css3学哪个这个很多人还不知道，现在让我们一起来看看吧！
css怎样设置元素过渡效果呢
css3的过渡效果用得好的话可以用来制作动画特效，下面咪咪我就来给大家分享一下css3怎样设置元素的过渡效果。
首先，先设置一个div，待会我们使用css3给这个div设置过渡效果。
然后给div设置宽高和背景，这里我就设置成200像素，深粉色。
接着开始设置transition属性，通过这个属性就可以给元素添加过渡效果。
如图所示，第一个参数表示的是要过渡的属性值，第二个参数表示的是过渡时间，这里我就设置背景过渡。
接着再设置鼠标经过div元素时背景颜色为暗蓝色。
之后，预览div背景过渡效果，当鼠标放在div元素上面就会由深粉色过渡到暗蓝色，过渡时间是五秒钟（这里因为是静态图片，待会我会贴出源码）。
如果要设置多个属性过渡可以把它们用逗号隔开，比如要同时设置背景和宽度过渡，则可以这样写。
接着再给div:hover设置宽度为400像素。
这样，当我们鼠标经过div元素时，背景会过渡，同时div元素的宽度也会由200像素过渡到400像素。
为了更好参考，我就贴出源代码，直接保存为HTML文件就可以查看效果了哦。!DOCTYPE html html head meta charset="utf-8"/ title搜狗指南/title style type="text/css" div{a width: 200px; height: 200px; background: deeppink;s transition: background 5s,width 5s;} div:hover{ background: darkblue; width: 400px;}/style/head body div/div/body/html
css3 transition怎么用
css3的transition：允许css属性值在一定的时间区内平滑的过渡。
transition-property：变换延续的时间
transition-duration：在延续时间段
transition-timing-function：变换速度变化
transition-delay：变化延迟时间
a：{all 0.5s ease-in 1s；}这里的四个值分别对应上面的四个属性。
*{margin:0;padding:0;}
ul{width:300px;}
ul:after{clear:both;display:block;content:".";height:0;visibility:hidden;font-size:0;line-height:0;}
ulli{list-style:none;font-size:12px;color:#069;border:1pxsolid#CBCBCB;background-color:#E5E5E5;border-radius:3px;box-shadow:1px1px0#96969D;width:280px;height:30px;margin-bottom:20px;}
lia{position:relative;width:230px;height:30px;padding-left:25px;display:block;}
liaimg{position:absolute;top:6px;left:5px;border:0none;display:block;}
liaspan,liastrong{position:absolute;top:0;left:25px;opacity:1;
-webkit-transition:all800mslinear;
-moz-transition:all800mslinear;
-o-transition:all800mslinear;line-height:30px;width:240px;}
liastrong{top:30px;opacity:0;}
lia:hover{color:#FF6500;_background-color:#E5E5E5;font-weight:bolder;}
lia:hoverstrong{top:0;opacity:1;}
lia:hoverspan{top:-30px;opacity:0;}
<div>
<ul>
<li><arel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><span>百度</span><strong>看看效果如何</strong></a></li>
<li><arel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><span>百度知道</span><strong>看看效果如何</strong></a></li>
<li><arel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><span>百度文库</span><strong>看看效果如何</strong></a></li>
</ul>
</div>
原理就是利用定位的相对a标签的距离的不同，结合transition的平滑过渡，和显示隐藏，实现动态的文字替换的过程。
css3的常用变形方法有哪些写出核心代码
css3中的变形
Chrome和safai需前缀加-webkit-，Foxfire需加前缀-moz-
1,旋转 rotate()
div{
width: 300px;
height: 300px;
transform:rotate(20deg);
}
2,扭曲 skew()
div{
width: 300px;
height: 300px;
transform:skew(45deg,-10deg);
}
3,缩放 scale()
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
也可以只缩放 x轴，或只缩放y轴。
div{
width: 200px;
height: 200px;
background: orange;
}
.wrapper div:hover{
opacity:.5;
transform: scale(0.8);
}
4,位移 translate()
translate()函数可以将元素向指定的方向移动，类似于position中的relative。
或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，
而不影响在X、Y轴上的任何Web组件。
5，原点 transform-origin
CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素
原点不在元素的中心位置，以达到需要的原点位置。
div{
transform: skew(45deg);
transform-origin:top;
}
6,过渡
div{
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
-webkit-transition-property: all;
transition-property: all;//指定过渡或动态模拟的css属性（all是指所有）
-webkit-transition-duration:5s;
transition-duration:5s;//指定完成过渡的时间
-webkit-transition-timing-function: linear;
transition-timing-function: linear;//指定过渡的函数 linear/ease/ease-in/ease-out/ease-in-out/cubicbezier(n,n,n,n) n为0-1
-webkit-transition-delay:.18s;
transition-delay:.18s;//指定开始出现的延迟时间
}
div:hover{
width: 400px;
height:400px;
}
7，Keyframes被称为关键帧，css3中以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{...}”
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
div{
width: 300px;
height: 200px;
}
div:hover{
animation: changecolor 5s ease-out.2s;
}
等价于
div:hover{
animation-name:changecolor;
animation-duration:5s;
animation-timing-function:ease-out;
animation-delay:1;
animation-iteration-count:infinite;//动画播放次数整数。
animation-play-state:paused;//主要用来控制元素动画的播放状态。
animation-direction:alternate;//动画方向，normal每次循环向前，alternate偶次向前，奇数相反。
animation-fill-mode: both;//设置动画时间外属性none、forwards、backwords和both
}
好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！