现在开个css3特效分类,目的很简单,掌握它的常用属性与技巧。
今天是2017-3-30 明年今天在回首,希望我已经成为一名优良的web前端工程师。
transition:属性 国度时间 时间函数 延迟时间
过渡效果需要IE10以上才能很好支持,不过现在css3基本上都流行使用在移动端,就没有IE什么事情了。过渡效果能够很好的平滑过渡运动,常见使用场景,鼠标经过:hover 物体@keyframes规则配合使用,当然也有渐变透明色,显示幻灯片效果,配合transform使用
鼠标经过改变width才有平滑过渡效果属性值为width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3风车转动</title>
<style type="text/css">
/*鼠标经过并且width值发生改变时候采用平滑过渡效果*/
.transition{width: 100px;height: 100px;background: red;-webkit-transition:width 2s ease-out;-moz-transition: width 2s ease-out;-o-transition:width 2s ease-out;transition:width 2s ease-out; }
.transition:hover{width: 500px;}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3风车转动</title>
<style type="text/css">
/*鼠标经过并且width值发生改变时候采用平滑过渡效果*/
.transition{width: 100px;height: 100px;background: red;-webkit-transition:All 2s ease-out;-moz-transition: All 2s ease-out;-o-transition:All 2s ease-out;transition:All 2s ease-out; }
.transition:hover{background:#000;}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>
配合transform的rotateY转动属性,产生3d转动180度,颜色过渡,透明度过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3风车转动</title>
<style type="text/css">
/*鼠标经过并且width值发生改变时候采用平滑过渡效果*/
.transition{width: 100px;height: 100px;background: red;-webkit-transition:All 2s ease-out;-moz-transition: All 2s ease-out;-o-transition:All 2s ease-out;transition:All 2s ease-out;
}
.transition:hover{background:#000;-webkit-transform: rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);opacity: 0.3;}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3风车转动</title>
<style type="text/css">
/*鼠标经过并且width值发生改变时候采用平滑过渡效果*/
.transition{width: 100px;height: 100px;background: red;-webkit-transition:All 2s ease-out;-moz-transition: All 2s ease-out;-o-transition:All 2s ease-out;transition:All 2s ease-out;
}
.transition:hover{background:#000;-webkit-transform: rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);opacity: 0.3;
animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite;-o-animation:mymove 5s infinite; position: relative;width: 500px;}
/*@keyframes规则*/
@keyframes mymove{
from{
top:0;
}
to{
top:200px;
}
}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>