移动端分页列表，在ios上滚动加载分页时候，使用scrollTop，会引起白屏问题。
看不少文章说是使用了-webkit-overflow-scrolling: touch;引起的硬件加速问题。亲测删除问题仍然存在。
|
1 2 3 4 5 |
this.$nextTick(() => { window.scrollTo(0, 1); window.scrollTo(0, 0); }) |
[cr[……]
分类：HTML&CSS
移动端100vh的问题与解决方案
之所以100vh在移动端出现问题，原因大致如上图，真搞不懂，为什么总是有反人类的设计出现。
经过多方参考，实测有效的方案如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> :root { --vh: 1vh; } </style> <script> !(function (n, e) { function setViewHeight() { var windowVH = e.innerHeight / 100; n.documentElement.style.setProperty('--vh', windowVH + 'px'); } var i = 'orientationchange' in window ? 'orientationchange' : 'resize'; n.addEventListener('DOMContentLoaded', setViewHeight); e.addEventListener(i, setViewHeight); })(document, window) </script> |
使用：
[crayon-673ee1a920d7c22573706[……]
iframe在ios上不能滚动问题解决方法
同这篇文章一样，用到了-webkit-overflow-scrolling: touch;属性。主要解决方案是在iframe外层添加一个div，然后设置-webkit-overflow-scrolling属性。
例如：
|
1 2 3 |
<div class="content-iframe-wrapper"> <iframe frameborder="0" class="content-iframe" src=""></iframe> </div> |
[c[……]
Mac去除select圆角
H5背景音乐自动播放(兼容微信IOS，进程后台切换自动停止播放，本文例子为Vue写法)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<template> <audio src="./static/music.mp3" id="bgMusic" preload="auto" loop></audio> <div class="bgMusicBtn" @click="bgMusicPlayOrPause('bgMusic')"> <img :src="playFlag ? playImg : pauseImg" :class="{rotate: playFlag}"> </div> </template> export default { data() { return { playFlag: true, playImg: require('../../static/play.png'), pauseImg: require('../../static/pause.png'), clickMusicBtn: false } }, mounted() { this.audioAutoPlay('bgMusic'); document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q if (this.clickMusicBtn) { // 点击了关闭音乐按钮 if (this.playFlag) { this.audioAutoPlay('bgMusic'); this.playFlag = true; } else { this.audioPause('bgMusic'); this.playFlag = false; } text.innerHTML = e.hidden; if (e.hidden) { // 网页被挂起 this.audioAutoPlay('bgMusic'); this.playFlag = true; } else { // 网页被呼起 this.audioPause('bgMusic'); this.playFlag = false; } } else { // 未点击关闭音乐按钮 if (this.playFlag) { this.audioPause('bgMusic'); this.playFlag = false; } else { this.audioAutoPlay('bgMusic'); this.playFlag = true; } text.innerHTML = e.hidden; if (e.hidden) { // 网页被挂起 this.audioPause('bgMusic'); this.playFlag = false; } else { // 网页被呼起 this.audioAutoPlay('bgMusic'); this.playFlag = true; } } }); }, methods: { bgMusicPlayOrPause(id) { this.clickMusicBtn = !this.clickMusicBtn; if (this.playFlag) { this.audioPause(id); this.playFlag = false; } else { this.audioAutoPlay(id); this.playFlag = true; } }, audioPause(id) { var audio = document.getElementById(id); audio.pause(); document.addEventListener("WeixinJSBridgeReady", function () { audio.pause(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.pause(); }, false); }, audioAutoPlay(id) { var audio = document.getElementById(id); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.play(); }, false); } } } |
文本行的斑马条纹
自定义优雅的文本下划线
原来你是这样的毛玻璃
以前写毛玻璃用的都是图层覆盖，看了 LEA VEROU 的《CSS揭秘》后才发现还有更优雅的毛玻璃：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html> <head> <title>原来你是这样的毛玻璃</title> <meta charset="utf-8"> </head> <style> @keyframes ants { to { background-position: 100%; } } body, main:before { background: url("demoImages/1.jpg") 0 /cover fixed; } main { position: relative; background: hsla(0, 0%, 100%, .3); overflow: hidden; display: block; margin: 200px auto; width: 1000px; height: 500px; } main:before { content: ''; position: absolute; top: 0%; right: 0%; left: 0%; bottom: 0%; filter: blur(10px); margin: -30px; } .demoBox { border: .5em solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; animation: ants 12s linear infinite; } .demo { position: relative; z-index: 999; font-size: 5em; text-align: center; line-height: 5; font-weight: 100; } </style> <body> <main class="demoBox"> <div class="demo">原来你是这样的毛玻璃</div> </main> </body> </html> |
效果图：
CSS3边框会动的信封
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>酷炫的CSS3</title> <meta charset="utf-8"> </head> <style> @keyframes ants { to { background-position: 100%; } } .demo { display: block; margin: 200px auto; width: 300px; height: 200px; border: 1em solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; animation: ants 12s linear infinite; } </style> <body> <div class="demo"></div> </body> </html> |
静态效果图：
解决css3毛玻璃效果(blur)有白边问题
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
做一个登录页，全屏背景图毛玻璃效果，实现方法如下： HTML： <body> <div class="login-wrap"> <div class="login-mask"></div> <div class="login-box"></div> </div> <script> var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; $('.login-mask').css("height", h); $('.login-mask').css("width", w); </script> </body> CSS： .login-wrap { overflow: hidden; } .login-mask { /* IE6~IE9 */ filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=100, MakeShadow=false); -webkit-filter: blur(100px); -moz-filter: blur(100px); -ms-filter: blur(100px); filter: blur(100px); background-image: url(../../../img/background/home-bg-3.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center; position: absolute; z-index: 1; } .login-box { width: 300px; height: 400px; background-color: rgba(255, 255, 255, 0.5); display: block; border: 1px solid rgba(183, 183, 183, 0.47); border-radius: 6px; position: absolute; left: 50%; margin-right: auto; margin-left: -150px; margin-top: 10%; z-index: 2; } |
效果如下：
可以发现边上是有白边的，这是一种blur的值很大的情况下。此时的解决方法是直接将background-size:cover;改成background-size:150% 150%;就行了。
效果图如下：
仔[……]