大家好，又见面了，我是你们的朋友全栈君。
最近打算学习css3知识，觉得css3写出来的效果好炫好酷，之前一直想要学习来着。可能之前的决心，毅力，耐心不够，所以想要重整起来，放下浮躁的心态，一步一个脚印，踏踏实实的来学习。
首先学习的是css3 transition属性，该属性的定义为从一个属性值平滑过渡到另一个属性值。
格式为：transition: ，或
transition-property:
transition-duration:
transition-timing-function:
注意，由于各浏览器之间的兼容性差异，针对各浏览器写的css3样式都要加上前缀，如：
-webkit-: /*chrome,safari*/
-moz-: /*firebox*/
-ms: /*IE*/
-o-: /*opera*/
如下，举个例子，代码示例：
个人网站首页
.block{
width:400px;
height:400px;
background-color:blue;
-webkit-transition: background-color 3s;
}
.block:hover{
background-color:red;
}
.progress-bar{
width: 40px;
height: 40px;
background-color: blue;
}
.progress-bar:hover{
width: 960px;
}
#bar1{
-webkit-transition: width 3s ease;
}
#bar2{
-webkit-transition: width 3s linear;
}
#bar3{
-webkit-transition: width 3s ease-in;
}
#bar4{
-webkit-transition: width 3s ease-out;
}
#bar5{
-webkit-transition: width 3s ease-in-out;
}
#expermient{
-webkit-perspective:800px;
-webkit-perspective-origin:50% 50%;
-webkit-transform-style:preserve-3d;
}
#blocks{
width: 500px;
height: 500px;
background-color: blue;
margin: 0 auto;
-webkit-transform:rotateX(45deg);
}
.hw-cbg.on p{
padding:0px 0 0 30px;
-webkit-transition:padding-left 2s ease;
}
.hw-cbg p{
padding: 30px 0 0 0;
}
.animation{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@-webkit-keyframes mymove{
0% {margin-left: 0px;background-color: blue;}
50% {margin-left: 30px;}
100% {margin-left: 60px;}
}
ease
linear
ease-in
ease-out
ease-in-out
在节奏紧张的都市生活中，高效便携会让您的生活化繁为简。HUAWEI MateBook配备12英寸屏幕的
金属机身，重量仅为640g，厚度低至6.9mm。内在强大，彰显锐意与品质的交融；
轻薄时尚，是您工作生活的称心伴侣。
$(document).ready(function(){
$(‘.hw-cbg’).addClass(‘on’);
})
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/159214.html原文链接：https://javaforall.net
