css
刘斩仙的笔记本
业精于勤,荒于嬉;行成于思,毁于随。
展开
-
vue高仿立体卡片效果(第三版)
组件如图所示:使用方法<template> <div class="Home w100 h100"> <!-- tab切换 start --> <tab-card :data="tabArr" class="ml15 mr15 pt15" @tabClick="tabChange"> <p class="pl15 pr15 pt15 pb15" v-show="tabIndex == 0">原创 2022-03-05 11:03:50 · 950 阅读 · 0 评论 -
vue高仿立体卡片效果(第二版)
组件如图所示:下载地址:TAB组件原创 2022-03-05 10:46:24 · 690 阅读 · 0 评论 -
vue组件利用css var(--变量)实现动态修改伪类属性(::before、::after)
如图所示:#1:我们可以利用此属性实现vue组件动态传值,修改例如:::before、::after等,伪类的背景色,背景图等属性值。因为vue利用无法直接在css中使用data里的变量,利用var(–变量名),以及style中定义变量(其实此步是模仿:root{})方能修改。动态切换主题也可利用此方式实现,由后端返回图片地址,以及颜色主题。#2:常规使用方式,但是很尴尬,人们并不喜欢这样写。只有系统性,需要大量修改重复css属性,才会用到这个。代码如下:(复制另存txt,修改.html直原创 2022-01-21 15:44:19 · 10234 阅读 · 1 评论 -
vue高仿立体卡片效果(第一版)
如图所示:代码如下:(复制另存txt,修改.html直接运行)<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue高仿立体卡片效果</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/i原创 2021-12-23 16:52:06 · 1552 阅读 · 0 评论 -
神奇得BUG:谷歌中div存在,但是不显示,非display非opacity非position
前言:早上刚到公司,同事mac电脑不展示我新写的模块,起初以为是position,flex兼容问题。用了另外一个mac,升级了谷歌浏览器到同一个版本,发现没有问题。解决:遂,用同事电脑排查,竟发现使用position:fixed;z-index:10000;都不行。大惊!啊这是什么史诗级bug。删除所有class属性,也不行,最后我删了class类名,好家伙,显示了。class=“adBox ml10”,我连忙问同事是不是装了谷歌广告屏蔽插件,一问还真是开了几个屏蔽广告插件,这这这,把我写的模块当原创 2021-06-07 09:56:46 · 375 阅读 · 0 评论 -
三角,梯形备忘
介绍:记录,备忘。1.向下的三角.corner{ width: 0px; height: 0px; border: .10rem solid #DBDFD6; border-bottom-color: transparent; border-left-color: transparent; border-right-c...原创 2019-04-02 13:01:09 · 139 阅读 · 0 评论 -
css3+jq制作百分比圆环,扇形图(两种颜色)
代码如下:<html><head> <meta charset="UTF-8"> <title>扇形绘制</title> <style> .muscle { position: relative; width: 200px; height: 200px; bord原创 2017-12-15 09:12:08 · 8584 阅读 · 0 评论 -
鼠标经过特效
鼠标经过小特效<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> li{ list-style: none; width: auto;原创 2017-10-24 14:58:21 · 765 阅读 · 0 评论 -
CSS3动画、图形
一、水滴 二、跳动的心 三、旋转图片 四、3D旋转文字<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .q{margin: 20px 30px;position: relative;}原创 2017-10-24 16:10:46 · 270 阅读 · 0 评论 -
如何用js给css3中的属性和jquery中的animate动态传值
代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> <script src="jquery-1.11.3.js" type="text/javascript"></script><style> .line{ width:400px; height:10px; trans原创 2017-07-23 14:49:05 · 4055 阅读 · 0 评论 -
css3垂直居中
给父框加上该属性,其子元素全部垂直居中。div{ display: flex; align-items: center; /*定义元素垂直居中*/ justify-content: center; /*定义元素水平居中*/ }原创 2017-07-23 12:29:38 · 308 阅读 · 0 评论 -
ie8+清除浮动hack 和 ie下position定位hack
在ie8+有效:div:after{ /*IE8+清除浮动*/ content:''; display: table; clear:both;}在ie下: 在定位元素上加一个空div<div></div>/*解决定位问题*/<div style="position:absolute;top:0;"></div>原创 2017-07-23 12:23:05 · 894 阅读 · 0 评论