买不到"梦中情蓉"，索性亲手画一个，用CSS画一个雪容融~
雪容融（Shuey Rhon Rhon），是2022年北京冬季残奥会的吉祥物，其以灯笼为原型进行设计创作，主色调为红色，头顶有如意环与外围的剪纸图案，面部带有不规则形状的雪块，身体可以向外散发光芒。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l
买不到"梦中情墩"，索性亲手画一个，用CSS画一个冰墩墩~
vue-transition 动画效果（fade, top, bottom, left, right）
<template> <div> <transition name='fade'> <div v-if='goodSkuFlag' class='sku-shadow'></div> </transition> <transition name
v-touch导致移动端无法上下滑动问题
记录一个小问题, vue 引用组件v-touch 导致html无法上下滚动原 因当引用v-touch时, html标签默认会添加一个 touch-action: none; 属性一 touch-action定义: 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）二 touch-action属性: (IE10之前不支持)1 . auto 默认值, 浏览器
Animate.css文字抖动以及模糊问题
传送门 => Just-add-water CSS animations - Animate.css 1 . 在该动画的transform里加上translateZ(0)值,能解决文字抖动的问题，但是没解决文字模糊的问题。 2 . 在发生文字模糊的地方加上transform: translate3d(0,0,0)，解决文字模糊以及的问题。 使用scale发生文字抖动及模糊时，在该文字
关于IOS移动端下网页滑动不流畅问题
-webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果body { overflow:auto; -webkit-overflow-scrolling:touch; }-webkit-overflow-scrolling: touch; 当手
原生JS实现移动端Touch轮播图
核心代码function $(id){return document.getElementById(id);} var isMove = false, // 判断是否滑动过 startR = 0, // 初始移动距离 changeR = 0, // 滑动距离，与startR比较，大于40px即为右滑 // 绑定滑动事件 var box = $('your element
chrome滑动报‘preventDefault inside passive event listener ’错误
报错提示Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>.解决方案1 . 在touch的事件监听方法上绑定第三个参数{ passive: false }，通过传递 passive 为 false 来明确告诉浏览器：事件处理程序调
Safari 定位fixed下，z-index层级失效问题
一、Safari是新时代的IE61 . Safari font-size的px单位和vm单位计算不支持，需要是百分比单位2 . Safari 渐变，从#fff到transparent会有灰色带，其他浏览器都是白色到透明3 . Safiari 伪元素hover时候的currentColor不渲染....二、position时，z-index层级失效 Safari 3D变换会忽略z-index的层级
JS实现 li 呈圆形平均分布
<ul class="container"> <li class="dot"></li> //dot中心远点 <li class="box"></li> <li class="box"></li> &l