关键字:伪元素
  • web前端入门到实战:使用CSS创建一个炫酷的球体动画效果
    一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍。 1.使用Jade和SCSS生成一个圆圈 创建一个圆圈的第一步是生成所有组成圆圈的粒子。有了Jade,我们不用一个一个的写出200个div。 ...
  • web前端入门到实战:只用一个div来做的弹跳小动画
    这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我们继续看下去。 利用伪元素 由于只使用了 ...
  • web前端入门到实战:CSS伪元素(content与counter)
    counter基本用法 在CSS里头,counter是个很有意思的功能,最常见得就是如果我们使用list清单,样式选择decimal十进制,当清单变多的时候数字也会跟着增加,底层貌似就是使用counter来做的,也因为counter所产生的 ...
  • 精通HTML5+CSS3需要学什么?
    精通HTML5+CSS3需要学什么?主要学习vscode编辑器基本使用、HTML5新增标签、CSS3新增选择器及案例、2D转换及相关案例实现、3D转换和旋转木马案例等知识点。 一、vscode编辑器基本使用  vscode 基本使用  vs ...
  • 【前端进阶100天】Day02 CSS基础 CSS样式表 CSS选择符
    今日内容: 1、CSS简介 2、CSS语法 3、样式的创建(内部样式 外部样式 内联样式) 4、两种引入外部样式表的区别 5、样式表的优先级和作用域 6、CSS选择器 7、选择器的权重 8、HTML、CSS注释 一、CSS简介 CSS英文全 ...
  • 【前端进阶100天】Day07 图片整合技术|宽高自适应|过滤器|伪对象选择符
    今日内容: 1、图片整合的概念,使用图片整合的优势 2、最小宽度、最小高度、最大宽度、最大高度 3、过滤器的使用 4、宽高自适应的概念和使用 5、最小高度和高度自适应引发的兼容问题(针对IE浏览器) 6、浮动元素父元素高度自适应引发的高度坍 ...
  • 详解 CSS 属性 - 伪类和伪元素的区别
    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器。 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css ...
  • css解决retina屏1像素边框变粗的问题
    苹果的retina屏幕(视网膜屏幕)为什么看起来那么爽?因为它的分辨率极高,可以达到眼睛几乎看不出来的地步。举个例子,一个1像素的点,普通屏幕会用1个像素格去表示,而retina屏幕则不是,iPhone5/6/7/8等机型会用4个像素格(2 ...
  • 零基础web前端技术学习指南
    优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力。前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维 ...
  • 深入css布局(3)—— 元素的定位与浮动
    上篇我们讲解了不同类型元素的特点,我们可以随意的排列组合他们来达到我们想要的效果。但是他们都是基于一个二维平面的,如果我们想在布局中有遮挡,重叠之类的更丰富效果,我们就需要使用到定位和浮动的相关知识。 1.文档流 文档流就是按照页面元素书写 ...

暂无数据