html+css
文章平均质量分 79
Cachito98
这个作者很懒,什么都没留下…
展开
-
html+css复刻NIKE官网静态页面(一)
nike的官网比较简洁,是我喜欢的风格,那么,复刻nike官网要怎么入手呢?html部分对一个网页进行复刻,我们应该先从结构下手。这是初步的结构的分析,在html中我们可以用div或者section定义这些模块。然后我们在对每一个模块再进行细分。比如最顶上的模块:这一个模块又由这些小模块嵌套构成。对每个模块做好分析规划,给每一个模块取好类名。这样就形成了我们的html结构,css可以用选择器对html的模块进行样式的调整。css部分把页面的结构分析好以后就可以给每个模块定义布局和样式啦原创 2020-08-15 17:20:09 · 3666 阅读 · 7 评论 -
用css制作西游记师徒四人小动画
师徒四人小动画看看效果我们的目标是让师徒四人做出走路的动作,并让背景从左往右移动。让画面看起来是师徒四人向前走的效果。前期准备我们先把背景,还有师徒四人走路的每一帧图片添加到工作区中并给背景和师徒四人对应设置div。bg-背景one-唐僧two-悟空three-八戒four-沙僧 <div class="bg"> <div class=" one"></div> <div class=" two">&原创 2020-08-09 14:56:53 · 1846 阅读 · 1 评论 -
用css完成语音助手小动画
震惊!用css完成语音助手小动画不要太简单!语音助手动画定位布局添加动画语音助手动画hello大家好,我是Aaron。想必大家都见过这个页面,在各个平台的语音助手都可以看到类似的动画。那么这个小动画用css怎么实现呢,其实我们只需要考虑最重要的两点,一是用定位布局把我们所看到的页面做出来,第二是利用animation动画来实现。定位布局从图片中我们可以看,动画主要由一个黑色背景还有两个带有边框的圆组成。我们可以利用定位布局实现两个圆在背景框下的水平居中。相对定位:以原先位置进行定位(0px原创 2020-08-09 11:22:14 · 1509 阅读 · 0 评论