css3 超出两行

CSS3是最新的CSS版本，除了基本的样式设定外，还新增了许多令设计师兴奋的新特性。其中最棒的特色是它的过度效果。 CSS3的过度效果能够创造出更加细腻、动态的页面。接下来我们就来一一介绍一些常用的CSS3效果及其代码。

1.渐变色背景

background: linear-gradient(to bottom, blue, red);
    background: radial-gradient(circle, white, black);
    

以上代码能实现从上到下或从下到上渐变的颜色背景。第一行代码是从蓝色渐变到红色，第二行代码是从中心圆开始白色渐变到黑色。

2.阴影效果

box-shadow: 5px 5px 5px grey;
    text-shadow: 5px 5px 5x grey;
    

box-shadow能实现元素阴影效果，这里的代码表示阴影向右下偏移5像素，阴影大小为5像素，阴影颜色为灰色。text-shadow同理，但是只能应用于文本。

3.转换效果

transform: translate(50px, 50px);
    transform: rotate(45deg);
    transform: scale(1.5);

transform能实现元素变形效果，translate表示元素在x轴和y轴的移动距离，rotate表示元素旋转的角度，scale表示元素的放大缩小比例。

4.动画效果

@keyframes move {
 0%{
    transform: rotate(0deg);
}
 100%{
    transform: rotate(360deg);
}
}
.element {
     animation: move 2s linear infinite;
}
    

以上代码能实现一个旋转动画，@keyframes语法可以实现元素在不同的时间点变形、移动、旋转等动画效果，.element表示要应用动画的元素，move表示动画名称，2s表示动画时长，linear表示动画速度，infinite表示动画播放次数无限。

5.多列布局

column-count: 2;
    column-gap: 20px;
    column-rule: 1px solid black;
    

column-count表示多列数量，column-gap表示列之间的间距，column-rule表示列之间的边框。

以上是CSS3常用特性的介绍，当然还有其它很多新功能，需要我们不停学习和掌握。希望这些特效所示范的代码能让你迸发出更多的设计灵感。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！