整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

CSS3旋转图标特效

SS3旋转图标特效，常用在企业网站展示栏中，会应用到不同的特效来展现页面的用户体验效果！

如下图：鼠标移上去后会出现图标旋转背景色变幻效果

实现代码

html结构：

css样式：

至于图标大家可以用自己平时积累的或者需求设计稿里面的，这里只是演示，不一定是跟你的需求图标一样的哈！

js代码：

节实现了：

  • 歌曲切换
  • 图标转动
  • 显示歌曲信息

下一节计划：

  • 添加音轨
  • 进度条

小demo已经写好，不用担心跳票啥的。

继续上一节的内容，我们在绘制好播放器的雏形之后，就可以考虑将一些工具性质的方法封装起来了，比如，我们多次用到dom和_center方法，不如将它们归为一类，做为一个工具包来调用。

上代码：

var utils = {
 _center : function(dom){
 dom.style.position = 'absolute';
 dom.style.top = '50%';
 dom.style.left = '50%';
 dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
 dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
 },
 
 dom : function(id){
 if(id.toString().indexOf('#') != -1) {
 id = id.replace('#','');
 }
 return document.getElementById(id);
 },
}

然后我们就可以这样调用了：

var musicDom = utils.dom('#music'); 
var musicIcon = utils.dom('#music-icon');
utils._center(musicDom); 
utils._center(musicIcon);

util是工具的意思，这样是不是清晰多了呢？

然后进行js打包：

引入：

<script type="text/javascript" src="js/util.js"></script>

用闭包的形式将util包裹起来，再挂在window对象下面，以防止命名重复。一个简单的工具包就这样做好啦！

;(function(win){
 var utils = {
 _center : function(dom){
 dom.style.position = 'absolute';
 dom.style.top = '50%';
 dom.style.left = '50%';
 dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
 dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
 },
 
 dom : function(id){
 if(id.toString().indexOf('#') != -1) {
 id = id.replace('#','');
 }
 return document.getElementById(id);
 },
 }
 
 win.utils = utils;
})(window);

同时，我们把css也单独整出去，不要放在页面里，那样会显得页面特别庞大，页面应该整洁和精简。当一个模子画出来之后，我一般都会将css整出去。

.music {
 width: 200px;
 height:300px;
 background:#333;
 border-radius: 5px;
 box-shadow: 3px -3px 1px #666;
 position: relative; /*center方法已经将position设置为absolute了，这一行不起作用*/
}
.music .screen {
 height:70%;
 width:96%;
 background: linear-gradient(#403d3d,65%,#5f5b5b);
 margin-left:2%;
 margin-top: 2%;
 position: relative;
 
}
.music .screen i {
 color:#fff;
 font-size: 88px;
}
.music .buttons i {
 color:#fff;
 font-size: 24px;
 margin-left: 28px;
 position: relative;
 top:25px;
}
.music .buttons i:hover {
 cursor: pointer;
}
.music .buttons {
 height:25%;
 width:96%;
 margin-left:2%;
 margin-top: 2%;
}


<link rel="stylesheet" type="text/css" href="css/index.css"/>

这样一来，页面就简洁多了！

接下来，让我们愉快地开发功能吧！

1. 开始和暂停按钮之间的切换

/* 获取开始按钮 */
var playDom = utils.dom('#play');

然后，给它绑定一个点击事件

playDom.onclick = function(){
 alert('play');
}

这说明绑定事件成功了。

将暂停按钮加上去，默认是隐藏的。

上一节中出现了图标编码格式冲突的问题，因此我把iconfont的引入改成了下面的方式：

<i id='pause' class="iconfont icon-zanting" style="display:none"></i>

按钮切换的逻辑代码：

/* 获取开始按钮 */
var playDom = utils.dom('#play');
/* 获取暂停按钮 */
var pauseDom = utils.dom('#pause');
playDom.onclick = function(){
 this.style.display = 'none';
 pauseDom.style.display = 'inline';
}
pauseDom.onclick = function(){
 this.style.display = 'none';
 playDom.style.display = 'inline';
}

效果（截屏效果一般，渐变色没显示，大伙先将就着看吧）：

2. 音乐播放和暂停

还记得上一节封装的musicBox对象吗？

播放和暂停的核心方法是这样的：

play : function(index){
 this.musicDom.src = this.songs[index];
 this.musicDom.play();
},
//暂停音乐
stop : function(){
 this.musicDom.pause();
},

3. 代码重构和歌曲切换的实现

今天，我对musicBox进行了一次简单的重构，代码如下：

var musicBox= {
 
 musicDom : null, //播放器对象
 songs : [], //歌曲目录，用数组来存储
 index : 0, //当前播放的歌曲索引
 
 //初始化音乐盒
 init : function(themeIndex){
 this.musicDom = document.createElement('audio');
 document.body.appendChild(this.musicDom);
 },
 
 //添加一首音乐
 add : function(src){
 this.songs.push(src);
 },
 
 //根据数组下标决定播放哪一首歌
 play : function(){
 this.musicDom.src = this.songs[this.index];
 this.musicDom.play();
 
 },
 
 //暂停音乐
 stop : function(){
 this.musicDom.pause();
 },
 
 //下一首
 next : function(){
 var len = this.songs.length;
 //判断是否是有效的索引
 if((this.index + 1) >= 0 && this.index < len){
 this.index ++;
 //如果已经是最后一首，就跳到第一首
 if(this.index == len){ 
 this.index = 0;
 }
 this.play();
 }
 },
 
 //上一首
 prev : function(){
 var len = this.songs.length;
 //判断是否是有效的索引
 if((this.index + 1) >= 0 && this.index < len){
 //如果已经是第一首，就跳到最后一首
 if(this.index == 0){
 this.index = len;
 }
 this.index --;
 this.play();
 }
 }
 
}

不同点如下：

1.添加音乐索引index，取消了play方法的参数。

2.实现了上一首和下一首的逻辑代码

3.默认音乐为第一首

顺便添加了几首音乐。

现在我们就来调用看看吧，当点击播放按钮的时候，就播放指定的歌曲。点击暂停按钮就停止播放。

4. 测试

var musicDom = utils.dom('#music'); 
var musicIcon = utils.dom('#music-icon');
utils._center(musicDom); 
utils._center(musicIcon);
musicBox.init(); //初始化
musicBox.add('mp3/火影忍者主题曲.mp3');
musicBox.add('mp3/曲婉婷 - 我的歌声里.mp3');
musicBox.add('mp3/夜空中最亮的星.mp3');
musicBox.add('mp3/班得瑞 - 雪之梦.mp3');
musicBox.add('mp3/超级好听的龙猫轻音乐.mp3');
/* 获取开始按钮 */
var playDom = utils.dom('#play');
/* 获取暂停按钮 */
var pauseDom = utils.dom('#pause');
/* 获取下一首按钮 */
var nextDom = utils.dom('#next');
/* 获取上一首按钮 */
var prevDom = utils.dom('#prev');
//播放按钮
playDom.onclick = function(){
 this.style.display = 'none';
 pauseDom.style.display = 'inline';
 //播放音乐
 musicBox.play();
}
//暂停按钮
pauseDom.onclick = function(){
 this.style.display = 'none';
 playDom.style.display = 'inline';
 musicBox.stop();
}
//下一首
nextDom.onclick = function(){
 musicBox.next();
 //当直接点击下一首的时候，同时改变播放按钮为暂停的样式
 playDom.style.display = 'none';
 pauseDom.style.display = 'inline';
}
//上一首
prevDom.onclick = function(){
 musicBox.prev();
 //当直接点击下一首的时候，同时改变播放按钮为暂停的样式
 playDom.style.display = 'none';
 pauseDom.style.display = 'inline';
}

成功运行起来了，虽然有声音，但是还看不出屏幕的变化，所以，接下来，我们做一点有趣的事情。

5. 随着歌曲的播放，让音乐图标转动起来

关于这个，就需要用到css3的一个知识点了，就是关键帧。因为不是专门开贴讲解css3，所以这边我就简单说明一下了。

像这样：

@keyframes move{
 0% {transform: rotate(0deg)}
 100% {transform: rotate(360deg)}
}
.r {
 animation: move 1s linear infinite;
}

简单来说，就是我们定义了一个名字叫r的class，动画效果采用名字叫move的关键帧。transform是转换的意思，因为英文词根trans就有从一个状态变到另一个状态的涵义，这是比较好理解的，而deg是角度的意思。

@keyframes move{
 0% {transform: rotate(0deg)}
 100% {transform: rotate(360deg)}
}

用以上这段代码，我们制作了一个关键帧动画，名字叫move，它将一个元素的位置从0度变化到360度，就是转了一圈。

.r {
 animation: move 1s linear infinite;
}
  • liner表示线性，这个属性会让拥有该class的dom元素连续地旋转。
  • infinite表示不停止、无限，不然的话转一圈就结束了。

现在，我们给音乐图标加上转动样式：

<i id='music-icon' class="iconfont icon-yinle r"></i>

在这里我去掉了该元素的定位方法，而继续采用css的方式来居中。

.music .screen i {
 color:#fff;
 font-size: 88px;
 position: absolute;
 left: 50%;
 top : 50%;
 margin-left: -40px;
 margin-top: -48px;
}

截图原因，效果看起来不咋地，其实它的转动是非常平滑的，我也不清楚为啥截图后变成了这个样子。

终于转起来了，核心的操作就是给图标添加一个css类而已。

现在，我们希望在点击开始按钮的时候，就转动图标。点击暂停就移除转动的css类。

先给util工具包扩展下面这几个方法：

/*判断dom元素是否拥有某个class类*/
hasClass : function(obj, cls) {
 return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 
 }, 
 
/*给dom元素增加某个class类*/
addClass : function(obj, cls) { 
 if (!this.hasClass(obj, cls)) obj.className += " " + cls; 
}, 
/*移除dom元素中的某个class类*/
removeClass : function(obj, cls) { 
 if (this.hasClass(obj, cls)) { 
 var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 
 obj.className = obj.className.replace(reg, ' '); 
 } 
}, 
/*该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。*/
toggleClass : function(obj,cls){ 
 if(hasClass(obj,cls)){ 
 removeClass(obj, cls); 
 }else{ 
 addClass(obj, cls); 
 } 
}

6. 重写后的按钮事件

//播放按钮
playDom.onclick = function(){
 this.style.display = 'none';
 pauseDom.style.display = 'inline';
 utils.addClass(musicIcon,'r');
 //播放音乐
 musicBox.play();
}
//暂停按钮
pauseDom.onclick = function(){
 this.style.display = 'none';
 playDom.style.display = 'inline';
 utils.removeClass(musicIcon,'r');
 musicBox.stop();
}
//下一首
nextDom.onclick = function(){
 musicBox.next();
 //当直接点击下一首的时候，同时改变播放按钮为暂停的样式
 playDom.style.display = 'none';
 pauseDom.style.display = 'inline';
 utils.addClass(musicIcon,'r');
}
//上一首
prevDom.onclick = function(){
 musicBox.prev();
 //当直接点击下一首的时候，同时改变播放按钮为暂停的样式
 playDom.style.display = 'none';
 pauseDom.style.display = 'inline';
 utils.addClass(musicIcon,'r');
}

效果：

7. 显示正在播放的音乐

.music .info {
 position: absolute;
 display: inline-block;
 width: 80%;
 height: 30px;
 left: 15px;
 top: 20px;
 text-align: center;
 color: #eee;
 font-family:黑体;
 font-size: 14px;
}
<div id='music' class='music'>
 <div class='screen'>
 <i id='music-icon' class="iconfont icon-yinle"></i>
 </div>
 <div class='buttons'>
 <i id='prev' class="iconfont icon-icon"></i>
 <i id='play' class="iconfont icon-bofanganniu"></i>
 <i id='pause' class="iconfont icon-zanting" style="display:none"></i>
 <i id='next' class="iconfont icon-icon1"></i>
 </div>
 <span id='info' class='info'></span>
 
</div>

然后在musicBox对象中添加一个获取歌曲信息的方法：

/*获取当前歌曲的信息*/
getCurrentSong : function(){
 var info = this.songs[this.index];
 info = info.split('/')[1];
 info = info.split('.')[0];
 return '正在播放：' +　info;
}

然后，在按钮的点击事件中，只需要加上下面的代码，即可获取实时的歌曲信息啦！

先获取信息栏：

/* 获取歌曲的信息栏 */
var infoDom = utils.dom('#info');

改写按钮点击的事件：

infoDom.innerHTML = ''; //先清空上一次的信息
infoDom.innerHTML = musicBox.getCurrentSong();//显示当前的歌曲信息

效果：

这一节到此告一段落了，下一节，我们来做音轨。

悠闲的午后，品着刚泡好的茶

听着美妙的音乐，也是一种享受吧。

享受编程的乐趣，怀着感恩的心去体会每一天生活中的细节。

转地球功能实现主要借助于CSS动画效果完成，通过移动地图背景图层，云彩图层等，在视觉上呈现出旋转地球效果。旋转地球最终实现效果如下图所示：

旋转地球效果展示

设计思路与核心技术

旋转地球效果实现主要借助于animation动画属性完成，在动画关键之keyframe编写时移动图片坐标位置，实现背景地图图片位置移动。为体现移动效果，进一步定义了云彩与飞机，飞机居中固定，云彩与地球非同步移动，最终呈现出动态效果。本例所需核心技术主要描述如下：

1、flex布局

通过使用flex布局模式用于实现呈现动画效果div在页面居中显示效果，核心代码如下：

display: flex; //flex布局
justify-content: center;//水平居中 
align-items: center;//垂直居中

2、before与after伪元素

在之前案例设计分析中，我们使用before与after等元素进行了案例设计，这两个元素主要用于在页面中生成虚拟的元素。本例中我们使用before在地球容器层前定义了用于存储云彩的伪元素层。部分代码如下：

.earth:before{ 
content: ''; 
width: 100%; //宽度
height: 100%; //高度
position: absolute; //绝对定位
background: url('cloud.png');//背景图片 
background-size: cover; //图片放缩类型
opacity: 0.8; //透明度
border-radius: 50%; //圆角
animation:animate 18s linear infinite;//动画
 }

3、animation与keyframes

animation属性与keyframes是实现CSS动画的关键，本例中需要将地球图片与云彩图片分别进行动画定义，最终呈现动画效果，其中云彩动画定义如下：

animation:animate 18s linear infinite;//动画定义
 @keyframes animate{ //关键帧定义
0%{ background-position: 0 0; } 
100%{ background-position:807px 0; }
 }

效果实现与核心代码

在明确本例设计思路与掌握所需技能基础上，我们可以搜集素材完成本案例效果的制作与实现。

1、所需素材

主要所需素材包括地图平面图片，飞机图标，云彩图片等。素材如下图所示：

图片素材

2、页面布局

本例页面布局较为简单，只需要一个div用于存储地图图片资源，before元素用于存储云朵，飞机素材可用img标记元素存储。页面body部分布局代码如下：

<body> 
<div class="earth">
 <img src="plane.png">
 </div> 
</body>

3、CSS样式编辑

CSS样式编辑是本例核心，包括页面布局的实现，伪元素的定义及动画效果设计实现等，其中earth类、earth:before类与动画设计时关键部分，核心代码如下：

核心CSS定义

以上给出旋转地球设计效果实现思路及核心相关技术，如需代码分享，请评论区留言、关注并私信。本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！


在线咨询
上一篇：HTML5岗位技能实训室建设方案
下一篇：在HTML页面中嵌入其他页面的方法-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 准格尔旗 普兰县 睢县 铅山县 德格县 八公山区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服