CSS3技能动画栏效果演示

  • CSS3动画效果演示,单纯的CSS3动画效果,相信在自己的网站介绍里添加一组这样的效果会很漂亮,颜色和字体按个人喜好设置。。注意请使用支持CSS3的浏览器查看效果。Firefox,Safari和Chrome。

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
  2. <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
  3. <head>
  4. <title>CSS3技能动画栏</title>
  5. <style>
  6. body {
  7.     margin: 0;
  8.     padding: 0;
  9.     font-family: \'Nobile\', Arial, sans-serif;
  10.     font-size: 12px;
  11.     color: #666;
  12.     background: url(/jscss/demoimg/201205/pattern.png) repeat;
  13. }
  14. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,
  15. td{
  16.     margin: 0;
  17.     padding: 0;
  18. }
  19. table{
  20.     border-collapse: collapse;
  21.     border-spacing: 0;
  22. }
  23. img{
  24.     border-style:none;
  25.     vertical-align:top;
  26. }
  27. a { color: #FF6600;}
  28. a:hover { text-decoration: none;}
  29. h1.title_name {
  30.     font-family: \"Trebuchet MS\",\"Myriad Pro\",Arial,sans-serif;
  31.     font-weight: normal;
  32.     font-size: 4em;
  33.     color: #333;
  34.     margin: 0;
  35.     padding: 20px 0 0 0;
  36.     text-align: center;
  37.     line-height: 1em;
  38. }
  39. h1.title_name span {
  40.     font-family: normal Georgia,\'Times New Roman\',Times,serif;
  41.     color: #FF6600;
  42.     font-size: 0.9em;
  43. }
  44. h1.title_name small {
  45.     display: block;
  46.     font-family: normal Verdana,Arial,Helvetica,sans-serif;
  47.     font-size: 0.3em;
  48.     font-weight: bold;
  49.     letter-spacing: 0.5em;
  50.     text-transform: uppercase;
  51.     color: #AAA;
  52.     text-shadow: none;
  53. }
  54. #footer {
  55.     margin: 0 auto;
  56.     color: #666;
  57.     text-align: center;
  58.     letter-spacing: 1px;
  59. }
  60. #contents {
  61.     width: 278px;     
  62.     margin: 50px auto 100px;
  63.     position: relative;
  64. }
  65. .col { width: 280px; }
  66. .col h2 { margin: 0 0 20px 0;}
  67. #skill {
  68.     list-style:none;
  69.     padding-top:30px;
  70. }
  71. #skill li {
  72.     margin-bottom:50px;
  73.     background:#222;
  74.     height:7px;
  75.     border-radius:3px;
  76.     border: 1px solid #333;
  77. }
  78. #skill li em {
  79.     position:relative;
  80.     top:-30px;
  81.     font-style: normal;
  82. }
  83. .expand {
  84.     height: 7px;
  85.     background: #FF6600;
  86.     position: absolute;
  87.     box-shadow: 0px 0px 5px 1px #666;
  88. }
  89. .html5 { width:85%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
  90. .css3 { width:80%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
  91. .jquery { width:70%; -moz-animation:jquery 2s ease-out; -webkit-animation:jquery 2s ease-out; }
  92. .photoshop { width:100%; -moz-animation:photoshop 2s ease-out; -webkit-animation:photoshop 2s ease-out; }
  93. .dreamweaver { width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
  94. @-moz-keyframes html5 { 0% { width:0px;} 100%{ width:85%;} }
  95. @-moz-keyframes css3 { 0% { width:0px;} 100%{ width:80%;} }
  96. @-moz-keyframes jquery { 0% { width:0px;} 100%{ width:70%;} }
  97. @-moz-keyframes photoshop { 0% { width:0px;} 100%{ width:100%;} }
  98. @-moz-keyframes dreamweaver { 0% { width:0px;} 100%{ width:100%;} }
  99. </style>
  100. <script type=\"text/javascript\">
  101.     var _gaq = _gaq || [];
  102.     _gaq.push([\'_setAccount\', \'UA-23292263-1\']);
  103.     _gaq.push([\'_trackPageview\']);
  104.     (function() {
  105.     var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true;
  106.     ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\';
  107.     var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s);
  108.     })();
  109.     </script>
  110.     </head>
  111. <body>
  112. <div id=\"wrapper\">

你可能感兴趣的:(CSS3技能动画栏效果演示)