![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
工作填坑纪录
亭一婷
这个作者很懒,什么都没留下…
展开
-
网页移动端给页面横屏提示
大家都知道,我们在做移动端的网页时,设计及实现时,都会以竖屏或者横屏中的一种方式进行设计与实现,所以,为了使用户拥有更佳的体验,我们最好就是给网页加一个横屏或者竖屏提示。这里我们以横屏提示为例进行解析。首先,先做出横屏提示页面html:<div id="orientLayer" class="mod-orient-layer" style="display: none;"&...原创 2018-09-21 10:30:57 · 2056 阅读 · 0 评论 -
给页面添加背景音乐(兼容Android与iOS)
在我们做很多项目的时候,总会有需要给页面添加背景音乐的需求,在移动端呢,需要同时考虑到Android系统和iOS系统是否可以播放,以下代码音频播放代码可以完美的兼容Android和iOS系统,本人亲测有效。html:<div class="music-btn music-icon"></div>//设置音乐图标 <audio id="bg-music...原创 2018-09-21 10:49:36 · 1132 阅读 · 1 评论 -
导航栏同时缩放旋转(css3动画)
有时候看惯了墨守成规的导航栏,就突发奇想想要使自己的导航栏看上去酷炫与众不同。那么就看过来吧。这个文章实现的功能呢,就是当点击导航栏的小图标,导航栏就会在页面中心位置有小变大旋转而来,点击收回导航栏时,就会在页面中心有大变无旋转离去。挥挥手指不带走一片云彩~这种旋转出现的比较适合圆形导航栏哦~css:@keyframes tab { 0%{ transformtransfo...原创 2018-09-21 11:27:51 · 2491 阅读 · 0 评论 -
手机移动端视频全屏播放(兼容Android与iOS)
在做移动端项目时,做个视频播放是不可避免的,大部分情况下都是点击一个按钮,视频全屏播放,下面将对这个情况进行分析与记录。html:<video height="100%" id="videoPlay1" playsinline preload="auto" src="video.mp4" type="video/mp4" width="100%" x5-video-原创 2018-09-21 12:48:56 · 9952 阅读 · 1 评论 -
设置滚动条样式
直接上代码吧 简单易懂。/* 设置滚动条的样式 */::-webkit-scrollbar { width:4px; background-color: #7fbe26;}/* 滚动槽 */::-webkit-scrollbar-track { border-radius:10px;}/* 滚动条滑块 */::-webkit-scrollbar-t...原创 2018-09-21 13:16:19 · 104 阅读 · 0 评论