一些常用的CSS效果

原创文章
声明：作者声明此文章为原创，未经作者同意，请勿转载，若转载，务必注明本站出处，本平台保留追究侵权法律责任的权利。
全栈老韩
全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。

一、文本相关

1.1 一行缩略

css 复制代码 
  .name {
        margin-left: 4px;
        font-size: 10px;
    
        max-width: 80px;

        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

1.2 多行缩略

css 复制代码 
    .des {
      margin-top: 20px;
      font-size: 12px;

      max-width: 50%;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

二、动画相关

###2.1 平移或者缩放

css 复制代码 
transform: translateY(20px);

transform: rotate(45deg);

2.2 应用动画

css 复制代码 
.card-normal {
  opacity: 0;
  transform: rotate(45deg);
}

.card-addAnimation {
  opacity: 1;
  transition: opacity transform .3s;

  // 或者应用所有的变化
  // transition: all 0.3s;
}

2.3 关键帧动画

css 复制代码 
	.loading {
		animation: loading-android 1s 0s linear infinite;
	}
  
	@keyframes loading-android {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(180deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

三、高斯模糊

这个需要对标签<image src="" />这样的或者<video src="" />这样的标签才会生效，普通div不会应用高斯模糊效果。

css 复制代码 
.avatar {
  filter: blur(16px);
}

四、hover动画

css 复制代码 
.name-normal {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
}

.name-normal:hover {
  font-size: 22px;
  color: rgba(0, 0, 0, 1);
}

五、scss相关

5.1 如果是在vue中引入xxx.scss样式文件

vue 复制代码 
<style lang="scss" scoped>
@import '../../static/style/global.scss'
</style>

5.2 常用的“/”除法现在很多scss会warning

由于斜线/的除法，会让人很困惑，所以dart-scss就引入了新的写法：

global.scss 复制代码 
  @use "scss:math";
  $card-ratio: math.div(218, 390);

然后就可以在vue的style模块进行引入了

xxx.vue 复制代码 
<style lang="scss" scoped>
@import '../../static/style/global.scss'

.image {
  height: calc(100% * $card-ratio);
}
</style>
发布于2024-06-08 11:22:17
浏览量245·
评论列表
全栈老韩·
还有滚动条隐藏等，一般设置 overflow-x: scroll; overflow-y:hidden; scrollbar-width: none;