CSS样式
文章平均质量分 58
Jerry丶Hu_
写码三连
展开
-
Vue/uniapp实现沿Y轴旋转并切换正反面内容动画
效果图实现原理1、animation动画;2、position: abaolute;3、backface-visibility: hidden;实现代码uniapp请将px替换为upx,复制粘贴即可看到实际效果<template> <ul> <li v-for="(item, index) in list" :key="index"> <div v-for="(child, i) in item" :key="i">原创 2021-08-05 14:59:45 · 1536 阅读 · 0 评论 -
一个div+CSS实现环形图
效果图仅适合统计两个数据源,多个数据源或者复杂效果请使用ECharts实现原理利用CSS锥形渐变conic-gradient,以下是该属性兼容性代码(Vue)<template> <!-- data-xxx可实现CSS attr(data-xxx)获取值 --> <div class="circular" :style="style" :data-percent="percent" ></div></t原创 2021-06-10 09:53:54 · 1673 阅读 · 0 评论 -
vue-quick-calendar—Vue超实用日历组件(带示例图,注释超详细~)
效果图效果图如下,支持标记日期、点击日期、切换月份,复制即用,本示例为PC端,移动端请自行修改样式哦~一、Calendar组件代码,预处理器使用SCSS<template> <section class='m-calendar' :style="dateStyle"> <!-- 切换月份 --> <header class='changeMonth'> <span class='prepMonth' @click=原创 2021-01-28 11:13:56 · 7735 阅读 · 4 评论 -
Vue中使用contenteditable属性撸一个可以自动手动换行的输入框
写在前面有时候页面上需要一个类似于微信中发送消息的输入框,即可以实现:默认只有一行文字高度,用户输入超过自动换行,用户也可以点击Enter键盘换行,当输入的内容清空后,输入框又恢复成一行的高度,原生的输入框input和文本框textarea无法实现以上功能,所以就自己写了一个,采用HTML5的contenteditable属性,可以完美实现:1、自动换行及手动换行;2、双向绑定;3、类似于...原创 2020-03-23 13:14:09 · 2454 阅读 · 0 评论 -
Vue移动端树形控件实现(递归组件)
写在前面因项目中需要用到树形控件,第三方的组件也不满足项目的使用需求,就自己造了一个车轮子,用Vue递归组件的方式实现,代码简单易懂,直接复制即可使用。效果图子组件代码<template> <ul v-if="data.length"> <li v-for="(item, i) in data" :key="i" @click.stop="sel...原创 2020-03-14 15:48:20 · 9641 阅读 · 15 评论 -
Vue中双向绑定实现的表单选择组件(按钮样式)
写在前面表单中经常会用到选择框的组件,HTML自带的样式太丑了,第三方的组件也不满足自己的使用需求,而且样式也不好看,于是自己就撸了一个,代码很简单,可以实现单选和多选,且选择后不用再选择的数据对数据进行处理。我写的这个组件是按钮的样式,如果需要图标+文字的哪种,自行更改样式即可。效果图选择子组件代码<template> <div class="selectBtn...原创 2020-03-05 12:12:01 · 749 阅读 · 0 评论 -
css修改自带滚动条样式
写在前面浏览器自带的滚动条不太好看,短粗短粗的,我们可以通过css来更改它的样式显示效果代码实现::-webkit-scrollbar{ width: 4px; height: 10px;}::-webkit-scrollbar-button{ width: 0; height: 0;}::-webkit-scrollbar-track{}::-webkit-scro...原创 2019-05-30 15:48:57 · 574 阅读 · 0 评论 -
五种方法实现前端PC页面三栏布局(圣杯布局)
写在前面做PC端的小伙伴肯定遇到过需要实现三栏布局,即左右两侧宽度固定,中奖宽度自适应,而且这也是面试中经常会问到的问题,一般现在用到的会有五种解决方案,包括:浮动布局、绝对定位布局、flexbox布局、表格布局、网格布局显示效果代码实现这里我们将左右两侧宽度固定为300px,高度300px第一种——浮动布局 // HTML <div class="block"> ...原创 2019-05-30 16:36:04 · 1891 阅读 · 0 评论