首页 > 开发 > CSS > 正文

360摇滚首页这种跟随音乐网页形状动态晃动是怎么做的?

2017-09-12 09:40:08  来源: 网友分享

网址 http://hao.360.cn,点击左上角的“男人节 High起来”logo后,整个页面都随着音乐晃动了,求插件代码或思路。

解决方案

Marker 说的是对的,CSS3 transform + JS 控制页面 class。比如 Pragmatic.ly 首页转动的风车,在默认情况下相关转动的 CSS 是

.spinning-wing {  -webkit-transition-property: -webkit-transform;  -webkit-transition-duration: 1s;  -moz-transition-property: -moz-transform;  -moz-transition-duration: 1s;  -webkit-animation: rotate 4s linear infinite;  -moz-animation: rotate 4s linear infinite;  -o-animation: rotate 4s linear infinite;  animation: rotate 4s linear infinite;}

而当鼠标悬停上去的时候 CSS 变化为

.spinning-wing:hover {  -webkit-transition-property: -webkit-transform;  -webkit-transition-duration: 1s;  -moz-transition-property: -moz-transform;  -moz-transition-duration: 1s;  -webkit-animation: rotate2 .3s linear infinite;  -moz-animation: rotate2 .3s linear infinite;  -o-animation: rotate2 .3s linear infinite;  animation: rotate2 .3s linear infinite;}

而你需要的点击 logo 后整个页面动也就是类似下面的

$('#logo').click(function() {  $('body').toggleClass('animate');});