CSS
文章平均质量分 71
算云烟
这个作者很懒,什么都没留下…
展开
-
文字横向滚动效果
该效果类似于街边广告牌文字横向滚动效果。原创 2023-07-20 14:05:39 · 195 阅读 · 0 评论 -
CSS3D-实现WebpackLogo
一、效果如下: 第一幅图为无透视距离效果 第二幅图增加了透视距离 二、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3D实现webpack-Logo</title> <style type="text/css"> @keyframes inner {原创 2021-08-27 16:48:30 · 149 阅读 · 0 评论 -
flex-grow与 flex-shrink计算规则
一、flex-grow的计算规则 首先给定一个弹性容器(宽800px)和几个弹性元素(宽100px) 分别设定前三个弹性元素的所占放大比例flex-grow为1,2,3 那么它们的计算规则如下: 首先计算flex-grow份数,即 1+2+3 = 6,共计6份 第一个li的宽度 = 自身原有宽度(100px) + 剩余空间(300px)*所占比例(1/6) = 100px + 50px = 150px; 第二三个li的计算规则与上述一致,所以分别为200px,250px 后两个li因为没有设定flex原创 2021-08-11 10:55:20 · 907 阅读 · 1 评论