1.背景实现格格背景
网页设计里头，背景挺关键的，能给页面增加层次感和美感！用css3的那个background属性，咱们能玩出好多种炫酷背景效果，比如说格子背景。就是设定下背景条纹的宽度、颜色、大小什么的，就搞定了。html里，也能用background特性给元素设定背景样式，页面立马显得更有生气和趣味性~
弄个格子背景，你用background-size就能控制每个格子的大小！比如咱们设成2.5em*2.5em，再给它添上横竖各三像素的条纹，就有了小格子的感觉咯。这么一搞，网页上看起来就像一个个方块似的，多了几分有趣的视觉元素。
搞定小格子样式之后，你还能靠background-repeat来让它重复，把整个元素填满。这样做页面看起来更有趣了，也吸引人，激发用户眼球去看里面东西。用css 3 的 background 属性，我们能做出奇奇怪怪的背景效果，让网页设计更有创意！
2.@-webkit-keyframes 实现动画
除了静态的背景外，动起来也很重要！用CSS3里的@keyframes调色盘，咱们就能打造各种炫酷动画。特别是@-webkit-keyframes在手机浏览器上特给力。具体来说，就是画个关键帧，设定下变化的时间段，元素们的大小、位置、颜色啥的就会跟着变了，整个页面看起来超活泼！
在做动画时就是，给它起名（像旋转叫spin）然后想两个关键点、两个样子。比如做个旋转，先把度数设置成0，然后360 。别忘了给transform加上moveX 和 moveY 的值，这样你做出来的元素就能在 x and y 轴上转一圈了。接下来，用animation这个属性把我们做好的动画套在想要动起来的元素身上，设置好时间，快慢啥的，还有循环多少次都行。
html
{
background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);
background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
height: 100%;
}
.stage
{
-webkit-perspective: 1000px;
width: 20em;
height: 20em;
left: 50%;
top: 50%;
margin-left: -10em;
margin-top: -10em;
position: absolute;
}
.cube
{
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-20deg) rotateY(-20deg);
}
.cube *
{
background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px),
-webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
-webkit-background-size: 2.5em 2.5em;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(54, 226, 248, 0.5);
-webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);
}
.font
{
-webkit-transform: translateZ(10em);
}
.back
{
-webkit-transform: rotateX(180deg) translateZ(10em);
}
.left
{
-webkit-transform: rotateY(-90deg) translateZ(10em);
}
.right
{
-webkit-transform: rotateY(90deg) translateZ(10em);
}
.top
{
-webkit-transform: rotateX(90deg) translateZ(10em);
}
.bottom
{
-webkit-transform: rotateX(-90deg) translateZ(10em);
}
利用@-webkit-keyframe规则让你的页面元素动起来！这不只是为了让用户更好地理解内容，也是为了增加网页的活泼氛围，搞出更多的互动环节，让人爱不释手。别小看了这个小小的变化，它能让你的网页变得酷炫又实用，让你的用户越用越上瘾！
3.定制细致参数
大家知道吗？我们在调节背景格子的时候，不仅可以控制基本属性！比如，我们想要设计出最美小格子背景的话，就可以调整它的条纹宽度呀、色彩搭配呀、大小比率等等。想让画面动起来？那就得琢磨着调整旋转角度、速度curve、重复几次之类的参数了。
对于那些小方块儿背景，变化下参数就能换个风格和感觉出来。比如，把条纹加宽了，看着就更有质感了；换个色彩搭配，整个画面的色彩感受也不一样了；再就是调调整小方块们的大小比例，它们之间的间距也跟着变。说起旋转动画，只要调好角度和速度曲线，就能轻松达到你要的效果
background: -webkit-linear-gradient(
left,
rgba(54, 226, 248, 0.5) 0px,
rgba(54, 226, 248, 0.5) 3px,
rgba(0, 0, 0, 0) 0px),
-webkit-linear-gradient(
top,
rgba(54, 226, 248, 0.5) 0px,
rgba(54, 226, 248, 0.5) 3px,
rgba(0, 0, 0, 0) 0px);
-webkit-background-size: 2.5em 2.5em;
搞懂细致的CSS3参数配置，绝对是你设计页面时最棒的里程碑！只要把数值调好，就能让你的页面样式精益求精，既能满足顾客的需求，又能提高他们的使用体验，更能让你的作品在视觉效果上给人留下深刻印象。
4.创意应用与个性定制
除了基本功能，你还能玩出花样儿来！比如把格子搞成有旋转渐变的样子，弄点其它酷炫特效，让它更有个性；再比如按照你喜欢的主题换个颜色风格啥的；还有就是用JavaScript脚本来实现一些互动小功能。
别小看了创新和个性定制在网页设计中的用处，这可是凸显个人特色跟品位的利器！加点特效或搞个独家定制的样式，就能让你的页面在一大堆网站里显得格外醒目，给人留下深刻印象。而且这还能改善用户的使用感觉，提高品牌影响力！
5. w3cSchool参考与学习
学CSS3的话，w3cSchool真的很赞！这里有最新最全的教材，权威准确，能助咱们更高效地学到新技巧提升编程技能。
W3Cchool超全，全面展示了css3的各项属性和操作方式。系统学学就能深入了解如何运用这些知识去做网页设计！另外还有在线编辑器和Codes运行功能，随时随地改改你的代码！
简而言之，w3cschool绝对是值得信任和高效学习CSS3技术首选的地方！对程序员来说，再了解不过，值得尝试。
6.网站样式差异分析
我们做项目的时候，经常遇到原设计和最后效果不太对劲儿。一般就是因为浏览器兼容问题、CSS写得不对头，还有些别的莫名其妙的原因。
@-webkit-keyframes spin
{
from
{
-webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
transform: translateZ(-10em) rotateX(0) rotateY(0deg);
}
to
{
-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
}
}
之前的网站每个面都有个很炫酷的径向渐变效果，我们也想把这个加上去了。毕竟，谁不想做得跟原设计团队的想法更接近？
同时开发项目时，及时发现和修正问题也特别关键。得对项目细节有了解，持续优化程序的思维方式和布局，这样才能做出令大家满意的高品质产品来。
7.总结与展望
这篇文章就是为你解答怎么用CSS3做格子背景和利用@-webkit-keyframes做简单的旋转动效。从最基本的说明到实例代码，一切都在这儿，方便你学习并运用！
.cube
{
-webkit-animation: 6s spin linear infinite;
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-20deg) rotateY(-20deg);
}
以后前端技术会越来越牛，CSS3的功能也会越来越多。所以大家要多留意新动态，学点东西提高自己。
评论0