随笔分类 - css

滚动条样式

摘要：// 滚动条宽、高 .table::-webkit-scrollbar { width: 6px; height: 10px; } // 默认滚动条背景色白色 .table::-webkit-scrollbar-thumb { background-color: white; border-radi 阅读全文

posted @ 2022-07-15 15:06 yw3692582 阅读(212) 评论(0) 推荐(0)

animate.css动画效果

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文

posted @ 2022-01-12 11:19 yw3692582 阅读(55) 评论(0) 推荐(0)

vivify.css动画效果

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文

posted @ 2022-01-12 11:13 yw3692582 阅读(391) 评论(0) 推荐(0)

css流光溢彩的button

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2022-01-04 21:59 yw3692582 阅读(171) 评论(0) 推荐(1)

vue的transition标签配合animate.css与vivify.css使用的方式

摘要：vue版本：v.2.5.2 <transition name="fade-box"> <div v-show="show" class="box"></div> </transition>.box { width: 200px; height: 200px; background-color: pi 阅读全文

posted @ 2021-12-29 16:36 yw3692582 阅读(167) 评论(0) 推荐(0)

3D旋转

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-12-27 20:11 yw3692582 阅读(28) 评论(0) 推荐(0)

css实现图片放大效果

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-12-26 23:08 yw3692582 阅读(601) 评论(0) 推荐(0)

css的transform移动、旋转、缩放动画

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-12-26 23:00 yw3692582 阅读(498) 评论(0) 推荐(0)

css伸缩栏

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-12-26 22:45 yw3692582 阅读(29) 评论(0) 推荐(0)

css的transition过渡效果

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-12-26 22:17 yw3692582 阅读(47) 评论(0) 推荐(0)

css三角形

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-12-26 21:59 yw3692582 阅读(36) 评论(0) 推荐(0)

css三角形升级（秒杀效果）

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-12-26 21:50 yw3692582 阅读(50) 评论(0) 推荐(0)

css一行显示不下用省略号

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-12-26 21:13 yw3692582 阅读(410) 评论(0) 推荐(0)

css三角形效果

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-12-26 21:00 yw3692582 阅读(37) 评论(0) 推荐(0)

css清除浮动

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-12-26 20:32 yw3692582 阅读(28) 评论(0) 推荐(0)

css四宫格、九宫格（grid实现）

摘要：1、HTML部分 <div class="parent"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></ 阅读全文

posted @ 2021-08-03 14:06 yw3692582 阅读(2260) 评论(0) 推荐(0)

图片叠加

摘要：<template> <div id="bg_img"> <img src="/static/img/pexels-pixabay-209831.jpg" alt="叠加图片" height="100%" width="100%" /> </div> </template> <script> exp 阅读全文

posted @ 2021-06-04 09:24 yw3692582 阅读(55) 评论(0) 推荐(0)

修改 input 光标颜色

摘要：<input id="input" type="text" /> input { caret-color: red; } 阅读全文

posted @ 2021-06-04 09:05 yw3692582 阅读(127) 评论(0) 推荐(0)

垂直水平居中div

摘要：// 第一种：grid布局 <div id="bg_img"> <div> <input type="text" /> </div> </div> // css #bg_img{ display: grid; place-items: center;　height:100vh; // 必须设置高度阅读全文

posted @ 2021-06-04 09:02 yw3692582 阅读(37) 评论(0) 推荐(0)