<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>shi</title>
<style type="text/css" media="screen">
div {
width: 400px;
height: 150px;
border: 1px solid #666;
line-height: 150px;
text-align: center;
font-weight: 900;
font-size: 30px;
color: #fff;
margin: 10px auto;
}
.toTop {
background-image:linear-gradient(to top, orange, green);
}
.toTop-deg {
background-image:linear-gradient(0deg, orange, green);
}
.toTop-deg2 {
background-image:linear-gradient(360deg, orange, green);
}
.toTop-deg3 {
background-image:linear-gradient(-360deg, orange, green);
}
</style>
</head>
<body>
<div class="toTop">使用关键词：top</div>
<div class="toTop-deg">使用角度：0 deg</div>
<div class="toTop-deg2">使用角度：360deg</div>
<div class="toTop-deg3">使用角度：-360deg</div>
</body>
</html>
变形
结合CSS3的transition和动画的keyframe产生一些动画效果
CSS3变形中具有X/Y可用的函数：translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()
CSS3 2D变形函数包括：translate()、scale()、rolate()和skew()。
CSS3 3D变形函数包括：rotateX()、rotateY()、rotate3D()、translateZ()、translate3d()、scaleZ()和scale3d()。
transform属性指一组转换函数，transform-orgin属性制定元素的中心点在哪，新增加了第三个数transform-orign-z，控制元素三维空间中心点。transform-style的值设置为preserve-3d，建立一个3D渲染环境。
过渡
如鼠标悬浮时，颜色在一定的时间内，从一个颜色过渡到另一个颜色，给用户更好、更细腻的体验。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>shi</title>
<style type="text/css" media="screen">
.transition {
background: #8ec63f;
width: 100px;
height: 100px;
border-radius: .5em;
transition-property: background height, width;
transition-duration: 1s,1s,1s;
transition-timing-function: linear,linear,linear;
transition-delay: 1s,0s,1s;
}
.transition:hover {
background: #f7941d;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>
动画
CSS3的animation属性通过关键帧控制动画的每一步，实现更为复杂的动画效果。通过改变元素的属性值来实现动画效果的。
关键帧
@keyframes具有自己的语法规则。
版权声明：本文为QFire原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。