css实现印章效果

效果代码实现直白的说就是两个有boder的圈，字体相对圈圈绝对定位，倾斜使用到transform的rotate属性。下面展示一些内联代码片。// 页面<view style="margin-bottom: 20rpx;position: relative;"><view class="tui-col-12" style="display: flex;"><view

蓝白白白白白

7598人浏览 · 2021-04-14 14:34:14

蓝白白白白白 · 2021-04-14 14:34:14 发布

效果

在这里插入图片描述

代码实现

直白的说就是两个有boder的圈，字体相对圈圈绝对定位，倾斜使用到transform的rotate属性。下面展示一些 内联代码片。

// 页面
<view style="margin-bottom: 20rpx;position: relative;">
	<view class="tui-col-12" style="display: flex;">
		<view class="tui-col-4 tui-center dotted" style="font-size: 60rpx;color: #fff;">
			<span style="font-size: 40rpx;">&yen;</span>20
		</view>
		<view class="tui-col-8 fcss"
			style="background-color: #fff;height: auto;padding: 20rpx;border-bottom: 4rpx dotted rgba(185, 185, 185,.3);">
			<view>新用户注册赠券</view>
			<view style="color: #B4B4B4;font-size: 26rpx;">2021.08.12 23：59到期</view>
			<view style="margin-top: 40rpx;color: #B4B4B4;font-size: 26rpx;">使用说明
				<tui-icon color="#B4B4B4" name="arrowdown" :size="16"></tui-icon>
			</view>
		</view>
	</view>
	<view class="tui-col-12 fcss" style="background-color: #fff;height: auto;">
		<view
			style="table-layout: fixed;word-wrap: break-all;word-break: pre-wrap;overflow: hidden;margin: 15rpx;font-size: 26rpx;color: #B4B4B4;">
			*本券为新用户注册奖励赠券
		</view>
	</view>
	<!-- 印章效果 -->
	<view class="seal" style="position: absolute;right: 10rpx;top: 14rpx;">
		<view class="seal-son">
			<span style="position: absolute;top: 32rpx;text-align: center;font-size: 35rpx;transform: rotate(-45deg);right: 40rpx;color: #B4B4B4;font-weight: 900;">已使用</span>
			<span style="position: absolute;top: 66rpx;text-align: center;font-size: 20rpx;transform: rotate(-45deg);left: 40rpx;color: #B4B4B4;">2021.08.09 23:59</span>
		</view>
	</view>
</view>

.seal{
	width: 160rpx;
	height: 160rpx;
	border: solid 6rpx #B4B4B4;
	border-radius: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.seal-son{
	width: 145rpx;
	height: 145rpx;
	border: solid 2rpx #B4B4B4;
	border-radius: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	position: relative;
}