一、万花筒
1、html部分
//万花筒html
<div class="carousel" data-gap="368">
<figure>
<div class="carouselItem" v-for="(item,index) in exhibitionList" :key="index">
<div class="itemContent" :class="`cardBg${index+1}`" @click="toExhibitionHall(item)" @mouseenter="showEnterprise(item)">
<h6>{{item.name}}</h6>
<p :title="item.des">{{item.des}}</p>
</div>
</div>
</figure>
</div>2、js部分
mounted() {
this.cardRotate();
},
methods: {
// 卡片旋转
cardRotate(){
let that = this;
carousel();
var xdeg = 0;
this.timer = setInterval(function() {
xdeg = xdeg + 0.3;
$('figure').css('transform', "rotateY(" + (-xdeg) + "deg)");
}, 20);
function carousel(){
var figure = $("figure"),
items = $(".carouselItem"),
n = items.length,
theta = 2 * Math.PI / n,
currImage = 0;
setUpCarousel(n, items.width());
function setUpCarousel(n, s) {
let padg = window.screen.width / 1920 * $(".carousel").attr("data-gap");
var apothem = s / (2 * Math.tan(Math.PI / n));
figure.css('transformOrigin', '50% 50% ' + (-apothem) + 'px');
items.css("padding", "20px " + padg + "px 0");
for (var i = 1; i < n; i++) {
items.eq(i).css({
'transformOrigin': '50% 50% ' + (-apothem) + 'px',
'transform': 'rotateY(' + i * theta + 'rad)',
});
}
rotateCarousel(currImage);
}
function rotateCarousel(index) {
figure.css({
"transform": "rotateX(0deg) rotateY(" + index * -theta + "rad)"
});
}
// 暂停启动定时器
$(".carousel").mouseleave(function() {
that.timer = setInterval(function() {
xdeg = xdeg + 0.3;
$('figure').css('transform', "rotateY(" + (-xdeg) + "deg)");
}, 20);
})
$(".carousel").mouseenter(function() {
clearInterval(that.timer);
})
// $(".prev").click(() => {
// currImage--;
// rotateCarousel(currImage);
// })
// $(".next").click(() => {
// currImage++;
// rotateCarousel(currImage);
// })
}
},
},3、css部分
.carousel {
width: 26.75rem;
height: 13rem;
// perspective: 700px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
bottom: 3.5rem;
left:50%;
transform: translateX(-50%);
z-index: 4;
}
.carousel figure {
margin: 0;
// width: 1070px;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.carouselItem {
width: 100%;
height: 11.55rem;
box-sizing: border-box;
cursor: pointer;
z-index: 1;
// -webkit-box-reflect: below 20px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .5) 100%);
}
.itemContent {
width: 100%;
height: 100%;
padding: 5.8rem 1.7rem 0;
box-sizing: border-box;
color:#fff;
h6{
font-weight: bold;
font-size: .65rem;
line-height: .65rem;
margin-bottom:.4rem;
text-align: center;
}
p{
font-size: .45rem;
font-weight: 400;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.cardBg1{
background: url(~img/cardBg1.png) no-repeat center / 100% 100%;
}
.cardBg2{
background: url(~img/cardBg2.png) no-repeat center / 100% 100%;
}
.cardBg3{
background: url(~img/cardBg3.png) no-repeat center / 100% 100%;
}
.cardBg4{
background: url(~img/cardBg4.png) no-repeat center / 100% 100%;
}
.cardBg5{
background: url(~img/cardBg5.png) no-repeat center / 100% 100%;
}
.cardBg6{
background: url(~img/cardBg6.png) no-repeat center / 100% 100%;
}
.carouselItem:not(:first-of-type) {
position: absolute;
left: 0;
top: 0;
}二、文字旋转
1、html部分
<div class="textCricle1">
<canvas id="canvas1" width="1310" height="1310" style="width: 100%;height: 100%;"></canvas>
</div>
<div class="textCricle2">
<canvas id="canvas2" width="1550" height="1550" style="width: 100%;height: 100%;"></canvas>
</div>
<div class="textCricle3">
<canvas id="canvas3" width="1790" height="1790" style="width: 100%;height: 100%;"></canvas>
</div>2、js部分
mounted() {
this.textMove();
},
methods: {
// 环形文字
textMove(){
let canvas1 = document.getElementById('canvas1'),
fill1 = 'rgba(0, 168, 255, 0.8)',
stroke1 = 'rgba(0, 168, 255, 0.8)';
this.canvasDraw(canvas1, fill1, stroke1)
let canvas2 = document.getElementById('canvas2'),
fill2 = 'rgba(0, 168, 255, 0.2)',
stroke2 = 'rgba(0, 168, 255, 0.2)';
this.canvasDraw(canvas2,fill2,stroke2)
let canvas3 = document.getElementById('canvas3'),
fill3 = 'rgba(0, 168, 255, 0.1)',
stroke3 = 'rgba(0, 168, 255, 0.1)';
this.canvasDraw(canvas3,fill3,stroke3)
},
// canvas绘制文字
canvasDraw(dom,fill,stroke){
let context = dom.getContext('2d'),
TEXT_FILL_STYLE = fill,
TEXT_STROKE_STYLE = stroke,
TEXT_SIZE = 30,
circle = {
x: dom.width / 2,
y: dom.height / 2,
radius: (dom.width / 2) - 20,
},
startAngle = Math.PI*2+Math.PI/2,
endAngle = Math.PI/60+Math.PI/2,
text = '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101';
/**
* 绘制环形文字
* @param{string} string 传入的文字
* @param startAngle 起始角
* @param endAngle 末尾角
*/
let drawCircularText = (string, startAngle, endAngle) => {
let radius = circle.radius,
angleDecrement = (startAngle - endAngle) / (string.length - 1),
angle = parseFloat(startAngle),
index = 0,
character;
context.save();
context.fillStyle=TEXT_FILL_STYLE;
context.strokeStyle=TEXT_STROKE_STYLE;
context.font=TEXT_SIZE+'px Lucida Sans';
while(index < string.length){
//获取传入的字符串的每个字符
character = string.charAt(index);
context.save();
context.beginPath();
//位移到每个字符的指定位置
context.translate(circle.x+Math.cos(angle)*radius,circle.y - Math.sin(angle)*radius);
//旋转坐标系到每个字符应该达到到角度
context.rotate(Math.PI/2-angle);
context.fillText(character,0,0);
context.strokeText(character,0,0);
//角度递减
angle -= angleDecrement;
index++;
context.restore();
}
};
//Init
let init=(startAngle,endAngle)=>{
context.textAlign='center';
context.textBaseline='middle';
drawCircularText(text,startAngle,endAngle);
};
init(startAngle,endAngle);
}
},3、css部分
.textCricle1{
position: absolute;
bottom:2rem;
left:50%;
width:32.75rem;
height:32.75rem;
transform: translate(-50%, 38%) rotateX(77deg);
z-index: 1;
#canvas1{
animation: rotate 80s infinite linear;
}
}
.textCricle2{
position: absolute;
bottom:2rem;
left:50%;
width:38.75rem;
height:38.75rem;
transform: translate(-50%, 40%) rotateX(78deg);
z-index: 1;
#canvas2{
animation: rotate 80s infinite linear;
}
}
.textCricle3{
position: absolute;
bottom:2rem;
left:50%;
width:44.75rem;
height:44.75rem;
transform: translate(-50%, 41%) rotateX(79deg);
z-index: 1;
#canvas3{
animation: rotate 80s infinite linear;
}
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(-180deg); }
100% { transform: rotate(-360deg); }
}
