css3
叶落无痕123
好好学习天天向上
展开
-
css——利用translate让元素居中
css——利用translate让元素居中父元素:position: relative;居中元素:position: absolute;top: 50%; //基于父元素left: 50%; //基于父元素transform: translate(-50%, -50%); //基于自身注意:此方法可能会导致像素模糊问题,因为CSS 的 transform: translate 属性在作元素位移时,极有可能发生像素点无法对齐的情况。正常情况下,元素的边缘应该和像素..转载 2021-08-30 09:35:43 · 1107 阅读 · 0 评论 -
css——利用translate让元素居中
参考:https://blog.csdn.net/qq_20264891/article/details/87873311父元素:position: relative;居中元素:position: absolute;top: 50%; //基于父元素left: 50%; //基于父元素transform: translate(-50%, -50%); //基于自身注意:此方法可能会导致像素模糊问题,因为CSS 的 transform: translate 属性...转载 2021-05-17 17:56:19 · 322 阅读 · 0 评论 -
CSS3实现过渡效果 (transition)
CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的动画。transition功能:实现元素不同状态之间的平滑过渡。此前:元素->hover状态 直接切换,从开始状态到结束状态,瞬间完成,中间过程几乎无法查看。格式:transition:过渡的属性 完成时间(s) 运动曲线 延迟时间数值型的属性才可以设置过渡。width,height,color,font-sizetransition-property 过渡属性:发生变化时,想要有过渡效果转载 2021-04-07 09:29:01 · 1727 阅读 · 0 评论 -
针对谷歌默认最小字体12px的正确解决方案 (css、html)
今天晨会,产品要求把以前12px的字体改小一点,我心想这有什么难的,就随口答应了。哪知,改css的时候,谷歌浏览器中font-size小于12px时,字体就不会再缩小了。当时我的第一反应就是会不会是其他css把字体覆盖了。结果看了半天也没发现。于是,只百度一伙了,结果还真让人大吃一惊:原来谷歌以及谷歌内核的浏览器在中文语言下最小字体只能是12px。不知道这算是一个bug还是谷歌人性化的设计。不管那么多了,反正要解决这个问题呀~既然这是一个经典的兼容性问题,一定有很多解决方法吧。让人吃惊的是,再百度一伙,网上转载 2020-12-11 11:29:15 · 903 阅读 · 0 评论 -
【CSS】CSS怎么设置小于12px的字体 浏览器限制最小字体大小解决方法
CSS的最小尺寸为1px,所以理论上可以将font-size设置为1px,但是实际上如果将font-size属性缩小到12px以下就没有效果了,这是因为浏览器限制了最小字体大小这只是PC端的浏览器进行的限制,手机端默认没有开启该限制,还是可以直接通过CSS设置最小字体的限制原因这个是 Chrome 为了更好显示中文设计的,google公司认为,人眼最小最舒服的字体识别是12px,小于12px的字体将会引起不适比如:解决方法使用transform: scale();属性缩放字体所在元素即转载 2020-12-11 11:21:24 · 9583 阅读 · 1 评论 -
css3系列之transform 详解scale
scale() scaleX() scaleY() scaleZ() scale3d()改变的不是元素的宽高,而是 X 和 Y 轴的刻度本章有个很冷门的知识点 →scale 和 rotate 一起使用——————————————————————————————————————scaleX()scaleY() 缩放该元素,>1 放大, <1 缩小 默认值是 1;看了上面的图,你可能会觉得,好像是100px 变成了200px...转载 2020-12-11 11:17:32 · 1399 阅读 · 0 评论 -
display的flex属性使用详解
flex的兼容性在pc端还算阔以,但是在移动端,那就呵呵了。今天我们只是学习学习,忽略一些不重要的东西。首先flex的使用需要有一个父容器,父容器中有几个items.父容器:container属性: display:flex;/*flex块级,inline-flex:行内快*/ justify-content:space-around;/*center:水平居中,fl...转载 2019-02-13 15:04:31 · 1430 阅读 · 0 评论 -
css3动画 -渐隐渐现
测试<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .anim-opacity2{animat转载 2019-02-15 16:31:20 · 10886 阅读 · 0 评论 -
上下跳动的箭头 css
在H5场景动画时,常常会用到着一样一个效果,箭头持续上下跳动来引导用户上下滑动整个页面<!DOCTYPE html ><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <tit转载 2019-01-10 09:49:22 · 3017 阅读 · 0 评论 -
这个比较高端了!CSS3动画帧数科学计算法
参考:http://www.uisdc.com/css3-animation-calculate CSS3动画帧数计算器:http://tid.tenpay.com/labs/css3_keyframes_calculator.html转载 2019-01-14 11:16:33 · 614 阅读 · 0 评论