随笔分类 - CSS

css 实现飞入效果

摘要：@keyframes flyInLeft { from{ opacity: 0; transform: translateX(-60%); } to{ opacity: 1; transform: translateX(0); } } .class { animation: flyInLeft 1s 阅读全文

posted @ 2023-08-10 14:17 幻影之舞阅读(325) 评论(0) 推荐(0) 编辑

如何让图片一直转-loading图片转起来

摘要：<div class="loading"> <img class="loadingImg" src="./img/about/loading.png" alt=""> </div> @-webkit-keyframes rotation{ from {-webkit-transform: rotat 阅读全文

posted @ 2023-07-24 16:31 幻影之舞阅读(76) 评论(0) 推荐(0) 编辑

css文本只显示两行，超出省略

摘要：overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; -webkit-line-clamp 可以把块容器中的内容限阅读全文

posted @ 2023-02-03 16:04 幻影之舞阅读(259) 评论(0) 推荐(0) 编辑

Css实现DIV铺满屏幕的几种方法

摘要：1. 第一种方式 div{ /* div的CSS样式 */ position : absolute; width : 100%; height : 100%; } *{ /* CSS Reset */ margin : 0; padding : 0; } a、给整个div设置一个绝对定位，然后给该阅读全文

posted @ 2022-12-06 10:57 幻影之舞阅读(15492) 评论(0) 推荐(0) 编辑

文字两端对齐

摘要：效果图： text-align: justify; text-align-last: justify; 阅读全文

posted @ 2022-11-22 16:17 幻影之舞阅读(77) 评论(0) 推荐(0) 编辑

如何让图片一直旋转

摘要：//找到图片所在div @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } //找到img标签 img { -webki 阅读全文

posted @ 2021-12-08 10:46 幻影之舞阅读(371) 评论(0) 推荐(0) 编辑