css
关注
分享
扫一扫
文章平均质量分 59
css
这个杀手好冷
这个作者很懒，什么都没留下…
展开
-
css简易收缩展开动画
代码】css简易收缩展开动画。原创 2022-08-04 17:01:44 · 3113 阅读 · 0 评论 -
CSS实现滚动高度自动变小的粘滞效果
一、先看下效果如下 MP4 视频示意（不动点击播放），可以看到默认页面的 header 头部元素高度挺高的，随着滚动的进行，头部固定定位了，同时高度也变小了，减小对页面高度的占用。眼见为实，您可以狠狠地点击这里：头部标题导航高度自动伸缩demo如何实现的呢？二、双 Sticky 粘性定位需要悬浮固定的元素内外两层嵌套，假设如下HTML代码：<header> <header-inner> ... </header.原创 2022-04-25 14:32:24 · 550 阅读 · 0 评论 -
使用CSS revert全局关键字还原display显示元素,展开更多内容
一、需求与问题描述需求：列表默认最多显示3项，点击更多按钮显示剩余列表项。于是有CSS如下：li:nth-child(n+4) { display: none;}原创 2021-06-08 14:19:35 · 2356 阅读 · 2 评论 -
掌握 CSS Grid 布局
固定宽度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t..原创 2021-02-28 19:16:38 · 135 阅读 · 1 评论 -
css 跑马灯
<template> <div class="info-bar"> <div class="infobar-item"><span>@测试员一号</span></div> <div class="infobar-item"><span>测试文本，使用vuecli实现抖音App</span></div> <div class="infobar-item m.原创 2021-01-26 00:13:07 · 209 阅读 · 0 评论 -
CSS 文字背景水印
在实际开发中，有时候希望文字内容可以作为背景图片显示，一方面是希望利用背景图片的优势，例如可以平铺，另外一方面是常见的替换元素不能使用伪元素创建文字，此时只能寄希望与背景图。关键如何把文字变成背景图呢？通常CSS开发人员的做法是把文字导出来转换成图片，然后作为背景图显示，但是这样成本有些高，也不利于日后的维护。这里给大家介绍一种实用的技术，可以让文字作为CSS背景图片。一、SVG本质上就是一个图像SVG虽然是XML语言构成的，但是本质上就是一个图像，是可以作为图像使用的，例如：&l原创 2021-01-17 14:23:24 · 5852 阅读 · 0 评论 -
纯CSS实现微信列表左滑显示按钮的交互效果
一、实现效果示意这个效果大家应该都见过，左滑对话列表，会显示藏在后面的按钮，iOS微信可以看到这种交互效果，大家手上如果有iPhone手机，可以试试。在Web中，是可以纯CSS实现几乎一致的交互效果的。下面一步一步来。二、滚动、绝对定位与按钮显示如果大家认为看过《CSS世界》，应该知道CSS中绝对定位元素有这么一个特性：绝对定位元素的包含块在滚动容器之外，那么这个容器滚动的时候，绝对定位元素是不会跟着滚动的。所以，如果我们希望列表左滑的时候背后按钮显示，只需要：每个列原创 2021-01-17 13:56:33 · 1127 阅读 · 1 评论 -
解决图片变形问题，按比例缩放
上传头像的时候遇到了头像变形的问题，最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。object-fit理解CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：cover, contain等。object-fit也是类似的，但还是有些差异，具体有5个值：.fill { object-fit: fill; }.contain { object-fit:.原创 2020-10-15 09:12:38 · 1044 阅读 · 0 评论 -
css3实现瀑布流
html<div class="box-wrapper"> <div style="margin-top:0px" class="box"></div> <div class="box spe"></div> <div class="box spe"></div> <div class="box spe"></div> <div class="box原创 2020-06-17 09:40:58 · 409 阅读 · 0 评论 -
CSS3--底部菜单上拉效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>底部菜单上拉效果</title> <style> *{ margin: 0; } .wrap{ width: 12...原创 2020-06-16 11:54:43 · 1166 阅读 · 0 评论 -
css向上滚动跑马灯
<div class="in_scro"> <div class="in_scrview">林先生130****2212已申请免费量房</div> <div class="in_scrview">谢先生130****2342已申请免费量房</div> <div class="in_scrview">周先生130****...原创 2020-03-24 14:50:56 · 1525 阅读 · 0 评论 -
CSS选择第奇数或偶数的元素
:nth-of-type(odd){} 奇数行 :nth-of-type(even){} 偶数行原创 2019-02-25 17:45:37 · 9229 阅读 · 0 评论