c++ cef3 获取网页宽高_【网页新手实战项目】——【002】圣诞节，剩下单人的剩单节...

最新推荐文章于 2023-09-28 17:36:40 发布

weixin_39516956

最新推荐文章于 2023-09-28 17:36:40 发布

阅读量372

点赞数

文章标签： c++ cef3 获取网页宽高

本文链接：https://blog.csdn.net/weixin_39516956/article/details/113047958

版权

【整体效果】：

知乎视频www.zhihu.com

【Crap】：

我怎么感觉CSS画画跟HLSL画画没什么区别呢。CSS跟Cocos一样。另外这种代码式做的动画可移植性更强，比用AE做什么MG动画更能锻炼人。要做轻度的教学动图，可比游戏引擎材质球做省事得多，方便得多，当然道理都是相通的，技术角度多多益善。

【温馨提示】：

VS Code中 File-> AutoSave。这样就不用每回Ctrl+S保存再F5刷新网页了。
然后再安个 Live Server插件，右下角点击Go Live，然后浏览器中打开，就不再是“C/Users...."，而是”127.0.0.1:5500"，这样你就不用来回切换F5刷新了，直接是实时预览的。特别省时间。
在线js练习有这个Codepen： (codepen.io)
Ctrl+Shift+[] 展开收拢div Ctrl+[] 缩进
4K屏幕的话，浏览器放大175%效果才能正常显示。

【内容】：

上节内容——【网页新手实战项目】——【001】爱心Loading动画
本节视频教程——Pure CSS Christmas Banner Animation Effects | Snow Fall | Html5 CSS3

【导图】：

一、HTML做分区

div就是跟Vertical Box一样从上到下换行排列
span就是跟Wrap Box一样，不换行，元素多的时候，根据WrapBox的宽度来换行

html:5
.tree
div>span*3，删去一个span
然后复制五个。

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>


</head>
<body>
    

<div class="tree">
<div>
     <span></span>
     <span></span>
</div>

<div>
     <span></span>
     <span></span>
</div>

<div>
     <span></span>
     <span></span>
</div>

<div>
     <span></span>
     <span></span>
</div>

<div>
     <span></span>
     <span></span>
</div>

</div>
</body>
</html>

二、CSS设置背景

①基础概念

【1.初始化内外边距都为0】

css首先要初始化，相当于将锚点归零到页面左上角了，要不然它默认是有微微的间隙的：关于Padding和Margin

 *{
          margin:0;
          padding:0;
     }

【2.vh概念】：vh是CSS相对长度单位，表示相对视口高度，1vh=1% * 视口高度。100vh 视口高度一致。如下，10%~40%四种颜色。

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>

     <style>
          *{
    
          margin:0;
          padding:0;
     }
.a{
    
     height: 10vh;
     background-color:red;
     }
.b{
    
     height: 20vh;
     background-color: orange;
}
.c{
    
     height: 30vh;
     background-color: yellow;
}
.d{
    
     height: 40vh;
     background-color: green;
}
     </style>
     
</head>
<body>
   <div class="a"></div>
   <div class="b

最低0.47元/天解锁文章

weixin_39516956

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
c++ cef3 获取网页宽高_【网页新手实战项目】——【002】圣诞节，剩下单人的剩单节...

【整体效果】：知乎视频www.zhihu.com【Crap】：我怎么感觉CSS画画跟HLSL画画没什么区别呢。CSS跟Cocos一样。另外这种代码式做的动画可移植性更强，比用AE做什么MG动画更能锻炼人。要做轻度的教学动图，可比游戏引擎材质球做省事得多，方便得多，当然道理都是相通的，技术角度多多益善。【温馨提示】：VS Code中 File-> AutoSave。这样就不用每回Ctrl+S...
复制链接

扫一扫