![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
Astar_小白的成长之路
小白要坚持写博客,嗯。
展开
-
使用animation实现文字无限横向滚动
需求若文字长度不超过容器宽度,则不滚动, 反之滚动(复制一遍文字,让滚动无缝衔接)。匀速滚动(运动时间 = 路程 / 速度)。监听resize事件,结合防抖throttle,触发后重新计算是否需要滚动。实现<template><div> <div class="notice" ref="container"> <p ref="notice">{{notice}}</p> </div></div&g原创 2021-04-05 14:44:03 · 1082 阅读 · 0 评论 -
CSS3——CSS3矩阵matrix进行2D变换的数学原理
css3的2D转换中matrix接受6个参数,却可以实现平移、旋转、放缩、斜切四种效果。它是如何做到的呢?预备知识:矩阵相乘先将matrix接受的六个参数记为a,b,c,d,e,f,该变换矩阵记为二维平面上一个点记为(x,y),为了与向量区分开,我们使用数字1代表点,0代表向量,则二维平面上一个点应记为(x,y,1),为了使该点经过变换后依旧为(x,y,1)的形式,矩阵可以改为进行相乘...原创 2018-10-05 15:08:28 · 1837 阅读 · 4 评论 -
css3——实现点击波纹效果
&amp;amp;lt;button class=&amp;quot;btn ripple&amp;quot;&amp;amp;gt;Button&amp;amp;lt;/button&amp;amp;gt;.btn { position: relative; margin: 0 auto; width: 200px; height: 50px; line-height: 5原创 2018-10-03 17:33:39 · 6283 阅读 · 0 评论 -
css布局——双飞翼布局和圣杯布局
双飞翼布局和圣杯布局都将界面分为左中右三部分,中间部分是主体部分。圣杯布局实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <styl原创 2017-08-23 18:31:26 · 726 阅读 · 0 评论 -
css布局——文档流布局、浮动布局
1. 文档流布局想理解文档流布局首先得有几个概念的认识:行内元素、块级元素、行内块级元素行内元素在文档流中从左到右排列,每个行内元素只占自己内容得以存活的空间,常见的行内元素有:<span>、<a>、<strong>等 <!DOCTYPE html><html> <head> <meta cha...原创 2017-08-23 20:23:00 · 493 阅读 · 0 评论 -
css-css3属性整理
背景background简写顺序background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground: #ffffff url(&amp;amp;amp;amp;amp;quot;img_tree.png&amp;amp;amp;amp;amp;quot;) repeat-x fixed right top;文本属性原创 2018-10-03 16:42:36 · 313 阅读 · 2 评论 -
sass的基本使用
变量:使用 $ 符号开头,在SASS中定义的变量,除了可以在样式中直接引用之外,还可以对变量进行一些基本的数学运算,而且还可以在一些有用函数中引用。$color:#000;body{color:$color;background-color:#fff;}适用情况:定义主题皮肤等嵌套选择器嵌套 SASS中选择器的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承。比如说,...原创 2018-06-15 16:31:46 · 258 阅读 · 0 评论 -
前端面试题目整理——css篇
1.css选择器 CSS选择器:id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel=”external”])、伪类选择器(a:hover, li:nth-child)原创 2019-01-21 04:00:09 · 651 阅读 · 0 评论 -
css——各种属性不定期更新
css中white-space的属性值很容易搞混,事实上分为三个部分分析会简单很多,即遇到多个连续空格和tab是否处理为一个遇到换行符是否保留文本超出容器宽度时候是否自动换行整理为表格如下 空格和tab换行符文本超出容器宽度normal折叠去除换行nowrap折叠去除不换行pre保留保留不换行pre-wrap保留保留换行pre-line折叠保留换行为链接设置不同的样式我们知道链接有四种状态: a:...原创 2018-03-03 10:38:43 · 503 阅读 · 0 评论 -
css——文本强制两行超出就显示省略号
1. 强制一行的情况很简单overflow:hidden;//超出的隐藏text-overflow:ellipsis;//省略号white-space:nowrap;//强制一行显示 2. 如果要强制两行的话,得用到css3的知识overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-...原创 2017-09-07 15:09:48 · 49186 阅读 · 0 评论