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，很少看博客，对你有帮助别忘记点赞收藏。