css3
前端酱紫
这个作者很懒,什么都没留下…
展开
-
用css写进度条
用css写进度条我们平时写进度条一般是一个父div包裹一个子div,用js控制子div的宽度 实现进度条,我们现在可以用css简单实现进度条了。代码如下:在vue项目里咱们只需要控制数字就行了,非常简单方便<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2020-12-20 15:28:44 · 6896 阅读 · 5 评论 -
前端 伸缩盒子布局 神器 display:flex
前端布局神器display:flex2009年,W3C提出了一种新的方案--Flex布局,可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。flex浏览器支持一、Flex布局是什么?Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{...原创 2020-05-03 20:57:52 · 541 阅读 · 0 评论 -
淘宝flexible 分析源码
淘宝flexible 分析源码// 立即执行函数 (function() {})() 或者 (function() {} ())// 主要作用:创建一个独立的作用域,里面所有的变量都是局部变量,避免了命名冲突问题// 立即执行函数不需要调用,立马能够自己执行(function flexible (window, document) { // 获取html的根元素 var docEl = document.documentElement // dpr 是物理像素比 var dpr =原创 2020-06-12 02:57:37 · 305 阅读 · 0 评论 -
css电池充电效果-低配版
css电池充电效果主要用到了:渐变、c3动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2021-03-04 09:02:52 · 448 阅读 · 2 评论 -
vue列表项吸顶 js+css两种 骚操作
先看下想要的效果,在列表里 滑动到哪个日期的时候,哪个日期就吸顶用js的方法思路,获取每一项item的底部距离顶部的高度,把所有的高度放在一个数组里面,在去循环比对,看我们滑动的距离在数组的哪个区间里,在哪个区间就展示展示那个日期,上代码:<template> <div class="box"> <div class="titleTimeStyle">日期 {{ titleTime }}</div> <div class="l原创 2021-01-11 12:55:30 · 563 阅读 · 0 评论 -
直播css小动画
直播css小动画做需求的时候 UI出了一个icon是一个直播的动画,我本以为这个是ui出一个gif图的,结果她让我写个动画,本来向怼她的,但是转念一想我也没做过这样的动画,就试试呗。大概就是这么个玩意儿:上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w原创 2021-01-10 22:52:08 · 894 阅读 · 6 评论 -
用css写loading
用css写loading我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形,然后给这个元素设置一个border-radius值为50%。需要注意的是,border-radius: 50%是让整个正方形元素都变成圆形,即包括边框和内容区。所以我们可以通过控制元素边框和内容区的大小,将元素的内容区域作为内圆,将元素的边框区域作为外圆,从而绘制出一个圆环。<div class="loading-css"></div>.loading-css { width: 5原创 2021-01-03 19:58:02 · 694 阅读 · 0 评论 -
图片色调旋转滤镜 filter: hue-rotate
图片色调旋转滤镜<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .bird .原创 2020-09-19 14:40:34 · 2541 阅读 · 0 评论 -
移动端右侧滚动条压在footer/top之上怎么办?
未成功的效果:成功的效果:总结:使用 calc(100vh - 160px); 减去 顶部和底部高度之和 就很好的解决的这个滚动条压在顶部/底部的问题。上才艺:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2020-08-18 23:57:58 · 328 阅读 · 0 评论 -
给盒子左上和右下加边框角
给盒子左上和右下加边框角<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .bo原创 2020-06-30 03:20:47 · 980 阅读 · 1 评论 -
flex 布局 盒子居中显示
flex 布局 盒子居中显示display: flex;justify-content: center;align-items: center;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box原创 2020-06-26 15:08:44 · 2626 阅读 · 0 评论 -
flex布局,最后一行靠左显示
flex布局,最后一行靠左显示// 最后一行靠左显示flex-wrap: wrap;align-content: flex-start;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {原创 2020-06-26 15:02:27 · 4960 阅读 · 0 评论 -
c3动画 地图 重要信息闪烁
c3动画 地图 重要信息闪烁<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 150px; height: 150px;原创 2020-06-26 12:17:26 · 255 阅读 · 0 评论 -
c3动画 衔接动画,一个执行完下一个
c3动画 衔接动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <原创 2020-06-26 12:10:32 · 550 阅读 · 0 评论 -
1.cs3 多动画盒子旋转 0%-100% ,2.动画 使用 from to
cs3 多动画盒子旋转<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l原创 2020-06-26 12:05:26 · 352 阅读 · 0 评论 -
css3动画 魔方 无限滚动
c3动画 魔方 无限滚动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2020-06-26 11:59:26 · 253 阅读 · 0 评论 -
css3 清除浮动的方法推荐使用
css3 清除浮动的方法推荐使用<div class="content"> <div class='incont'></div></div><style>.content { width: 120px; margin: 30px; padding: 25px; background-color: #81b0db;}.incont { float: right; width: 50px原创 2020-06-01 23:01:13 · 132 阅读 · 0 评论 -
vue css 修改第三方样式 使用样式穿透 >>> /deep/
vue css 修改第三方样式 使用样式穿透 >>> /deep/不废话 自测有两种方法:注意:lange=‘scss’ 使用第二种方法 有些Sass 之类的预处理器无法正确解析 >>> 可以使用 /deep/ 操作符( >>> 的别名)直接f12 查找对应的类名 在style里面给类名加 颜色 使用css样式穿透 >...原创 2020-05-01 12:38:04 · 2754 阅读 · 0 评论 -
伪类 和伪元素 你混淆了吗?
伪类 太监 1.一个冒号 2.可以有多个 3.可在前 或在后 4.基于DOM,不产生新对象 (太监不能生育) 伪类: 状态类::link :visited :hover :active :focus 结构类::first-child :last-child :nth-child :nth-of...原创 2020-03-28 04:45:02 · 174 阅读 · 0 评论