CSS常遇到自适应高度动画、带三角气泡阴影一行样式解决

效果图

.wxml

复制代码
<!-- 滤镜阴影 -->
<view class="container dropShadow" />
<!-- 盒子阴影 -->
<view class="container boxShadow" />
<!-- 文本阴影 -->
<view class="textShadow">换日线</view>
<!-- 自适应高度过渡动画 -->
<button bind:tap="updateDrop">{{drop?'收起':'展开'}}</button>
<view class="clipPath {{drop?'clipPathAction':''}}">
  <text>https://blog.csdn.net/qq_43764578\n占位\n占位\n占位\nhttps://blog.csdn.net/qq_43764578\n占位\n占位\n占位</text>
</view>

.wxss

复制代码
page{text-align: center;}
.container{
  width: 300rpx;
  height: 100rpx;
  border-radius: 20rpx;
  background: #99CCFF;
  position: relative;
  margin: 100rpx auto 0;
}
.container::after{
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right-color: #99CCFF;
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
.dropShadow{
  filter: drop-shadow(0 0 10rpx red);
}
.boxShadow{
  box-shadow:0 0 10px red;
}
.textShadow{
  text-shadow: 0 0 2px red;
  margin: 100rpx auto 50rpx;
}
.clipPath{
  background: #99CCFF;
  padding: 30rpx;
  box-sizing: border-box;
  width: 600rpx;
  margin: 30rpx auto 0;
  clip-path: inset(0 0 100% 0);
  transition: all 0.3s;
}
.clipPathAction{
  clip-path: inset(0 0 0 0);
}

.js

复制代码
Page({
  data: {
    drop:false
  },
  updateDrop(){
    this.setData({
      drop:!this.data.drop
    })
  },
})

遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。

相关推荐
3秒一个大26 分钟前
掌握 Stylus:让 CSS 编写效率倍增的预处理器
css
inx17726 分钟前
深入理解 CSS 弹性布局:从传统布局到 Flex 的优雅演进
css·flexbox
笨笨狗吞噬者2 小时前
【uniapp】小程序体积优化,分包异步化
前端·微信小程序·uni-app
白兰地空瓶2 小时前
用 Stylus 写 CSS 有多爽?从响应式面板案例看透它的优雅
css·stylus
计算机学姐3 小时前
基于微信小程序的奶茶店点餐平台【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
叫我詹躲躲3 小时前
CSS Flex 布局比 float 更值得学
css·flexbox
有点笨的蛋5 小时前
重新理解 Flexbox:让布局回归“弹性”的本质
前端·css
小着5 小时前
微信小程序组件中二维码生成问题解决方案
前端·微信小程序
sen_shan5 小时前
《微信小程序》第六章:参数定义与管理
微信小程序·小程序
他们叫我秃子9 小时前
从 0 到 1,我用小程序 + 云开发打造了一个“记忆瓶子”,记录那些重要的日子!
前端·微信小程序·小程序·云开发