CSS
文章平均质量分 66
yujin0213
这个作者很懒,什么都没留下…
展开
-
H5 iOS新机型适配
前言近期在做落地页优化项目中,针对iOS多种新机型(iPhone X之后的刘海屏)适配,有一些坑点,及适配相关的心得,在此记录一下问题落地页首屏页面要求铺满全屏,背景图撑满。之前设计稿都是750 * 1134,但是为了适配iPhone X(分辨率375 * 812)类的刘海屏手机,UI多出了一份750 * 1642的设计稿,那么页面首屏的高度需要是屏幕高度,背景图要按两套背景图来,而由于该项目里区分国家,所以一共是2套*3国,6套背景图解决方案方案一首屏dom高度设置为100vh .firs原创 2021-07-20 13:55:37 · 443 阅读 · 0 评论 -
rgba和opacity的区别及应用
一、rgba和opacity的区别 话不多说,先看代码,同样设置背景透明度,写法1: background: rgb(0,0,0); opacity: 0.5; 写法2: background: rgba(0,0,0,0.5); 不同之处在于,opacity属性的值,可以被其子元素继承,给父级div设置opacity属性,那么所有子元素都会继承这个属性,而RGBA原创 2017-12-21 11:45:05 · 4552 阅读 · 0 评论 -
水平垂直居中的几种方式
一、flex方式(适用于居中元素元素宽高未知)<body> <img src="images/myPage/avatar2.png"></body>html,body{ height: 100%; } body { display: flex; align-items: center; /原创 2017-12-21 22:14:10 · 2455 阅读 · 0 评论 -
CSS 图片边框的处理
一、边框高度固定,内容可滚动这种情况下,直接将整个边框切下来作为背景图,里面的内容设置固定高度,溢出部分设置overflow: scroll/auto 源码如下: html: "rule-wrapper"> "rule-content"> 转眼已经入冬了,时间太过迅驰,我和我的南方小城一样,总是慢吞吞地跟不上时节的节奏。原创 2018-01-17 11:23:44 · 7142 阅读 · 1 评论 -
父级overflow为scroll时,绝对定位的子元素会被隐藏或一起滚动
需求:父级边框固定,里面的内容滚动 由于是图片边框,于是我把边框的上下部分单独切图,中间重复部分平铺想要的效果图: 一开始的写法: html:div class="paradise-wrap"> div class="paradise">div>div>css: .paradise-wrap{ position: relativ原创 2018-01-18 10:58:29 · 16013 阅读 · 1 评论 -
CSS3 动画实现放大缩小、涟漪扩散效果、叠加图片循环来回显示
一、无限放大缩小,可以应用于跳动的气球等场景,效果如下 html部分div class="ballon">div>css部分 @keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1); /*开始为原始大小*/原创 2018-02-05 18:02:37 · 77946 阅读 · 11 评论 -
解决使用transform:rotate属性移动端页面可以左右滑动的现象
如下图,文字使用了transform:rotate属性,结果造成页面在移动端可以左右滑动。在排查问题时,按网上建议,在根元素html和body上加overflow:hidden,虽然在浏览器上无法滑动,但是到了移动端还是可以左右滑动,然后一层层排查,直到在使用了transform:rotate属性的元素父级(最近的position不为static的父级)加上overflow:hidd...原创 2018-07-13 15:44:42 · 5720 阅读 · 0 评论 -
CSS3 before、after伪元素实现气泡框
气泡框的原理其实也就是普通边框+三角形,CSS实现三角形也是利用了border属性 1、三角形是实心的html代码:<div class="wrap"></div>css代码: .wrap{ position: relative; width: 600px; hei...原创 2018-08-09 11:26:26 · 5190 阅读 · 0 评论 -
aos.js介绍及其在react项目中的使用
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,在页面往回滚动时,元素会恢复到原来的状态,demo演示链接:http://www.jq22.com/yanshi8150本文主要介绍aos.js在react项目中的使用,网上相关的博文较少,使用的时候踩了一些坑,所以记录一下。一开始按照网上的教程,在项目里引用了相关的css、js,在需要动画的元素上添加aos属性,但是滚动的时候始终出不来...原创 2018-11-26 11:48:04 · 3627 阅读 · 0 评论