loading动画在页面过度等经常会用到,我在工作中就写过很多有趣的loading加载动画,在这里,我就分享一个波浪效果的loading动画写法(在写动画前,可以先画个草稿或动画流程图,充分思考动画执行的过程,再编写代码事半功倍哦)。一、首先看下效果图:css3编写的loading动画二、html代码很简单,就是一个外层div,加上几个运动的span(动画效 ......
432
0
0
2022-04-14
为什么要了解CSS样式优先级?因为我们在设置CSS样式时候,有时候可能会重叠样式,此时,HTML元素应该选择哪个CSS样式呢?案例按照我们平时的习惯,理所应当的认为写在后面的样式会覆盖前面的样式,那么我们调整一下div和.demo的位置顺序我们可以发现,及时调整了 先后顺序,HTML元素依旧使用.demo的样式。因此我们需要了解css的优先级,方便我们修复B ......
367
0
0
2022-04-14
简介VvvebJs一款开源免费的网站生成器, 只要动动鼠标就可以免费设计网页,并且同时支持手机端,pad端和PC端。Github star 1000+, Apache 2.0协议。软件效果图如下:功能列表组件和块/片段拖放。撤消/重做操作。一个或两个面板界面。文件管理器和组件层次结构导航添加新页面。实时代码编辑器。包含示例php脚本的图像上传。页面下载或导出 ......
411
0
0
2022-04-13
大家好,我是吉礻羊。有人@我说不知道怎么写自适应的网页,今天就先不写优化的了,我把写自适应网页的方法说下。自适应的网页工具:dw网页设计软件;ps图像处理软件。方法/步骤:1,在<head></head>之间加入加入一行viewport标签。<meta name="viewport" content="width=device- ......
433
0
0
2022-04-12
PC 端网页设计对于很多从事 UI 行业的新人来说是一个充满未知的领域,对于怎么进行基本的画布创建,规格设置,都处于两眼一抹黑的状态。虽然这是因为多数人没有系统的学习 UI 知识,它并不是一个合理的现象。接下来,我们会更新一些网页设计的干货,帮助更多 UI 设计师了解网页设计的基础知识。首先,网页设计的第一步就是画布创建了,这也是困扰我们的第一个难题。由于市 ......
317
0
0
2022-04-12
1、垂直对齐如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-tran ......
386
0
0
2022-04-12
伪类在css应用开发中有着非常重要的应用,通常我们看到的鼠标移到某段文字或菜单上见到文字发生了样式的变化,大多都是使用伪类来实现的。a标签使用伪类a:link 未访问状态a:visited 已访问后的链接a:hover 鼠标悬停状态a:active 选定的链接注意:a:hover 必须放在a:link和a:visited 才有效a:active 必须放在a: ......
337
0
0
2022-04-12
前端就是一个大杂烩,做为前端工程师需要掌握的知识点太多了。各种长度单位需要我们去了解除了这些还有印刷单位 pt pc pt cm mm in....毫无疑问现在统治前端的长度单位还是px, 一个相遇对于屏幕分辨率的像素单位。px: 全称pixel(像素)是图像的基本采样单位,它不是一个确定的物理量,也不是一个具体的点或者小方块(虽然可以用点和小方块来呈现), ......
603
0
0
2022-04-12
最近项目需要,写一些动画效果,下面对animation的知识巩固了一下,希望可以帮助到有需要的小伙伴们。animationanimation-name 需要绑定到选择器的 keyframe 名称animation-duration 完成动画所需要的时间animation-delay 设置延长时间animation-timing-function 动画的运动速 ......
442
0
0
2022-04-11
介绍animate.css是一堆很酷,有趣且跨浏览器的动画,供你在项目中使用。非常适合强调,主页,滑块和一般的加水效果。animate.css v4正在进行许多改进和重大更改,包括CSS自定义属性支持(又称CSS变量)和类前缀,以确保安全使用。感兴趣的小伙伴可以上github关注进展以及提供反馈!Githubanimate.css的受欢迎程度毋庸置疑,在Gi ......
594
0
0
2022-04-11
一个客户的需求想知道单页面用户哪一块儿停留的时间长,有没有反复的看,于是做了个简单demo。比较精简前端只写了个简单的框架,原理是css伪元素去访问后端接口。css前端部分:通过建立伪元素,当页面访问,鼠标移入时就会访问到接口,接口在记录下动作就可以。后端用了php写日志的形式,没有入库,正常可以入库并计算时间在后台统计出来。php部分:当访问不同的区块就会 ......
379
0
0
2022-04-11
哈喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!志同道合的小伙伴跟我一起学习交流哦!第二阶段 CSS317 CSS溢出文字隐藏所谓的界面样式,就是更改一些用户操作样式,比如更改用户的鼠标样式,表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了,防止表单域拖 ......
368
0
0
2022-04-11
背景W3C在2009年提出了一种新的布局方案:Flex 布局。Flex布局可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项属性。浏览器支持情况但对于新手来讲,盒模型或布局基础掌握不牢,会认为flex布局属性及其对应的取值太多,很难记住。为此小郭特意整理了一份前端最常用的flex布局方式,直接使用 ......
349
0
0
2022-04-11
祝您2019猪事顺利,心想事成。前言前面两篇文章都有提到过box-shadow,里面也有很多的基础知识,有看过的小伙伴应该都有或多或少的收获吧,今天我们再从基础入手,希望能让大家更熟悉它。没有看过之前文章的小伙伴请点击:CSS3 box-shadow实现背景动画CSS3动画解析抖音 LOGO制作下面我们从最基础的开始演示。单侧投影关键点: 1、外 box-s ......
410
0
0
2022-04-10