css
_freely
这个作者很懒,什么都没留下…
展开
-
原生js实现拖拽、缩放功能
原生js实现拖拽、缩放功能效果如下图代码实现html<div id="box"> <img class="bgimage" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg&refer=http%3A%2F%2Ffile02.16suc原创 2021-11-25 22:49:54 · 1497 阅读 · 0 评论 -
vue实现极简swiper
极简swiper效果图HTML<template> <div class="swiperModule"> <div class="swiper_container"> <div class="slide_item" :style="{transform: `translateX(${ 300 * (index - (activeIndex - 1)) }px) scale(${index === (activeIndex原创 2021-06-30 21:49:43 · 166 阅读 · 0 评论 -
vue动态滑入动画
从左侧滑入最新信息的动画动画效果代码实现父组件,定时器模拟推入消息<children :infoList='debtBerthWarnList'></children >setInterval(()=>{ // 这里去掉最后的补充数据 that.debtBerthWarnList.pop(); // 模拟接口数据 let list = [{ warnType: 1, areaN原创 2021-06-29 22:12:34 · 707 阅读 · 0 评论 -
fixed定位层级高于absolute定位的层级,absolute定位元素反而在上面,不能被覆盖
fixed定位 zindex=100,absolute定位 zindex=20,absolute定位的元素在fixed定位的元素上面现象说明 fixedzindex > absolutezindex// a元素样式.leftChild { position: absolute; left: 0; top: 0; z-index: 20;}// b元素样式.rightChild { position: fixed; left: 0; top: 0; z-index: 100;原创 2020-10-21 23:13:16 · 6207 阅读 · 0 评论 -
H5使用flex+百分比实现自适应
项目效果图效果图代码实现效果图代码实现html结构<div class="out"> <div class="box"> <div class="item"> <img src="img/bus.png" class="icon-img" alt="" /> <p class="icon-text">微...原创 2020-04-29 23:53:22 · 786 阅读 · 1 评论 -
pointer-events css控制点击穿透事件
如果有这样的场景,点击页面上飘动的雪花,触发雪花下面的元素的事件,下面的CSS特性有惊喜官方文档是这么介绍的pointer-eventsCSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的target。/* Keyword values */pointer-events: auto;pointer-events: none;pointer-even...原创 2019-12-18 20:23:17 · 736 阅读 · 0 评论 -
vue之组件封装图片的放大、拖拽
组件封装<template> <div class="bigImgBox" ref="maskBox" @mousedown="onmousedown"> <img :src="srcPath" alt="加载失败" :style="{'width': imgW + 'px','height': imgH + 'px','top':...原创 2019-07-30 21:06:45 · 1813 阅读 · 0 评论 -
css控制输入框大小写
实现输入框,输入小写字母自动转大写,很多同学都会立即想到用js实现<input type="text" v-model="value" @change="value = value.toUpperCase()">其实还有更简单的方法,css即可实现.uppercase { text-transform:uppercase}在...原创 2019-03-30 17:31:41 · 1121 阅读 · 0 评论 -
css控制显示几行并出现省略号
控制出现几行以后出现省略号text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;控制几行-webkit-line-clamp: 2;-webkit-box-orient: vertical;原创 2018-06-27 18:03:28 · 536 阅读 · 0 评论 -
未知宽高的盒子水平垂直居中的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-06-27 17:57:09 · 942 阅读 · 0 评论