![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
她还会来吗
长夜将至,我从今开始守望
展开
-
仿小米logo切换
今天看博客的时候发现类似于小米logo切换的效果,所以就心血来潮,写下这篇博客,。 话不多说直接上代码了 冲冲冲!!!! 运行效果 伪元素实现 该方法主要在于为盒子设置伪元素,并给伪元素设置背景,利用hover实现伪元素的切换,从而实现滑动效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl原创 2021-04-15 23:51:49 · 309 阅读 · 0 评论 -
CSS背景属性
背景属性 背景图片位置 参数是方位名词, /* 如果是方位名词 right center和center right 效果是等价的 跟顺序没有关系 如果第二个参数省略 默 认垂直居中显示*/ background-position: center right; 如果指定的两个值都是方位名词,则两个值前后顺序无关 如果只指定了一个方位名词,另一个值省略,则第二个值默认默认居中对齐 background-position:center; 参数是精确单位 如果参数是精确坐标,那原创 2021-04-14 14:03:35 · 87 阅读 · 0 评论 -
css3动画
动画(animation) 动画的基本使用 定义动画 @keyframes 动画名称{ /* 1. 可以做多个状态的变化keyframe关键帧 */ /* 2. 里面的百分比要是整数 */ 0%{ background-position: 0 0; } 100%{ background-position: -3800px 0;原创 2021-04-08 21:11:46 · 87 阅读 · 0 评论 -
css文本溢出 so easy~
单行文本溢出 <style> div{ width: 300px; height: 80px; margin: 100px auto; background-color: lightblue; /* 强制一行内显示文字 */ white-space: nowrap; /* 用省略号替代超出文字 */原创 2021-03-27 21:52:52 · 73 阅读 · 0 评论 -
css三角形
CSS三角做法 等腰三角形 <style> .box{ width: 0; height: 0; line-height: 0; font-size: 0; border-color: red pink green blue; border-style: solid; border-width: 10px; } </style> <body> <div class="box">原创 2021-03-16 10:09:30 · 74 阅读 · 0 评论