页面适应手机端的方法+css3动画

最新推荐文章于 2024-05-16 09:59:55 发布

喜乐ll

最新推荐文章于 2024-05-16 09:59:55 发布

阅读量557

点赞数

分类专栏：笔记文章标签： css3 动画 css

本文链接：https://blog.csdn.net/m0_63341952/article/details/121725193

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、页面适应是手机端的方法

1.使用css中的媒体查询

==@media screen and (max-width:___ ){ } ==

对电脑端的数据，属性进行修改从而来适应手机端

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>媒体查询</title> 
<style>
body{
background-color:pink;
}
@media screen and (max-width:___ ){
background-color:red;
 }
</style>
</head>
<body>
<h2>捕捉一只小仙女</h2>
</body>
</html>

在这里插入图片描述
适应手机端（及屏幕缩小后）

2.bootstrap4网格系统的应用

网格系统会随着屏幕和视口的增加系统会自动分为12列

当容器最大宽度为默认值时，类前缀名字为.col-

当容器最大宽度为540px时，类前缀名字为.col-sm

当容器最大宽度为720px时，类前缀名字为.col-md

当容器最大宽度为960px时，类前缀名字为.col-lg

当容器最大宽度为1140px时，类前缀名字为.col-xl

既适应又适应电脑格式

<div class="row">
<div class="col-sm-__ col-md-__"></div>
<div class="col-sm-__ col-md-__"></div>
...
</div>

注：大盒子中的col-md-__的空格里值得和必须为12

css3动画

1.格式

@keyframes 动画名称 {

}

@keyframes 动画名称 {

    from{
    }
    to{
    }

}
使用动画时，需要在盒子里面添加动画名

```css

div {

animation-name:动画名称；

animation-duration:持续时间；

}

```

2.动画的其他属性

annimation-timing-function
规定动画的速度曲线，默认是“ease”

annimation-delay
规定动画何时开始

annimation-iteration-count
规定动画播放次数，默认是1，还有infinite

annimation-play-state
规定动画是否正常运行

annimation-fill-mode
规定动画结束后的状态保持forward回到起始backwards

感想：最近在将仿的英雄联盟网页适应手机端，结果，发现自己在基础知识上有一堆的毛病，除此以外，发现还不会使用，以后看知识点的时候得多上手实操，而且，在敲代码的时候得细心、细心、再细心，少犯点低级错误。

喜乐ll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面适应手机端的方法+css3动画

一、页面适应是手机端的方法1.使用css中的媒体查询==@media screen and (max-width:___ ){ } ==对电脑端的数据，属性进行修改从而来适应手机端<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="utf-8"> <tit
复制链接

扫一扫