效果一:360°旋转 修改rotate(旋转度数)
01* {
02transition:All 0.4s ease-in-out
03-webkit-transition:All 0.4s ease-in-out
04-moz-transition:All 0.4s ease-in-out
05-o-transition:All 0.4s ease-in-out
06}
07*:hover {
08transform:rotate(360deg)
09-webkit-transform:rotate(360deg)
10-moz-transform:rotate(360deg)
11-o-transform:rotate(360deg)
12-ms-transform:rotate(360deg)
13}
效果二:放大 修改scale(放大的值)
01* {
02transition:All 0.4s ease-in-out
03-webkit-transition:All 0.4s ease-in-out
04-moz-transition:All 0.4s ease-in-out
05-o-transition:All 0.4s ease-in-out
06}
07*:hover {
08transform:scale(1.2)
09-webkit-transform:scale(1.2)
10-moz-transform:scale(1.2)
11-o-transform:scale(1.2)
12-ms-transform:scale(1.2)
13}
效果三:旋转放大 修改rotate(旋转度数) scale(放大值)
01* {
02transition:All 0.4s ease-in-out
03-webkit-transition:All 0.4s ease-in-out
04-moz-transition:All 0.4s ease-in-out
05-o-transition:All 0.4s ease-in-out
06}
07*:hover {
08transform:rotate(360deg) scale(1.2)
09-webkit-transform:rotate(360deg) scale(1.2)
10-moz-transform:rotate(360deg) scale(1.2)
11-o-transform:rotate(360deg) scale(1.2)
12-ms-transform:rotate(360deg) scale(1.2)
13}
效果四:上下左右移动 修改translate(x轴,y轴)
01* {
02transition:All 0.4s ease-in-out
03-webkit-transition:All 0.4s ease-in-out
04-moz-transition:All 0.4s ease-in-out
05-o-transition:All 0.4s ease-in-out
06}
07*:hover {
08transform:translate(0,-10px)
09-webkit-transform:translate(0,-10px)
10-moz-transform:translate(0,-10px)
11-o-transform:translate(0,-10px)
12-ms-transform:translate(0,-10px)
13}
DIV+CSS优点如下:
1、能够使代码精简,使用div+css布局使代码很是精简,css文件可以在网站的任意一个页面进行调用,避免了使用table表格修改部分页面。
2、提升了网页访问速度,div+css布局较传统的Table布局比较,减少了许多代码,其浏览访问速度自然得以提升,从而提升了网站的用户体验度。
3、有利于优化。采用div-css布局的网站对于搜索引擎很是友好,简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
4、浏览器兼容性 。DIV+CSS更容易出现多种浏览器不兼容的问题,主要原因是不同的浏览器对web标准默认值不同。
5、需要注意的是,网页不喜欢一个页面有太多的css代码,否则同样会影响蜘蛛的爬行,影响搜索引擎的收录,所以采用外部调用的方式调用CSS是非常不错的方法。
6、若非必须太多花哨的网站,采用CSS布局,同样可以到达所想要的效果。如网站导航中的文字颜色变化、css下拉菜单等。
扩展资料:
DIV+CSS对SEO网站优化能起的作用
1、精简的代码,使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。代码精简提高了百度蜘蛛的爬行效率以及高效性,能在最短的时间内爬完整个页面,同时这样对收录质量也有一定好处。
2、提高访问速度、增加用户体验性
使得加载速度得到很大的提高,那么用户点击页面的等待时间就越少,用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢,进而提高网站排名。
3、div+css结构清晰,很容易被搜索引擎搜索到,本来就是适合优化seo,降低网页的大小,让网页体积变得更小。
4、要注意的是:div+css结构清晰、精简,不意味着可以全部用div+css结构,比如通篇HTML标签全DIV的,貌似除了<head>之上及<body>之上及之外,其它全是<div>,就如同整个HTML是一万个毫不相干的内容拼装起来,或者通篇是<div><ul><li>结构的,就如同这个页面所有元素全是列表。
参考资料来源:百度百科-div css