Board logo

标题: 响应式Web设计:使用HTML5和CSS3实践 (12) [打印本页]

作者: look_w    时间: 2019-2-18 19:10     标题: 响应式Web设计:使用HTML5和CSS3实践 (12)

第7章 CSS3过渡、变形和动画
7.1 什么是CSS3过渡以及如何使用它

    一个超链接默认设置了一个样式,当鼠标hover上去的时候可能会应用到另外一个样式,这就是一个过渡。过渡可以针对属性来过渡,比如当hover发生时候过渡。

    过渡涉及四个属性:
        transition-property 要过渡的属性名称,比如background-color或all
        transition-duration 定义过渡效果持续的时间
        transition-timing-function 定义过渡期间速度如何变化
        transition-delay 可选,定义过渡开始前的延迟事件

    单独使用各种过渡属性创建效果的语法如下:

        #content a {
            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: ease;
            transition-delay: 0s;
        }
         

    简写语法如下

    transition: all 1s ease 0s;

    也可以在不同的时间段内过渡不同的属性

        #content a {
            /* other setting */
            transition-property: border, color, text-shadow;
            transition-duration: 2s, 3s, 8s;
        }

    过渡调速函数,不太理解可以参考这里

7.2 CSS3中的2D变形

    有两种可用的CSS3变形:2D变形和3D变形。其中2D变形实现更广泛,它允许我们使用如下变形:
        scale:用来缩放大小
        translate:在屏幕内移动元素
        rotate:按照一定的角度旋转元素
        skew:按照X和Y轴对元素进行斜切
        matrix:将上述若干变形效果组合成单个声明,并允许你用像素精度来控制变形效果
    实际项目中可以使用傻瓜矩阵变形工具来完成这样的事情。
    transform-origin可以用来修改变形效果的起点。

7.3 尝试CSS3的3D形变

    CSS3的3D形变能创造非常酷的效果,但相对2D的浏览器支持性要差一些。

7.4 CSS3动画效果

如下是一个给h5加上阴影动画的例子,最开始定义一个关键帧的名字,以及在动画进行到多少的时候的效果,然后在元素h5应用。当然如果想要在特定浏览器上执行,得要给 @keyframes 和 animation 都加上私有前缀。

    @keyframes warning {
      from {
        text-shadow: 0px 0px 4px #000000;
      }
      50% {
        text-shadow: 0 0 40px #000000;
      }
      to {
        text-shadow: 0 0 4px #000000;
      }
    }
     
     
    .back h5 {
        font-size: 4em;
        color: #f2050b;
        text-align: center;
        animation: warning 1.5s infinite ease-in;
    }

动画可以采用的参数有七个可以独立设置的属性值,除了像下面这样列出来你也可以像上例那样写缩写。

    animation-name: warning;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-delay: 0s;
    animation-fill-mode: none;

CSS3过渡让效果的初始按照可定义的速度进行,形变使使得元素大小、偏移等值脱离初始,动画则定义了一个变化的过程,三者结合起来能产生非常丰富的效果。 该书示例有结合示例进行演示,在此跳过,有兴趣可以自己参考~
7.5 本章小结

本章学习了CSS3过渡、形变和动画的内容,学习这些新特性的最终目的是使用CSS3来替代JavaScript制作一些优雅降级的增强效果,从而使代码更简洁和丰富。下一章将开始学习表单中HTML5和CSS3的应用。




欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0