CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子,可能只是几行代码,但是添加到Web应用程序中,却会让它增色不少。
如下是我们将在本教程中构建的代码
这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术
点击:加入
项目设置
在这个项目中,我们将把过渡效果应用到一个class为box的元素上面。这个box元素内部是垂直和水平居中的文字内容。HTML结构相当简单:
<div class='box'>
<p>TEXT</p>
</div>
CSS代码也一样简单。我们想要使用无衬线字体,并确保div中的段落文本是白色的,可以通过如下代码来实现:
body {
color: white;
font-family: Helvetica, Sans-Serif;
}
</