小程序官网总结(vue框架+php模板渲染+rem适配)

debug

bug1:加载的时候有一瞬间闪过没有样式的dom(内容全挤到一块)

小程序官网总结(vue框架+php模板渲染+rem适配)_第1张图片

小程序官网总结(vue框架+php模板渲染+rem适配)_第2张图片
解决思路:css/js/html 加载顺序有问题  --> 查看引入的文件顺序 --> 调整好顺序以后发现问题还是没解决 --> 分别屏蔽引入的文件,查看效果 --> 发现引入的rem.js被屏蔽后,页面的效果和原本页面一闪而过的错乱页面一样

js效果

1.头部导航栏随着滚动条拖动变换颜色

实现效果:

小程序官网总结(vue框架+php模板渲染+rem适配)_第3张图片

实现逻辑:滚动条在顶端时背景为透明、拖动到banner时与banner同色、拖动到banner结束时为黑色

封成函数,可以在多个页面复用,上代码(可放在外部js文件内)

function changeHeaderColor(bannerClassName,bannerColor){      //传入的两个参数为1、banner的类名(为了能在首页和子页面复用),2、banner颜色
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;    //获取滚动条滚动长度(兼容ie)
        var bannerHeight = document.getElementsByClassName(bannerClassName)[0].offsetHeight; //获取banner高度
        var hcolor = document.getElementById('miniapp-header');                //获取顶部导航栏节点
        if( scrollTop === 0 ){
            hcolor.style.backgroundColor = "rgba(22,22,22,.1)";
        }
        if( scrollTop > 0 ){
            hcolor.style.backgroundColor =  bannerColor;
        }
        if( scrollTop > bannerHeight ){
            hcolor.style.backgroundColor = "rgba(22,22,22,0.85)";
        }
    };

在不同页面调用

window.onscroll = function(){
        changeHeaderColor('block','#1F2531');
    }; //滚动条滚动时出发事件执行上述函数,记得外面的function不能缺,否则会出错

css3效果

1.长文字隐藏(包括多行和一行)

实现效果:(此方法只能实现一行省略,多行省略请查看https://www.cnblogs.com/hellman/p/5755376.html)

小程序官网总结(vue框架+php模板渲染+rem适配)_第4张图片

  • 数据(很长)


width: 3.35rem;                /*设置一个宽度来使溢出部分被隐藏*/
white-space: nowrap;         /*设置文字不换行*/
text-overflow: ellipsis;    /*溢出来的文字用省略号代替*/
overflow: hidden;            /*溢出内容隐藏掉*/

  • 悬浮提示:使用title属性
  • 相关定义及用法(title属性、white属性、text-overflow属性)

小程序官网总结(vue框架+php模板渲染+rem适配)_第5张图片

小程序官网总结(vue框架+php模板渲染+rem适配)_第6张图片

小程序官网总结(vue框架+php模板渲染+rem适配)_第7张图片

2.hover放大/缩小效果

效果:

.marketing-miniapp-function li:hover {
    box-shadow: 0 0 0.32rem 0 rgba(0,0,0,0.18);    /*设置盒子阴影营造投影效果*/
    transition: 0.3s;                                /*设置过渡效果,让变换不那么僵硬*/
    transform: scale(1.1,1.1);}                /*放大效果*/
以下代码为另一个位移效果
transform: translate(-0.05rem,-0.05rem);      /*2d位移,若用绝对定位改变hover时块的位置,则会一直闪*/
box-shadow: 0 12px 30px -8px rgba(0,0,0,.2);
transition: 0.3s; /*从没有hover过渡到hover用的时间*/
cursor: pointer; /*将鼠标移到块时,鼠标显示为抓手*/

千万不要用element:hover{width:xxpx;height:xxpx} 去改变它的大小,出来效果不好(其实下面的方法也有一个缺点:文字在放大的时候有一瞬间的模糊)

以下方法都是transform属性的值,用于对元素进行移动、缩放、转动、拉长或拉伸。(这个属性贼好用)

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 需要前缀 -ms-。


translate() 方法

通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

rotate() 方法

通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

scale() 方法

通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:


skew() 方法

通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

小程序官网总结(vue框架+php模板渲染+rem适配)_第8张图片



你可能感兴趣的:(CSS中级)