vue+css3 旋转木马效果

${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

vue+css3 旋转木马效果相关推荐

html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
HTML5 CSS3 专题诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
vue + css3实现微信录制播放语音效果
本文使用vue + css3实现语音录制效果与语音播放效果. 效果图 ↓↓↓ <template><div><div class=& ...
Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <template><div><h2>动画效果 ...
css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...
html3d旋转效果相册,HTML5css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
android旋转木马轮播图,vue实现旋转木马轮播
同事拿到个设计稿,是旋转木马的轮播效果,于是网上找了一下,发现了jquery实现的效果,一有空就看看源码,研究其实现原理,想着用vue的数据驱动方式来实现一个,但这个效果跟以往做的demo效果不同,每 ...
24个很酷的 CSS3 文本效果示例及教程
CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.今天这篇文章收集了24个很棒的 CSS3 文本效果示例及教程分享给大家. Text wi ...
使用CSS3悬停效果打造不同的页面版式
CSS3 为 Web 开发带来了非常令人兴奋的变化,特别是 CSS 3D 转换.动画等特性的支持,可以轻松的创建很酷的 Web 效果. CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功 ...

vue+css3 旋转木马效果

vue+css3 旋转木马效果相关推荐

最新文章

热门文章