# 观后感

　　好久没写博客了，不管是路过的还是我的少得可怜坚挺的fans，我回来了。

　　之前一段时间忙于工作，忙于自己的一个css3小网站，网盘里积累了很多想写的东西，但是了解得不深入，也就没什么好写。最近几天一直在关注w3cpluc列出的css3工具，里面列出了很多出色的css3属性生成方面的网站，和自己的小网站很类似，本想着借鉴别人的网站去修改自己的网站，在这过程中关注到了一个css3动画网站，就开始用firebug搜刮其中的精髓。

　　以下是搜罗的一些觉得有技术含量的东西，和那些刨根问底的大神自然没法比，凑活着看看呗。

　　1 将单选框做成两个按钮的形状

　　　　图中所看到的是两个正常按钮，用firebug 查看可以注意到是两个label标签，用css3（box-shadow:0.05em 0.05em 0.4em 0.1em rgba(0, 0, 0, 0.8) inset）渲染。如果光是这样，将会有两个裸露的<input type="radio">,他是用clip:rect(0px, 0px, 0px, 0px) 进行隐藏。

　　　　clip属性详解

　　2 css3 animation

　　　　惭愧，今天第一次写用到animation。

　　　　先说说一点个人的看法，animation 执行效率高、使用方便，但是不够灵活，想要自定义丰富的页面效果还得使用js去修改DOM的属性。

　　　　想要实现css3定义的动画效果，两句话不可少，animation属性定义动画周期、渐变效果、延迟、循环次数，动画的前进后退。另外一个是keyFrame（关键帧），就是定义动画过程中几个关键位置的状态，写作@keyFrames{},花括号中,0%表示开始位置，100%表示结束位置状态，其他的自己YY。

　　　　animation关键帧是不会显示到页面源码上面的，要是js能设置一个选项，让开发者决定是否显示源码，将会是一个不错的主意。

　　3 before,after, counter实现内容的显示.

　　　　稍加观察就可以发现，动画块中的那些序号和小标题都没有出现在HTML中。而是通过css实现的，我觉得这样的好处显而易见，降低维护成本以及减少代码量。想要使用其中的计数器（counter），有三个步骤，重置，修改，获取。

　　　　　　div{counter-reset : 计数器}//重置
　　　　a{counter-increment: 计数器}//i++; 修改，在这里，a标签出现一次，计数器就会累加。
　　 a:after{content :counter(计数器,decimal...)}//获取,写入。

　　4 合适的时间触发动画效果

　　　一看到这个页面的时候，被这么多华丽丽的效果怔住了，心想要是现这么多效果，得多少js，而且动画全开，网页一点都不卡，js执行效率处理得肯定很好，但是全都是用css实现的，所以用的全都是较为底层的代码，我们要做的只是调用，执行效率高很多。

　　　　实现其中的mouseover效果，大致有两种办法，一种是鼠标移上去的时候给他添加animation属性，另外一种就是网站中出现的css控制的。

　　　　#on-hover:checked ~ div[role="main"] > a[data-property]:not(:hover):not(:target){

　　　　　　animation: 0s ease 0s normal none 1 none !important;

　　　　}

　　　　看着有点瘆人，#on-hover:checked ~div[role="main"]，我还没搞清楚，但是我推测就是只有id为on-hover的单选框被选中的时候，自定义属性role为main的div中含有data-property的a标签没有鼠标停留并且不是被选中的情况下，会有一个（不能被覆盖的,最高权重，!important）无动画效果的animation属性。

　　　　换而言之，当id为on-hover的元素被选中的时候，或者鼠标停留到a标签上的时候，或者a标签被选中的时候，都会有其独特的，有意义的animation属性（每个a标签都有要执行的动画，但是被!important覆盖掉了）。

　　5 :not(:target)

　　　　:not(条件A)，not使用来筛选元素中的，不满足条件A的元素统统抛弃。

　　　　:target作为筛选的条件有特殊的意义。当URL后面有#abc(hash)的时候，通常表示链接到当前页面的某个id为abc的元素上。当点击<a href="#abc">的时候，页面会滚动到#abc的offsetTop处，URL也会发生相应的改变，这个时候#abc就满足了:target的条件。

　　　　参考http://www.certifiedchinesetranslation.com/openaccess/CSS/target.html,在这片文章的最后我注意到这片文章是基于老外2003年的想法，让人好伤心啊...

　　虽老早听说css3的强大，但是工作中真正用到css3的地方还是不多，点到为止。没什么文采，凑活下；不足的地方，指点下；小站，关注下。8

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>css3-animation-transition-transform</title>        
        <meta name="author" content="Chan">
        <meta name="description" content="Come on baby!">
        <meta name="viewport" content="width=device-width">
        <link rel="shortcut icon" href=""><!--http://jquery.com/jquery-wp-content/themes/jquery.com/i/favicon.ico-->
        <link rel="stylesheet" href="">
        <style style="text/css">
            a{text-decoration: none;}

            /*======================*/
            #wrapper{counter-reset: counter}
            a{position:relative; float: left; height: 150px; width: 150px; counter-increment: counter; color: #FFFFFF; line-height: 150px; text-align: center; background-color:slategray; margin: 0 20px 20px;}
            a:before{content : counter(counter,decimal); font-size: 60px}
            a:after{content: attr(data-property);position: absolute; left: 0; right: 0; top: 100px; color:  red; color: #8880A2;}
            a:not(:hover):not(:target){ animation: 0s ease 0s normal none 1 none !important}
            #test1{animation: 1s ease 0s alternate none infinite background-color;background-color: slategray;}
            #test2{animation: 1s ease 0s alternate none infinite transform-1; transform: perspective(400px) rotateY(0deg);}

            @keyframes background-color{
                0% {background-color: slategray}
                100% {background-color: black}
            }

            @keyframes transform-1{
                0% {transform: perspective(400px) rotateY(0deg)}
                100% {transform: perspective(400px) translateZ(150px) rotateY(180deg);}
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <a id="test1" href="#test1" data-property = "AAA123213"></a>
            <a id="test2" href="#test2" data-property = "B213BB"></a>
        </div>
    </body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onkeydown = function(e){
        e = e? e:window.event;
        if(e.keyCode == 27){
            location.hash = '#';
        }
    }
</script>

View Code

posted @ 2013-05-30 22:07 积跬步阅读(924) 评论(0) 编辑收藏举报

刷新页面返回顶部