css3
文章平均质量分 76
时清云
自强不息,厚德载物;日拱一卒,功不唐捐;海纳百川,有容乃大。这世上没有最强的人,只有想变强的人,做一个简单真实的自己。
展开
-
Chrome 123 推出了一个新的 CSS 属性 field-sizing
最近Chrome 123又推出了一个新的 CSS 属性:。有了它,可以轻松实现输入框尺寸自动跟随输入内容的效果。转载 2024-03-27 14:40:50 · 37 阅读 · 0 评论 -
12个强大的 JavaScript 动画库,可帮助你提升用户体验
作为开发人员,利用这些工具无疑将增强您的项目,并使其在竞争日益激烈的数字环境中脱颖而出。转载 2024-01-08 17:46:00 · 235 阅读 · 0 评论 -
animate.css
animate.css可以理解是一个动画特效库,里面有好多动画特效,使用起来很方便。原创 2023-12-15 16:28:39 · 523 阅读 · 0 评论 -
动画animationend 事件在活动红包雨中的应用
最近搞了一个类似于红包雨的活动,研究了一下红包雨的实现方式。其中animationend 事件在 CSS 动画完成后触发,这个是我首次接触到的,所以就准备记录下来。红包雨代码如下:<template> <div class="ser_home"> <ul class="red_packet" id="red_packet"> <template v-for="(item, index) in liParams"> &原创 2021-12-30 18:02:33 · 649 阅读 · 0 评论 -
css之position那些事儿
最近参加一次面试,由于没有准备,被面试官虐惨了,不过这是好事,说明自己还有很多不足。进入正题:面试官问我position这块的时候,我有点卡壳,一个是关于fixed的相对定位和sticky粘性定位。下面有关position,我就做一个全面的总结。1、position设置的值有哪些:static ---- 静态定位(默认)relative ---- 相对定位absolute -...原创 2020-03-22 17:11:10 · 244 阅读 · 0 评论 -
二维码扫描的样式总结
我想大家都用过扫码插件,也想像微信和支付宝那样。但是有些插件是可以自定义样式的,但是有些则不行了。现在开发的app中有用到扫码的插件,但是默认的样式很丑,所以就想着能够能够实现像微信和支付宝那样的样式。代码如下:html<div class="scan"></div>css.scan { width: 150px; height: 150px; ma...原创 2019-12-05 15:12:46 · 1090 阅读 · 0 评论 -
项目总结-关于字体加粗问题
近期,在开发一个h5页面的时候遇到了这样一个关于文字加粗的问题,我设置了 <p style=“font-weight :600;”>100万代金卷</p> 结果在安卓手机上 100加粗了,‘万代金卷’却没有变化,ios手机上都是加粗的。why?难道还存在兼容性问题?...原创 2019-07-15 22:13:33 · 11314 阅读 · 4 评论 -
项目总结设置元素的多个背景图和background的运用
其实我们在项目中经常遇到这种场景一个元素或者一行会有多个图标展示,之前我的做法就是每个图标用 span标签然后给它加一个背景或者是直接用img标签加载。不过css3新出了这样一个功能,就是一个元素可以设置多个背景图,而且可以分别给每个背景图设置大小和位置,这样的话就可以在一个元素里面设置任意位置,任意大小的背景图(有点夸张了)。好了,前期介绍完了,开始用代码说话了background 简写属性...原创 2018-11-22 15:29:35 · 2304 阅读 · 1 评论 -
关于css3中transition动画实现input输入框特效的总结(项目总结)
最近在项目中,产品经理要求实现input框的一种特效,由于这个页面是用vue写的,所以就在github上找有vue有关这方面的组件,结果引入之后就出现了很多问题,首先这个vue项目用的ui框架是饿了吗开发的Mint UI,里面没有这种效果,然后又借鉴了一下vonic这个ui框架,但是引入的时候有些不兼容。无奈之下就自己写了一下这个特效,顺便又学习了一下动画效果。...原创 2018-08-24 11:23:28 · 4992 阅读 · 0 评论 -
项目总结(css3中的阴影效果)
以前用的很少,没有仔细去了解过这一块,所以对于阴影和动画只是实现一些简单的需求。所以趁这次项目需求结合实践就去好好总结一下这一块。原创 2018-08-20 22:28:29 · 25713 阅读 · 3 评论 -
关于绝对定位的元素水平垂直居中的总结
马上快元旦了,这一年即将过去了,新的一年又要开始了。元旦放假的时候会做一个年终总结。关于绝对定位的元素水平居中的常用的方法有两种:1.使用原创 2018-01-01 18:34:44 · 2382 阅读 · 0 评论 -
项目总结
最近由于项目比较紧也没有时间去整理自己的思路。由于之前自己的css样式不是很好,通过这个项目也历练了不少,所以就此机会去总结一下。1.max-width/max-height,.设置了max-width属性说明这个元素的最大宽度为max-width的值,但是不足这个最大宽度值的时候呢?不足宽度值的时候,这个元素的实际宽度值就是宽度值。设置max-width属性主要是为限制一个元素的宽度,当超出原创 2017-10-14 19:30:13 · 257 阅读 · 0 评论 -
CSS3 中的 rem 值与 px 之间的换算
看 CSS 文件的时候发现引入了一个新大小单位:rem,虽然 CSS 文件注释里有介绍,但看半天拿着手机上的计算器计算了几下愣是没搞明白,怕是新东西搜出来的都是英文看着累就没找 google,而是百度了一下,百度的结果就是看到一篇文章被转来转去,来转去,转去,去。。。郁闷之下回到主题的 CSS 再看那介绍,打开电脑的计算器,一计算,居然被我整明白了,原来原先计算值不等是因为我手机的计算转载 2017-08-06 10:53:05 · 655 阅读 · 0 评论 -
用 CSS 实现元素垂直居中,有哪些好的方案?
水平居中方案:水平居中设置1、行内元素设置 text-align:center2、定宽块状元素设置 左右 margin 值为 auto3、不定宽块状元素a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 autob:给该元素设置 displa:inine 方法c:父元素设置原创 2017-08-14 23:34:50 · 523 阅读 · 0 评论 -
关于css的margin塌陷现象
由于偶然翻到了以前的笔记,记载的正好是css的margin塌陷现象。于是有了写在知乎上与大家分享讨论的想法。在标准文档流中,竖直方向(记住是竖直方向,左右方向的不会出现塌陷现象)的margin会出现叠加现象,即较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的margin,这就是margin的塌陷现象。margin的塌陷现象分两种情况:1,兄弟关系的原创 2017-03-10 15:21:10 · 2368 阅读 · 0 评论 -
css3 box-pack box-align 居中
最近在h5页面开发中遇到了dispaly:box;这样的布局,所以总结了一下原来水平垂直居中写法为:height=line-height 实现垂直居中 text-align 实现水平居中现在 使用 box-align 实现垂直居中 box-pack 实现水平居中html>html lang="en">head> meta charset="UTF原创 2017-09-10 20:50:44 · 360 阅读 · 0 评论 -
浅谈CSS3中display属性的Flex布局
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex1 .container {2 display: flex;3 flex-direction: column;4 align-items: center;5 background-color: #b3d4db;6 }编译之后的效果很明显,界面的布局也很合理,看起来很转载 2017-09-10 21:04:40 · 498 阅读 · 0 评论 -
transform: translateY(-50%) 实现元素垂直居中效果
html>html lang="en">head> meta charset="UTF-8"> title>transformtitle> style> .demo1{ position: relative; width: 200px; height: 200px;原创 2017-09-10 21:51:46 · 3132 阅读 · 0 评论 -
css的伪类和伪元素
今天突然有人问我伪类和伪元素的区别,我想了想说:伪类前面有一个冒号,伪元素前面有两个冒号。然后我笑了,因为我只知道那么多区别,平时大部分都是使用伪元素after和before多些。然后今天就百度了一下,并且总结一下。1.什么是伪类? 什么是伪元素?(1)、两者的定义:伪类:伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围,使其成...原创 2017-10-19 20:34:36 · 487 阅读 · 0 评论 -
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。(另外需注意chrome强制最小字体为12号,转载 2017-11-08 17:40:25 · 712 阅读 · 0 评论 -
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。(另外需注意chrome强制最小字体为12号,转载 2017-08-20 00:01:13 · 391 阅读 · 0 评论