关于@media/animation/transition 样式渲染

下面简述一下关于CSS样式的一些使用：

@media:"使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。"，所具有的属性如下：

all：用于所有设备

print：用于打印机和打印预览

screen：用于电脑屏幕，平板电脑，智能手机等。

speech：应用于屏幕阅读器等发声设备

 

目前我用到的就是用来检测当前屏幕不同的分辨率或全屏显示的样式修改，这样能够大大缩减js代码的判断已经样式的动态添加和删除

如果使用js进行屏幕的宽度显示可以进行如下操作

　　　　　　　var width = window.screen.width;  // 分辨率宽度
            var height = window.screen.height;  // 分辨率高度（$(window).height()使用屏幕高度）
            window.setTimeout(function () {// 宽度
                if (width == "1280") {
                    $(".comment").css("width", "800px");
                }　　　　
　　　　　　　　　　....
　　　　　　　　　　.....
else{
                    $(".show-grand").css("top", "calc(20% - 49px)");
                }
            }, 200);

当时上述代码优缺点：1.一旦css样式过多，您就会发现您需要添加很多样式的代码,例如$("className/IdName").css("属性",“值”)；2.渲染的时间是个问题，过早了渲染不出来，过迟用户体验不好(交互不好)

所以，通过贾总的分享，我发现了@media，所以去查了一下，仿佛发现新大陆，下面我来简单说一下目前我用到的(具体可以去官网查看)

        <button type="button" @click="TestFunc" class="TestCss" style="z-index:999;position:absolute;bottom:100px;left:100px;">测试</button>

CSS:

.TestCss{
    background-color:red;  -- 设置默认颜色
}
-- 检测当前元素使用的分辨率(注：这里不是监测屏幕的分辨率,而是当前元素(窗体)使用的分辨率)
@media screen and (min-height:700px) and (max-height:1000px){
    .TestCss{
        background-color:yellow;  -- 设置对应屏幕对应的颜色
    }
}

 

 animation：这个东西的作用是用来添加动画效果用的，像下面展示的效果就是绑定到“help-add-show”这个class，为其添加1秒钟的从暗到亮的效果，具体参数意义可参考这个博客(https://blog.csdn.net/u013243347/article/details/79976352)，弄出来的效果挺不错

.help-add-show{
    animation: hiddiv 1s normal;  // 单向变动
}
@keyframes hiddiv
{
from {opacity:0;}
to {opacity:1;}
}

 AddBy 2020-09-15

动画(无限、连续循坏)

animation:mymove 5s 5s linear infinite alternate forwards
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

EndBy 2020-09-15

AddBy 2020-09-21

关于多个性质不同的animation同时使用

animation:animateShow 0s forwards,NowPorjection 5s 5s linear infinite alternate forwards;
@keyframes animateShow{
    from{opacity:0;}
    to{opacity:1;}
}
@keyframes NowPorjection{
    0%{
        left:0px;
    }
    50%{
　　　　left:100px;
    }
    100%{
        left:0px;
    }
}

详情请跳转：深入理解CSS动画animation - 小火柴的蓝色理想 - 博客园 (cnblogs.com)

animation-name: 动画名称(默认值为none)
animation-duration: 持续时间(默认值为0)
animation-timing-function: 时间函数(默认值为ease)
animation-delay: 延迟时间(默认值为0)
animation-iteration-count: 循环次数(默认值为1)
animation-direction: 动画方向(默认值为normal)
animation-play-state: 播放状态(默认值为running)
animation-fill-mode: 填充模式(默认值为none)

div{
width: 300px;
height: 100px;
background-color: pink;
animation-name: test;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
animation-fill-mode: none;
}
/* 关于keyframes关键帧的内容稍后介绍 */
@keyframes test{
0%{background-color: lightblue;}
30%{background-color: lightgreen;}
60%{background-color: lightgray;}
100%{background-color: black;}
}

EndBy 2020-09-21

transition:也是用来渲染动画的，不过呢，两者还是有区别的，一个是补间动画，一个是帧动画，具体效果我也不多说，直接给您看人家写好的博客吧(https://blog.csdn.net/allenyhy/article/details/81608647)

 AddBy 2020-08-31

transition能够回放已播出的动画，例如：

.BagsDatasCss .train_bags_fir {
    cursor:pointer;
    height:100%;
    margin-top:0px;
    width: calc(90%);
    transition:width 0.3s,height 0.3s,margin-top 0.3s;
}
.BagsDatasCss:hover .train_bags_fir{
    height:110%;
    margin-top:-10px;
    width: calc(100%);
}

 

EndBy 2020-08-31

AddBy 2021-12-13

ease-in/ease-out:可以制作与坐标无关的的动画以及能够减缓变动的效果(例如vue的data-enable)

div
{
width:100px;
height:100px;
background:blue;
position:fixed;
top:0px;
left:0px;
transition:top 2s ease-out;
}
div:hover
{
top:100px;
}

 

EndBy 2021-12-13

 

 关于ie/谷歌浏览器下animation不能够调整图片大小问题

AddBy 2021-06-17

 关于只适应适配(即使用@media screen)

 EndBy 2021-06-17

没了，别看了，我也很菜嘞，憋不出几个知识点嘞，，，，