css3的常用小东西

为什么整理

为了方便

总结内容

1.如何修改点击手势

div{
	//1.1点击手势
	cursor: pointer;
	//1.2带指针手势
	cursor:alias;
	//1.3带问号手势
	cursor: help;
	//1.4加载手势
	cursor:progress;
}

2.如何画一个三角形

//正、倒三角
div {
  margin-top: 100px;
  width: 10px;
  height: 10px;
  border: 50px solid transparent;
  //border-top-color\border-bottom-color
  border-top-color: blue;
}
//向右、左三角
div{
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  //border-right、border-left
  border-right:15px solid blue;
}

3.水平居中方法

//自己做爸爸的
div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
//有爸爸的
.div {
    display: flex;
    justify-content: center;
    align-items: center;
}

4.文本超出显示…

//一行
div{
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
//多行
div{
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;}

5.IOS手机容器滚动条滑动不流畅

overflow: auto;
-webkit-overflow-scrolling: touch;

6.H5滑动问题

//h5滑动侧边栏
div{
	
}

7.animation 跳动的心

<div class="demo"></div>

@keyframes scaleDraw {
	/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0% {
	transform:scale(1);
	/*开始为原始大小*/
}
25% {
	transform:scale(1.1);
	/*放大1.1倍*/
}
50% {
	transform:scale(1);
}
75% {
	transform:scale(1.1);
}
}
.demo {
	width:200px;
	height:200px;
	background-color: red;
	-webkit-animation-name:scaleDraw;
	/*关键帧名称*/
  -webkit-animation-timing-function:ease-in-out;
	/*动画的速度曲线*/
  -webkit-animation-iteration-count:infinite;
	/*动画播放的次数*/
  -webkit-animation-duration:1s;
	/*动画所花费的时间*/
}

8.隐藏页面元素

display-none: （类似于vue中v-if）。
opacity-0: （元素仍存在并占据空间，透明度为0）。
visibility-hidden：（类似于vue中v-show）。

9.长按图片长按识别：

pointer-events: auto;

注：使用过程中，app端使用无效，需要采用

// app端保存图片
appSaveImg(imgSrc) {
	let source = GetBrowserEnvironment();
	if (source == 1) {
		window.app.appPosterShare(imgSrc);
	} else if (source == 2) {
		window.webkit.messageHandlers.appPosterShare.postMessage({ image: imgSrc });
	}
}

的方法

10.scss的简单使用、@mixin… @include…的使用等：

10.1 $变量使用
10.2@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
   @include 指令可以将混入（mixin）引入到文档中。
10.3 scss String(字符串) 函数
10.4 scss @extend 与 继承
10.5 H5端颜色主题变化时方法

10.1 变量使用

//做颜色主题等变量时使用
$blue: #324157;
$light-blue: #3a71a8;
$red: red;
$pink: #e65d6e;

10.2 @mixin… @include…的使用

//如何导入
@mixin home-audit-item {}
//如何引用
@include home-audit-item {}

10.3 Sass String(字符串) 函数

https://www.runoob.com/sass/sass-string-func.html

10.4 Sass @extend 与 继承

.button-report  {
  @extend .button-basic;
  background-color: red;
}

10.5 H5端颜色主题变化时方法

//默认颜色设置
/..
.部分主题设置.
../
//主题颜色值 rgba(255, 99, 48, 1);  #FFF2ED
:root {
  --color: rgba(255, 99, 48, 1); 
  --color2: rgba(255, 99, 48, 0.04);
}
//使用变化颜色.
//例如： @import "@/assets/styles/variables.scss"; color: var(--color);
//store里
let color ={
  themeColor: data.themeColor,
  themeStatus: 1
};
themeColorFunc(color)
/********/
//@supports使用方法 （检测浏览器是否支持该写法）
@supports (-webkit-mask: none) and (not (cater-color: var(--color))) {
  .login-container .el-input input {
    color: var(--color);
    background: transparent !important;
  }
}

10.6 去除ie edge的密码框默认出现的小眼睛

::v-deep .shpwd{
  /*去除ie edge的密码框默认出现的小眼睛
  给人添乱这一块，巨硬从来都没让我失望过*/
  input[type="password"]::-ms-reveal{
    display: none !important;
  }
  input[type="password"]::-ms-clear{
    display: none !important;
  }
  input[type="password"]::-o-clear{
    display: none !important;
  }
}

10.7解决浏览器记住账户密码自动填充背景颜色解决办法

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
	 -webkit-text-fill-color: var(--color) !important;
	 -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
	 background-color:transparent;
	 background-image: none;
	 transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
 }
 input {
    background-color:transparent;
 }

10.8 给添加个小窗口提示
给i、span、div等添加title可以增加一个小框提示
如下图样式：

<span title="置为失效"></span>

10.9 防止复制内容

/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/* Global values */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;

10.10 公共css的方法展示

@charset "utf8";
html, body, div, section, header, span, /* structural elements 结构元素 */
applet, object, iframe, /* 嵌入元素 */
h1, h2, h3, h4, h5, h6,  p, q, blockquote, pre,
a, abbr, address, acronym, big, cite, code,
del, s, strike,
dfn, em, font, img, ins, kbd, samp,
small, strong, sub, sup, tt, var,
dl, dt, dd, ul, li, /* list elements 列表元素 */
fieldset, lengend, form, label,
table, caption, tbody, tfoot, thead, tr, th, td, 
figure, button, input, textarea, hr,/* form elements 表单元素 */
th, td {
    /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}
address,
cite,
dfn,
em,
var,
i {
    font-style: normal;
} /* 将斜体扶正 */

code,
kbd,
pre,
samp,
tt {
    font-family: "Courier New", Courier, monospace;
} /* 统一等宽字体 */
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333333;
}
a:hover,
a:active {
    outline: none;
} /* 清除轮廓 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img {
    border: 0; /* 去除在 IE9/9 中出现的边框 */
    -ms-interpolation-mode: bicubic; /*解决ie7下图片缩放的失真问题*/
}

.fl {
    float: left;
}
.fr {
    float: right;
}
.blue {
    color: #1c90eb;
}
.red {
    color: red;
}
.g-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 11;
    .dialog_container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
    }
}
.empty_container {
    width: 3.613rem;
    text-align: center;
    margin: 0 auto;
    padding-top: 2rem;
    font-size: 0.427rem;
    color: #0d0d0d;
    line-height: 0.747rem;
    box-sizing: border-box;
    img {
        width: 100%;
    }
}
@font-face {
    font-family: "pingan";
    src: url("../font/pingan.ttf");
    font-weight: normal;
    font-style: normal;
}
.pingan-num {
    font-family: "pingan";
}
@font-face {
    font-family: "num";
    src: url("../font/num.otf");
    font-weight: normal;
    font-style: normal;
}

body {
    color: #261900;
    // background-color: #f6f7f8;
    font: 12px "PingFang SC", "Microsoft Yahei", "HanHei SC", "PingHei", "STHeitiSC-Light", "Helvetica Neue",
        "Helvetica", "Arial", sans-serif;
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -webkit-font-smoothing: antialiased;
    background: #f7f7f7;
    word-break: break-all;
}
body,
html {
    width: 100%;
}
html {
    background: transparent;
}
button,
input,
textarea {
    font: inherit;
    outline: none;
    border: none;
    background: transparent;
}
input,
textarea {
    background-color: transparent;
}
textarea {
    resize: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999999;
}
a,
button,
input,
textarea {
    -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}
.vux-popup-header-right {
    color: #0088fb !important;
}
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}

.clearfix {
    zoom: 1;
}

.editor_container {
    overflow: hidden;
    word-break: break-all;
}
.editor_container img {
    max-width: 100%;
}
// router animation css
.slide-fade-enter-active {
    transition: all 0.3s ease;
}

.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}

.slide-left-enter,
.slide-right-leave-active {
    opacity: 0;
    transform: translate(70%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
    opacity: 0;
    transform: translate(-70%, 0);
}
.van-overlay {
    z-index: 99;
}
img[lazy="error"] {
    background-image: url("https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/whaleBroker/product/broker-empty.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #f3f3f3;
    background-position: center;
}
img[lazy="loading"] {
    background-image: url("https://kaka-image-bucket.oss-cn-hangzhou.aliyuncs.com/whaleBroker/product/broker-empty.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #f3f3f3;
    background-position: center;
}

---

欢迎点赞收藏评论

---