vue+css3 旋转木马效果

最新推荐文章于 2024-07-03 12:41:46 发布
置顶 最新推荐文章于 2024-07-03 12:41:46 发布
阅读量1.7k 收藏 4
点赞数
分类专栏： vue 经验分享 html+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leng0920/article/details/114593775
版权
经验分享 同时被 3 个专栏收录
149 篇文章 1 订阅
订阅专栏
vue
136 篇文章 4 订阅
订阅专栏
html+css
113 篇文章 1 订阅
订阅专栏

${ASSET_HOST}为封装的统一的图片路径 

<template>
<!-- :style="{backgroundImage: 'url(' + `${ASSET_HOST}/main_bg.jpg` + ')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}" -->
    <div class="index">
    <div class="index-bg" :style="{backgroundImage: 'url(' + `${ASSET_HOST}/main_bg.jpg` + ')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}">
        <div class="title-box">
            <a href="javascript:;" class="tips-btn">
                <img :src="`${ASSET_HOST}/tips_icon.png`" class="btn-img" alt="">
            </a>
            <div class="title1">
                <img :src="`${ASSET_HOST}/title_icon1.png`" class="title-icon1" alt="">
            </div>
            <div class="title2">
                <img :src="`${ASSET_HOST}/title_icon2.png`" class="title-icon2" alt="">
            </div>
            <a href="javascript:;" class="win-record-btn">
                <img :src="`${ASSET_HOST}/win_record_icon.png`" class="win-record-img" alt="">
            </a>
         
        </div>
        <div class="lottery-area">
            <div class="red-envelope-wall">
              <div class="red-envelope-img-panel" >
                <div class="red-envelope-img-for" v-for="(item,index) in imgList" :key="index">
                  <img class="red-envelope-red-envelopes"  :src="item.img" alt="">
                  <img class="red-envelope-draw" :src="`${ASSET_HOST}/draw.png`" alt="">
                  <img class="red-envelope-hand" :src="`${ASSET_HOST}/hand.png`" alt="">
                </div>
              </div>
            </div>
        </div>
        <div class="lottery-time">
            剩余：6次
        </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'index',
    components: {},
    data() {
        return {
        imgList:[
            {id:1,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:2,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:3,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:4,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:5,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:6,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:7,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:8,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:9,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
     
            ],
            showDialog: false,
        };
    },
    computed: {},
    watch: {},
    methods: {
     showPopup() {
      this.showDialog = true;
      setTimeout(() =>{
       document.body.querySelector('.paper').style = ' top: calc(50% - 100px);'
      },100);
     },
    },
 
    }
</script>
<style lang='scss' scoped>

.index{
    width: 100%;
    height: 100vh;
    background: linear-gradient(0deg, #F19D60,#FBE7D1, #FDF7E9);
    .index-bg{
     height: 100vh;
     position: relative;
    }
   
    .title-box{
        padding-top: 51px;
        position: relative;
        .tips-btn{
            display: block;
            width: 40px;
            height: 41px;
            position: absolute;
            left: 37px;
            top: 33px;
            .btn-img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .win-record-btn{
            display: block;
            width: 150px;
            height: 150px;
            position: absolute;
            right: 4px;
            top: 10px;
            .win-record-img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .title1{
            width: 421px;
            height: 159px;
            margin: auto;
            .title-icon1{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .title2{
            width: 715px;
            height: 176px;
            margin:0 auto;
            margin-top: -10px;
            .title-icon1{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
    .lottery-area{
        // margin-top: 100px;
        // height: 507px;
        // background: #ff000066;
    }
    .lottery-time{
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 60px;
        text-align: center;
        font-size: 38px;
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
        color: #FFFFFE;
        line-height: 468px;
        text-shadow: 0px 2px 4px rgba(219, 143, 33, 0.53);
        background: linear-gradient(180deg, #F7F3B5 0%, #FAE260 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    @keyframes an1{
        0%{
            transform: rotateY(0deg)  ;
        }
        50%{
            transform: rotateY(180deg)  ;
        }
        100%{
            transform: rotateY(360deg) ;
        }
    }
    // 注释现有的运用此代码可使旋转木马旋转120度停一下后继续旋转,不断循环
    // @keyframes an1{
        // 0% {
        //     transform: rotateY(0deg);
        // }
        // 23% {
        //     transform: rotateY(120deg);
        // }
        // 33% {
        //     transform: rotateY(120deg);
        // }
        // 56% {
        //     transform: rotateY(240deg);
        // }
        // 66% {
        //     transform: rotateY(240deg);
        // }
        // 89% {
        //     transform: rotateY(360deg);
        // }
        // 100% {
        //     transform: rotateY(360deg);
        // }
    // }
    .red-envelope-wall{
        // margin: 100px auto;
        // perspective: 3000px; //设置元素被查看位置的视图
        perspective: 600px;
       
    }
    .red-envelope-img-panel{
        transform-style: preserve-3d;
        animation: an1 18s linear 0s infinite;
    }
    .red-envelope-img-for{
        width: 182px;
        height:260px;
        margin: auto;
        top:280px;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
      
    }
    .red-envelope-red-envelopes{
        width: 100%;
        height: 100%;
        
    }
    .red-envelope-draw{
        width: 136px;
        height: 135px;
        position: absolute;
        top: 60px;
        left: 25px;
    }
    .red-envelope-hand{
        width: 122px;
        height: 114px;
        position: absolute;
        top: 130px;
        left: 80px;
    }
    .red-envelope-img-for:nth-child(1){
        transform: rotateY(0deg) translateZ(250px);
    }
    .red-envelope-img-for:nth-child(2){
        transform: rotateY(40deg) translateZ(250px);
    }
    .red-envelope-img-for:nth-child(3){
        transform: rotateY(80deg) translateZ(250px);
    }
    .red-envelope-img-for:nth-child(4){
        transform: rotateY(120deg) translateZ(250px);
    }
    .red-envelope-img-for:nth-child(5){
        transform: rotateY(160deg) translateZ(250px);
    }
    .red-envelope-img-for:nth-child(6){
        transform: rotateY(200deg) translateZ(250px);
    }
    .red-envelope-img-for:nth-child(7){
        transform: rotateY(240deg) translateZ(250px);
    }
    .red-envelope-img-for:nth-child(8){
        transform: rotateY(280deg) translateZ(250px);
    }
    .red-envelope-img-for:nth-child(9){
        transform: rotateY(320deg) translateZ(250px);
    }
 
}
</style>

参考文章链接: https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

3d轮播图链接:https://www.cnblogs.com/cquptzy/p/7610207.html

三个div轮流旋转:

<template>
  <!-- :style="{backgroundImage: 'url(' + `${ASSET_HOST}/main_bg.jpg` + ')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}" -->
  <div class="index">
    <figure class="icon-cards">
      <div class="icon-cards__content">
          <div class="icon-cards__item"></div>
          <div class="icon-cards__item"></div>
          <div class="icon-cards__item"></div>
      </div>
  </figure>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
    
    };
  },
  computed: {},
  watch: {},
  created () {
     
  },
  mounted () {
  },
  
};
</script>
<style lang='scss' scoped>

.index {
  .icon-cards {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 190px;
    height: 210px;
    -webkit-perspective: 800px;
    perspective: 800px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.icon-cards__content {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-182px) rotateY(0);
    transform: translateZ(-182px) rotateY(0);
    -webkit-animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
    animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
}
.icon-cards__item {
    position: absolute;
    top: 0;
    left: 0;
    width: 190px;
    height: 210px;
    border-radius: 6px;
}
.icon-cards__item:nth-child(1) {
    background: rgba(252, 192, 77, 0.9);
    -webkit-transform: rotateY(0) translateZ(182px);
    transform: rotateY(0) translateZ(182px);
}
.icon-cards__item:nth-child(2) {
    background: rgba(49, 192, 204, 0.9);
    -webkit-transform: rotateY(120deg) translateZ(182px);
    transform: rotateY(120deg) translateZ(182px);
}
.icon-cards__item:nth-child(3) {
    background: rgba(166, 55, 12, 0.9);
    -webkit-transform: rotateY(240deg) translateZ(182px);
    transform: rotateY(240deg) translateZ(182px);
}
@-webkit-keyframes carousel {
    0%, 17.5% {
        -webkit-transform: translateZ(-182px) rotateY(0);
        transform: translateZ(-182px) rotateY(0);
    }
    27.5%,
    45% {
        -webkit-transform: translateZ(-182px) rotateY(-120deg);
        transform: translateZ(-182px) rotateY(-120deg);
    }
    55%,
    72.5% {
        -webkit-transform: translateZ(-182px) rotateY(-240deg);
        transform: translateZ(-182px) rotateY(-240deg);
    }
    82.5%,
    100% {
        -webkit-transform: translateZ(-182px) rotateY(-360deg);
        transform: translateZ(-182px) rotateY(-360deg);
    }
}
@keyframes carousel {
    0%, 17.5% {
        -webkit-transform: translateZ(-182px) rotateY(0);
        transform: translateZ(-182px) rotateY(0);
    }
    27.5%,
    45% {
        -webkit-transform: translateZ(-182px) rotateY(-120deg);
        transform: translateZ(-182px) rotateY(-120deg);
    }
    55%,
    72.5% {
        -webkit-transform: translateZ(-182px) rotateY(-240deg);
        transform: translateZ(-182px) rotateY(-240deg);
    }
    82.5%,
    100% {
        -webkit-transform: translateZ(-182px) rotateY(-360deg);
        transform: translateZ(-182px) rotateY(-360deg);
    }
}

  

}
</style>

参考链接:https://wow.techbrood.com/fiddle/10516 

 

 

性野喜悲
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
 CSS3实现旋转木马
are_gh的博客
01-01 223
CSS3实现旋转木马 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { perspective: 1000px; } .wrap { transform-style: preserve-3d; animation:run 5s linear infinite; position: re.
css3实现图片旋转木马效果
weixin_39295546的博客
03-05 806
css3实现图片旋转木马效果 代码如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
一个不错的旋转木马轮播图特效.zip
04-25
旋转木马轮播图特效共有五张图片，每张图片排列的位置是以中间为对称的。实现了想要的轮播效果，可用在网页制作中重要的展示。
vue 3D旋转木马轮播图
weixin_42835782的博客
11-25 5325
利用carousel-3d插件。 安装 npm install -S vue-carousel-3d 全局引入 import Vue from 'vue' import Carousel3d from 'vue-carousel-3d' Vue.use(Carousel3d） 局部引入 import { Carousel3d, Slide } from "vue-carousel-3d"; export default { components: { Carousel3d, Sli
[vue3+js]实现3d旋转效果
最新发布
weixin_41521961的博客
07-03 396
【代码】[vue3+js]实现3d旋转效果。
vue 纯CSS 旋转木马
henghahouhei的博客
05-16 683
vue 纯CSS 旋转木马； 贝塞尔曲线； 纯css绕中间旋转
在vue脚手架中，学习实现一个轮播图（2-旋转木马）
@zhujj_的博客
08-24 2690
在vue脚手架环境中，学习实现一个轮播图（旋转木马样的）
swipei实现3D横向焦点图效果（旋转木马）
Wen_Luo的博客
06-08 2620
1.最近使用vuecli3开发项目中遇到了一个3d的横向焦点图的轮播,考虑用到swipei组件库来实现这个小功能,效果图如下: 2.在vuecli3中下载swiper cnpm install swiper@5.4.5 --save 下载完可在package.json中查看 3.在页面中使用swiper 轮播图以及样式 css部分 import "swiper/css/swiper.css"; import Swiper from "swiper"; data() { return {
vue实现旋转木马（图片数量无限制）
Zmikoo学习之路
05-15 1620
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><
vue3 js+css实现旋转木马式轮播
dnvtkhbn的博客
11-01 963
旋转木马轮播图
3D图片层叠旋转木马切换
11-03
接着，旋转木马效果的实现通常基于CSS3的transform属性，特别是rotateY()函数，它可以实现元素沿Y轴的旋转。配合transition属性，可以平滑过渡到下一个图片，从而实现旋转切换的效果。同时，为了实现层叠效果，可以...
vue-slick-carousel：:horizontal_traffic_light:真正的SSR的Vue Slick旋转木马，专为:high_voltage:FluxLuxstay
02-05
Vue光滑轮播 :horizontal_traffic_light: 具有真正SSR的Vue Slick传送带为更快的。 这是的端口。 :artist_palette: 产品特点 简单 中心模式 多 行数 可变宽度 垂直 延迟加载 同步滑块 vue-slick-carousel继承了广受欢迎的slick-carousel功能，提供了多种功能。 它已被完全重写为vue组件。 如果您试图在Vue中使用圆滑传送带，那将是一个完美的选择。 您可以以vue组件的方式使用它，而不会出现任何差异。 它还可以轻松解决难题，例如自定义箭头/点。 查找有关所有可用功能，并查看其在。 真正的SSR FCP：1920毫秒＆LCP：3090毫秒 FCP：620ms＆LCP：1850ms
轻量级3D旋转木马图片自动切换jQuery插件.zip
12-10
不错的前端JS特效、页面功能的代码，很适合练习前端的各种特效和功能，也可直接拿来适当调整后使用，用于练手、学习，也是很不错的
【JavaScript源代码】vue实现旋转木马动画.docx
12-29
总的来说，通过 Vue.js，我们可以方便地创建一个动态的、响应式的旋转木马组件，结合 CSS 动画实现平滑的过渡效果。关键在于理解 Vue 的数据绑定、组件和事件处理，以及 CSS3 的过渡效果，这些是实现该功能的核心...
3D图片层叠旋转木马切换特效代码
03-20
3D图片层叠旋转木马切换特效的核心原理在于CSS3的transform属性，该属性允许对元素进行二维或三维变换，包括旋转（rotateX, rotateY, rotateZ）、缩放（scale）、移动（translate）等。在jQuery.roundabout中，这些...
VUE 3D轮播图封装实现方法
01-19
本文为大家分享了VUE 3D轮播图封装的具体代码，供大家参考，具体内容如下 一、体验地址 VUE 3D轮播图 二、实现功能点 ... require('swiper/dist/css/swiper.css');//注意这里 import Pageination
vue旋转木马效果
Mr_Shil的博客
07-19 2508
vue实现旋转木马效果，是网上的代码改成了vue可用的 全部代码 <template> <div id="drag-container"> <div id="spin-container"> <div class="img-con"> <img ref="img" src="../../assets/images/lb/rongyu.png" alt="" /> </div&gt.
Vue组件旋转木马动画效果
weixin_43845662的博客
06-02 3335
Vue组件旋转木马动画效果 源码如下 <template> <div id="wrapper"> <transition-group name="list" tag="ul" mode="out-in"> <li v-for="(item,index) in piclist" :key="item.url" :style="conf...
vue3.0 实现旋转木马
zhazhali_fenqi的博客
05-06 2234
做的比较丑 最后图片 本来打算用vue-carousel-3d这个组件的，但是这个组件一直报源码错误，修改了半天也没有解决 使用了swiper组件 html部分代码 <div class="swiper-container swiper1" style="height: 650px;width: 1500px"> <div class="swiper-wrapper"> <div class="swiper-slide">
vue+css自适应窗口
07-28
对于Vue和CSS的自适应窗口，你可以使用CSS的Flexbox布局和媒体查询来实现。 首先，在Vue组件的样式中，使用Flexbox布局来实现自适应。在父容器上设置`display: flex;`，并根据需要设置`flex-direction`、`justify-content`和`align-items`等属性来控制子元素的布局。 例如，如果你想要在水平方向上居中显示子元素，可以这样设置父容器的样式： ``` .parent-container { display: flex; justify-content: center; } ``` 接下来，使用媒体查询来根据不同的屏幕宽度调整布局。媒体查询可以根据屏幕宽度来应用不同的CSS样式。 例如，如果你想在窗口宽度小于768px时改变子元素的布局方式，可以这样设置媒体查询： ``` @media (max-width: 768px) { .parent-container { flex-direction: column; } } ``` 这样，当窗口宽度小于768px时，子元素将以垂直方向排列。 以上是一个简单的示例，你可以根据实际需求调整样式和媒体查询的设置。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值