[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fmApVNyRM789egWx3EDxqDFonxgjgp8MFW3abhHkk-KY":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":12,"notice":12,"visitCount":37,"commentCount":17,"keywords":38},114,"2024-06-08T11:22:17.245Z","一些常用的CSS效果","## 一、文本相关\n### 1.1 一行缩略\n```css\n  .name {\n        margin-left: 4px;\n        font-size: 10px;\n    \n        max-width: 80px;\n\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n```\n\n### 1.2 多行缩略\n```css\n    .des {\n      margin-top: 20px;\n      font-size: 12px;\n\n      max-width: 50%;\n\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n```\n\n## 二、动画相关\n###2.1 平移或者缩放\n```css\ntransform: translateY(20px);\n\ntransform: rotate(45deg);\n```\n\n### 2.2 应用动画\n```css\n.card-normal {\n  opacity: 0;\n  transform: rotate(45deg);\n}\n\n.card-addAnimation {\n  opacity: 1;\n  transition: opacity transform .3s;\n\n  // 或者应用所有的变化\n  // transition: all 0.3s;\n}\n```\n\n### 2.3 关键帧动画\n```css\n\t.loading {\n\t\tanimation: loading-android 1s 0s linear infinite;\n\t}\n  \n\t@keyframes loading-android {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t50% {\n\t\t\ttransform: rotate(180deg);\n\t\t}\n\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n```\n\n## 三、高斯模糊\n> 这个需要对标签`\u003Cimage src=\"\" />`这样的或者`\u003Cvideo src=\"\" />`这样的标签才会生效，普通div不会应用高斯模糊效果。\n```css\n.avatar {\n  filter: blur(16px);\n}\n```\n\n## 四、hover动画\n```css\n.name-normal {\n  font-size: 16px;\n  color: rgba(0, 0, 0, 0.5);\n}\n\n.name-normal:hover {\n  font-size: 22px;\n  color: rgba(0, 0, 0, 1);\n}\n```\n\n## 五、scss相关\n### 5.1 如果是在vue中引入`xxx.scss`样式文件\n```vue\n\u003Cstyle lang=\"scss\" scoped>\n@import '../../static/style/global.scss'\n\u003C/style>\n```\n\n### 5.2 常用的“/”除法现在很多scss会warning\n由于斜线/的除法，会让人很困惑，所以`dart-scss`就引入了新的写法：\n```global.scss\n  @use \"scss:math\";\n  $card-ratio: math.div(218, 390);\n```\n然后就可以在vue的`style`模块进行引入了\n```xxx.vue\n\u003Cstyle lang=\"scss\" scoped>\n@import '../../static/style/global.scss'\n\n.image {\n  height: calc(100% * $card-ratio);\n}\n\u003C/style>\n```\n\n\n","这篇文章把我常用的一些css效果的相关代码贴出来，方便自行取用，免得再到处搜索了。","",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[28],{"id":29,"createAt":30,"content":31,"articleId":7,"userId":13,"user":32,"replyToUid":33,"replyToUser":34,"status":17,"statusDes":12,"replies":36},10,"2024-06-15T05:12:04.17Z","还有滚动条隐藏等，一般设置 overflow-x: scroll;  overflow-y:hidden;   scrollbar-width: none;",{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":12,"createdAt":20},0,{"phone":12,"userId":33,"nickName":12,"vipType":33,"avatar":12,"sign":12,"createdAt":35},"0001-01-01T00:00:00Z",null,260,"html css,js css,html css,css,css效果"]