<!-- 我希望这里做一个展开 收缩 -->帮我做一个 展开收缩 展示量行文字就行
<template>
<view class="wrap">
<fu-loading v-if="isShowLoading"></fu-loading>
<block v-else>
<view v-for="item in lists">
<view class="fu-goods-line pr" @tap.stop="handleJumpDiy" style="width:calc(100% - 20px)"
data-type="navigateTo" :data-url="`/pages/mine/newsDetail/newsDetail?id=${item.id}`">
<image v-if="item.is_top == 1" src="https://apps.xiaodan01.com/xcx/home/top_ico.png" mode="widthFix"
class="zd"></image>
<view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom" style="width:100%">
<view class="blogger__item">
<view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
<view class="justify__author__info">
<view class="tn-flex tn-flex-row-center">
<view style="display: flex; flex-wrap: nowrap;">
<view class="">
<image :src="item.head_img" style="width:48px;height:48px;border-radius: 24px;"></image>
</view>
<view class="tn-padding-right tn-text-ellipsis"
style="width: 250px;margin-left: 10px;">
<view style="display: flex;align-items: center;">
<view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-ellipsis" style="margin-left:3px"
:style="item.is_pingtai == 1 ? 'color:#f37b1d' : ''">{{ item.user_nickname }}</view>
<image v-if="item.is_pingtai == 1" style="width:31rpx;" src="https://apps.xiaodan01.com/xcx/images/rz.png" mode="widthFix"></image>
<image v-if="item.is_pingtai == 0 && item.user_level_img != ''" style="width:31rpx;" :src="item.user_level_img" mode="widthFix"></image>
</view>
<view style="color:#999;">{{ item.create_time }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="flex blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left">
<view class="blogger__desc__label tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
<text class="blogger__desc__label--prefix" style="color: #1172f4;">#</text>
<text class="tn-text-df" style="color: #1172f4;">{{ item.name }}</text>
</view>
<text class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ item.title }}</text>
</view>
<!-- 我希望这里做一个展开 收缩 -->
<view class="flex blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left">
<text class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ item.body_txt }}</text>
</view>
<block v-if="item.images">
<view class="tn-padding-top-xs"
style="padding-top: 5px; display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; position: relative;">
<!-- 遍历图片列表 -->
<block v-if="item.images">
<view class="tn-padding-top-xs"
style="padding-top: 5px; display: flex; width: 100%; flex-wrap: wrap; position: relative;" :style="item.images.length == 2 ? '' : 'justify-content: space-between'">
<block v-for="(image_item, image_index) in item.images" :key="image_index"
@tap.stop="multiImagePreview(image_item, item.images)">
<view v-if="image_index < 6" style="position: relative" :class="item.images.length === 4 ? 'fourGridStyle' :
(item.images.length === 5 ? (image_index < 3 ? 'fiveGridStyleA' : 'fiveGridStyleB') : 'defaultStyle')" :style="item.images.length == 2 ? 'margin-right:5px' : ''">
<image class="blogger__main-image" :src="image_item"
mode="aspectFill" :class="(image_index === 5 && item.images.length > 6) ? 'imageBaseStyle blurStyle ' : 'imageBaseStyle'"></image>
<!-- +号显示保持原样 -->
<view v-if="image_index === 5 && item.images.length > 6" class=""
style="position: absolute; right:0;top:0px; width: 100%; height: 100%; background: rgb(0 0 0 / 53%); border-radius: 8px; text-align: center;line-height: 120px;font-size: 25px;color:#fff;">
+{{item.images.length - 5}}
</view>
</view>
</block>
</view>
</block>
</view>
</block>
<view class="text-999" style="font-size: 24rpx;" v-if="item.show_price != ''">
交易价格：
<text class="fyjg">
{{item.show_price}}元
</text>
</view>
<view
style="display: flex; justify-content: space-between; align-items: center; color: #999;font-size: 20rpx;">
<view class="justify-content-item tn-color-gray tn-text-center">
<view class="">
<text class="blogger__count-icon tn-icon-message"></text>
<text class="tn-padding-right">{{ item.comment_num }}评论</text>
<text class="blogger__count-icon tn-icon-like"></text>
<text class="">{{ item.user_like_num }}点赞</text>
</view>
</view>
<view class="justify-content-item tn-flex tn-flex-col-center">
<image :src="STATIC_URL+'delxx.png?v=1'" mode="widthFix" class="dele" v-if="item.is_me == 1" @tap.stop="delFabu(item.id)"></image>
<text class="tn-color-gray"
v-if="item.click_count > 0">{{item.click_count}}人浏览</text>
</view>
</view>
</view>
</view>
</view>
</view>
</block>
<view class="" style="height: 50px;"></view>
<uni-load-more v-if="lists.length > 1" :status='status'></uni-load-more>
<fu-empty-ui emptyImage="nodata" v-if="lists.length == 0 && !isShowLoading" pagingListNoListDataText=""></fu-empty-ui>
<uTabbar v-model="current" :list="list" :mid-button="true" :hide-tab-bar="true" :mid-button-size="110"
:height="110" :icon-size="48" active-color="#3370EB" inactiveColor="#333333" @change="changeTab"></uTabbar>
</view>
</template>
<script>
import uTabbar from '@/components/u-tabbar/u-tabbar.vue';
import {
tabbarList
} from '@/common/utils/tabbar.js'; // 导入函数
export default {
components:{
uTabbar
},
props: {
num: {
type: Number,
default: 10
},
is_collect: {
type: Number,
default: 0
},
isHome: {
type: Number,
default: 0
},
titleNone: {
type: String,
default: '最新发布'
},
cid: {
type: Number / String,
default: 0
},
my_user_id: {
type: Number / String,
default: 0
},
cityName: {
type: String,
default: ''
},
districtName: {
type: String,
default: ''
},
showTitle: {
type: Boolean,
default: true
},
model: {
type: String,
default: 'inline'
},
keywords: {
type: String,
default: ''
},
showInline: {
type: Boolean,
default: false
}
},
data() {
return {
list: tabbarList(),
current: 0,
content: [{
userAvatar: '',
userName: '',
date: '',
label: [''],
desc: '',
content: '',
mainImage: [],
collectionCount: 431,
commentCount: 26,
likeCount: 84
}],
navList: [{
id: 0,
text: '最新',
num: 0,
}, ], // 切换列表
type: 0,
lists: [],
status: 'more',
page: 1,
size: 10,
isInit: false,
isShowLoading: false,
};
},
methods: {
changeTab(type){
console.log(type,'type’');
if(type == 0){
this.refresh() //加载首页
}else if(type == 1){
//发布
this.goUrl()
}else if(type == 2){
//个人中心
}
},
goUrl(){
if(!global.token){
this.toLoginDiy()
return false
}
// 因为只能获取到一级名称 所以还是 跳转过去吧
console.log(this.thisCid)
if(this.thisCid == 5){
console.log('招聘求职 外侧没意义');
}else{
//其他论坛内容
uni.navigateTo({
url:'/pages/mine/publish/publish'+'?is_bianmin=0&id='+this.thisCid+'&title='+this.name
})
}
},
delFabu(_id) {
let that = this
this.$util.showModal({
title: '确认删除?',
content: '删除后不可恢复',
success: res => {
if (res.confirm) {
that.$api.post(global.apiUrls.delFabu, {
id: _id
}).then(res => {
that.$message.info(res.data.msg)
if (res.data.code == 1) {
setTimeout(function() {
that.refresh() //重新加载
}, 800);
}else{
}
});
}
}
});
},
// 改造为返回样式对象
getImageStyle(index, images) {
const totalImages = images.length;
let width = "32%";
if (totalImages === 4) {
width = "49%";
} else if (totalImages === 5) {
width = index < 3 ? "32%" : "49%";
}
// 返回对象格式（关键修改）
return {
width: width,
height: '210rpx',
'margin-bottom': '5px',
'border-radius': '8px',
position: 'relative'
};
},
// 模糊样式改造
getImageBlurStyle(index, images) {
// 返回对象格式
return index === 5 && images.length > 6 ? {
filter: 'blur(2px)',
width: '100%',
height: '100%',
'border-radius': '8px'
} : {
width: '100%',
height: '100%',
'border-radius': '8px'
};
},
tabClick(e) {
if (this.flag) {
return false
}
let index = e.index;
this.type = this.navList[index].id;
this.refresh()
},
loadData() {
console.log('加载');
if (this.status != 'more') return;
this.status = "loading";
if (this.page == 1) {
this.isShowLoading = true;
}
var data = {
is_luntan: 1,
type: 2, //列表
city_name: this.cityName,
district_name: this.districtName,
page: this.page,
category_id: this.cid,
my_user_id:this.my_user_id,
list_rows: this.size,
keyword: this.keywords,
is_home: this.isHome,
is_collect:this.is_collect
}
console.log(data, '首页论坛data');
if (global.token && global.userInfo) {
data.user_id = global.userInfo.id
}
console.log("首页论坛请求接口参数-", data)
var that = this
this.$api.post(global.apiUrls.homeList, data).then(res => {
// console.log('首页论坛请求接口result',res);
this.isShowLoading = false;
if (res.statusCode == 200 && res.data.code == 1) {
res = res.data;
console.log("论坛列表", res);
var totalSize = res.data.total;
var curPageData = res.data.data;
if (this.page == 1) this.lists = [];
this.lists = this.lists.concat(curPageData);
if (this.lists.length < totalSize) {
this.status = "more";
this.page++;
} else {
this.status = "noMore";
}
}else{
this.$message.info(res.data.msg)
}
this.isInit = true;
uni.stopPullDownRefresh();
})
.catch((err) => {
this.isShowLoading = false;
console.log("ERROR", err);
uni.stopPullDownRefresh();
});
},
refresh() {
this.page = 1;
this.status = 'more';
this.lists = [];
this.loadData();
}
},
}
</script>
<style lang="scss" scoped>
.dele{
width: 30rpx;
margin-right: 4px;
}
.fyjg{
color:$moneyJin
}
// 3图模式
.defaultStyle{
width: 32%;
height: 210rpx;
margin-bottom: 5px
}
// 4图模式
.fourGridStyle{
width: 49%;
height: 210rpx;margin-bottom: 5px
}
// 5图模式（前3后2）
.fiveGridStyleA{
width: 32%;
height: 210rpx
}
.fiveGridStyleB{
width: 49%;
height: 210rpx;
margin-top: 5px;
}
// 图片基础样式
.imageBaseStyle{
width: 100%;
height: 100%;
border-radius: 8px
}
.blurStyle{
filter: blur(2px);
width: 100%;
height: 100%
}
.wrap {
width: 100%;
.title {
height: 100rpx;
line-height: 100rpx;
image {
width: 48rpx;
height: 32rpx;
margin: 0 24rpx;
}
}
.content {
padding: 0 20rpx;
}
}
.nav-bar-wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.sort-wrap {
position: fixed;
left: 0;
right: 0;
}
.height-100 {
height: 100rpx;
}
.block-180 {
width: 180rpx;
min-width: 180rpx;
height: 180rpx;
min-height: 180rpx;
position: relative;
image {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.null {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 8rpx;
background-color: rgba(0, 0, 0, 0.45);
color: #ffffff;
font-size: 36rpx;
text-align: center;
line-height: 180rpx;
}
}
.list-item+.list-item {
border-top: 1rpx solid #eeeeee;
}
.overlay-animate {
position: fixed;
}
.float-action {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
// background-color: rgba(165, 165, 165, .85);
position: fixed;
right: 20rpx;
bottom: 280rpx;
z-index: 996;
border: 1rpx solid #cccccc;
.cuIcon-cart {
color: #cccccc;
}
}
.animate {
position: fixed;
border-radius: 50%;
z-index: 995;
transform-origin: 50% 50%;
transition: transform linear 0.5s, left linear 0.5s, top cubic-bezier(0.3, -0.2, 1, 0) 0.5s !important;
image {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
}
// 商品卡片line
.fu-goods-line {
/* min-height: 570rpx; */
// padding: 24rpx 0;
border-radius: 16rpx;
background-color: #ffffff;
// margin-top: 20rpx;
display: flex;
// border-bottom: 1rpx solid #EEEEEE;
margin-bottom: 24rpx;
width: calc(100% - 20px);
margin: 10px;
.block-246 {
// padding: 24rpx 24rpx 0;
.img {
width: 140rpx;
height: 140rpx;
border-radius: 6rpx;
background-color: #eeeeee;
}
}
.content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
// 商品卡片block
.fu-goods-block {
overflow: hidden;
margin-bottom: 20rpx;
padding: 0 10rpx;
.wrap-box {
background-color: #ffffff;
border-radius: 16rpx;
.square-wrap {
width: 100%;
height: 0;
padding-bottom: 100%;
box-sizing: border-box;
position: relative;
.square-box {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 16rpx 16rpx 0 0;
image {
width: 100%;
height: 100%;
border-radius: 24rpx 24rpx 0 0;
}
}
}
.image {
width: 100%;
border-radius: 24rpx 24rpx 0 0;
}
}
.content {
padding: 20rpx;
}
}
.item-activity-label {
padding: 2rpx 5rpx;
/* margin: 5rpx; */
font-size: 24rpx;
border-radius: 6rpx;
border: 1px solid;
margin: 0rpx 1px 0px;
display: inline-block;
transform: scale(0.8);
}
.search-form {
margin-left: 12rpx;
}
.item-goods-label {
padding: 4rpx 10rpx;
margin-right: 10rpx;
height: 32rpx;
background: rgba(255, 239, 239, 1);
border-radius: 4px;
color: #ff6464;
font-size: 24rpx;
text-align: center;
width: 84rpx;
}
.item-activity-label {
padding: 0 8rpx;
height: 32rpx;
line-height: 30rpx;
border: 1px solid #FA2033;
opacity: 1;
border-radius: 4rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 400;
color: #FA2033;
margin-right: 16rpx;
&:nth-of-type(1) {
border: 1px solid #0A7CE6;
color: #0A7CE6;
}
}
.padding-lr-24 {
padding: 0 24rpx;
}
.padding-lr-4 {
padding: 0 4rpx;
}
.sales-number {
margin-top: 16rpx;
}
.through-price {
margin-left: 16rpx;
color: #BFBFBF;
}
::v-deep .solid-bottom::after {
border-bottom: 0;
}
.pr {
position: relative;
}
.zd {
position: absolute;
z-index: 1;
width: 30px;
top: 0;
left: 0
}
.car {
width: 104rpx;
height: 104rpx;
position: fixed;
right: 28rpx;
bottom: 300rpx;
background: url(https://apps.xiaodan01.com/xcx/car-s.png);
background-size: 100% 100%;
}
// new
.template-circle {
max-height: 100vh;
}
.tn-tabbar-height {
min-height: 120rpx;
height: calc(140rpx + env(safe-area-inset-bottom) / 2);
}
/* 自定义导航栏内容 start */
.custom-nav {
height: 100%;
&__back {
margin: auto 5rpx;
font-size: 40rpx;
margin-right: 10rpx;
margin-left: 30rpx;
flex-basis: 5%;
}
&__search {
flex-basis: 60%;
width: 100%;
height: 100%;
&__box {
width: 100%;
height: 70%;
padding: 10rpx 0;
margin: 0 30rpx;
border-radius: 60rpx 60rpx 0 60rpx;
font-size: 24rpx;
}
&__icon {
padding-right: 10rpx;
margin-left: 20rpx;
font-size: 30rpx;
}
&__text {
color: #AAAAAA;
}
}
}
.logo-image {
width: 60rpx;
height: 60rpx;
position: relative;
margin-top: -15rpx;
}
.logo-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 50%;
}
/* 自定义导航栏内容 end */
/* 博主头像 start*/
.image-circle {
// padding: 95rpx;
width: 190rpx;
height: 190rpx;
font-size: 40rpx;
font-weight: 300;
position: relative;
}
.image-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 10rpx;
}
/* 文章内容 start*/
.blogger {
&__item {
padding: 30rpx;
}
&__author {
&__btn {
margin-right: -12rpx;
opacity: 0.5;
}
}
&__desc {
line-height: 55rpx;
&__label {
padding: 0 20rpx;
margin: 0rpx 18rpx 0 0;
&--prefix {
color: #00FFC8;
padding-right: 10rpx;
}
}
&__content {}
}
&__content {
margin-top: 18rpx;
padding-right: 18rpx;
&__data {
line-height: 46rpx;
text-align: justify;
overflow: hidden;
transition: all 0.25s ease-in-out;
}
&__status {
margin-top: 10rpx;
font-size: 26rpx;
color: #82B2FF;
}
}
&__main-image {
border-radius: 16rpx;
&--1 {
max-width: 80%;
max-height: 300rpx;
}
&--2 {
max-width: 260rpx;
max-height: 260rpx;
}
&--3 {
height: 212rpx;
width: 100%;
}
}
&__count-icon {
font-size: 40rpx;
padding-right: 5rpx;
}
&__ad {
width: 100%;
height: 500rpx;
transform: translate3d(0px, 0px, 0px) !important;
::v-deep .uni-swiper-slide-frame {
transform: translate3d(0px, 0px, 0px) !important;
}
.uni-swiper-slide-frame {
transform: translate3d(0px, 0px, 0px) !important;
}
&__item {
position: absolute;
width: 100%;
height: 100%;
transform-origin: left center;
transform: translate3d(100%, 0px, 0px) scale(1) !important;
transition: transform 0.25s ease-in-out;
z-index: 1;
&--0 {
transform: translate3d(0%, 0px, 0px) scale(1) !important;
z-index: 4;
}
&--1 {
transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
z-index: 3;
}
&--2 {
transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
z-index: 2;
}
}
&__content {
border-radius: 40rpx;
width: 640rpx;
height: 500rpx;
overflow: hidden;
}
&__image {
width: 100%;
height: 100%;
}
}
}
/* 文章内容 end*/
/* 间隔线 start*/
.tn-strip-bottom {
width: 100%;
border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/
/* 广告内容 start */
.ad-image {
width: 80rpx;
height: 80rpx;
position: relative;
}
.ad-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 20%;
}
/* 自定义导航栏内容 end */
/* 全屏轮播 start*/
.card-swiper {
height: 100vh !important;
}
.card-swiper swiper-item {
width: 750rpx !important;
left: 0rpx;
box-sizing: border-box;
overflow: initial;
}
.card-swiper swiper-item .swiper-item {
width: 100%;
display: block;
height: 100vh;
border-radius: 0rpx;
transform: scale(1);
transition: all 0.2s ease-in 0s;
overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item {
transform: none;
transition: all 0.2s ease-in 0s;
}
.card-swiper swiper-item .swiper-item-png {
margin-top: -50vh;
width: 100%;
display: block;
border-radius: 0rpx;
transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
transition: all 0.6s ease 0s;
// overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item-png {
margin-top: -100vh;
width: 900rpx;
transform: translate(-80rpx, 0rpx) scale(1, 1);
transition: all 0.6s ease 0s;
}
.image-banner {
display: flex;
align-items: center;
justify-content: center;
}
.image-banner image {
width: 100%;
}
/* 轮播指示点 start*/
.indication {
z-index: 9999;
width: 100%;
height: 36rpx;
position: fixed;
// display:flex;
display: block;
flex-direction: row;
align-items: center;
justify-content: center;
}
.spot {
background-color: #000;
opacity: 0.3;
width: 10rpx;
height: 10rpx;
border-radius: 20rpx;
margin: 20rpx 0 !important;
left: 95vw;
top: -60vh;
position: relative;
}
.spot.active {
opacity: 0.6;
height: 30rpx;
background-color: #000;
}
/* 资讯主图 start*/
.image-article {
border-radius: 8rpx;
border: 1rpx solid #F8F7F8;
width: 200rpx;
height: 200rpx;
position: relative;
}
.image-pic {
background-size: cover;
background-repeat: no-repeat;
// background-attachment:fixed;
background-position: top;
border-radius: 10rpx;
}
.article-shadow {
border-radius: 15rpx;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
/* 文字截取*/
.clamp-text-1 {
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
.clamp-text-2 {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
/* 标签内容 start*/
.tn-tag-content {
&__item {
display: inline-block;
line-height: 35rpx;
padding: 5rpx 25rpx;
&--prefix {
padding-right: 10rpx;
}
}
}
/* 图标容器9 start */
.icon9 {
&__item {
width: 30%;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
margin: 20rpx 10rpx;
transform: scale(1);
transition: transform 0.3s linear;
transform-origin: center center;
&--icon {
width: 110rpx;
height: 110rpx;
font-size: 65rpx;
border-radius: 50%;
margin: 20rpx 40rpx;
position: relative;
z-index: 1;
&::after {
content: " ";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: inherit;
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
}
}
}
}
/* 悬浮 */
.tnxuanfu {
animation: suspension 3s ease-in-out infinite;
}
@keyframes suspension {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.8rem);
}
}
/* 悬浮按钮 */
.button-shop {
width: 90rpx;
height: 90rpx;
display: flex;
flex-direction: row;
position: fixed;
/* bottom:200rpx;
right: 20rpx; */
left: 5rpx;
top: 5rpx;
z-index: 1001;
border-radius: 100px;
opacity: 0.9;
}
/* 按钮 */
.edit {
bottom: 300rpx;
right: 75rpx;
position: fixed;
z-index: 9999;
}
.pa,
.pa0 {
position: absolute
}
.pa0 {
left: 0;
top: 0
}
.bg0 {
width: 100rpx;
height: 100rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bg1 {
width: 100%;
height: 100%;
}
.hx-box {
top: 50%;
left: 50%;
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
}
.hx-box .pr {
width: 100rpx;
height: 100rpx;
transform-style: preserve-3d;
animation: hxz 20s linear infinite;
}
@keyframes hxz {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
.hx-box .pr .pa0 {
width: 100rpx;
height: 100rpx;
/* border: 4px solid #5ec0ff; */
border-radius: 1000px;
}
.hx-box .pr .pa0 .span {
display: block;
width: 100%;
height: 100%;
background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc4.png) no-repeat center center;
background-size: 100% 100%;
animation: hx 4s linear infinite;
}
@keyframes hx {
to {
transform: rotate(360deg);
}
}
.hx-k1 {
transform: rotateX(-60deg) rotateZ(-60deg)
}
.hx-k2 {
transform: rotateX(-30deg) rotateZ(-30deg)
}
.hx-k3 {
transform: rotateX(0deg) rotateZ(0deg)
}
.hx-k4 {
transform: rotateX(30deg) rotateZ(30deg)
}
.hx-k5 {
transform: rotateX(60deg) rotateZ(60deg)
}
.hx-k6 {
transform: rotateX(90deg) rotateZ(90deg)
}
</style>
最新发布
扫一扫
3946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
