12-02 09:22 阅读 308

关注

css3动画补充及移动端的知识(html5移动动画效果)

一、动画animation:

使用之前需要先设置一个@keyframes 自取名字 { 0%{ } 30%{ } 100%{ } } 如下代码：

.box{
        width: 200px;
        height: 200px;
        background-color: aqua;
        animation: donghua 4s ease-out infinite alternate 0s ;
    }
    /*@-webkit-keyframes donghua 为兼容谷歌浏览器*/
    /*@-moz-keyframes donghua 为兼容火狐浏览器*/
    @keyframes donghua {
        0%{

        }
        30%{

        }
        60%{
            
        }
    }    
复制代码

动画的使用过程

动画的播放方向(animation-direction)
normal,动画每次都是循环向前播放
alternate，动画播放为偶数次则向前播放
动画的播放次数(animation-iteration-count)值通常为整数，默认值为1
特殊值infinite，表示动画无限次播放

移动端

头部meat标签的使用

<!-- 适配移动端的时候必须要加上视口标签 -->
<!-- viewport视口 width=device-widht宽度等于设备宽度 initial-scale=1.0初始化不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">复制代码

一、移动端的使用单位

移动端的使用单位rem：
1.rem是相对根元素（html）来设置的
2.1rem就相当于是根元素原大小,如果根元素没设置大小那么1rem就默认等于16px

移动端使用单位em特点：

1. em的值并不是固定的
   

2. em会继承父级元素的字体大小

二、媒体查询

1.@media screen 的运用：在引入专门写它的css链接时，链接要写在body的下方

/*500-700 包括500和700像素的时候显示如下样式*/
@media screen and (max-width:700px) and (main-width:500px ) {
    background-color:yellow;
}
/*only screen 代表仅油电脑屏幕使用  all代表全部  screen代表手机*/

作者：Eɴᴅᴇᴅ
链接：https://juejin.cn/post/7037038739566100494

 伪原创工具 SEO网站优化  https://www.237it.com/