新增第188个小实例：饮料瓶造型文字旋转特效
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
d2d38d7de8
commit
1177a6e6cf
|
|
@ -195,6 +195,7 @@
|
|||
185. HTML5+CSS3小实例：纯CSS实现文字组成肖像特效
|
||||
186. HTML5+CSS3+JS小实例：数字滑动选择控件
|
||||
187. HTML5+CSS3+Vue小实例：浪漫的心形文字动画特效
|
||||
188. HTML5+CSS3+Vue小实例：饮料瓶造型文字旋转特效
|
||||
|
||||
#### 赞赏作者
|
||||
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口宽高 */
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平+垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ce363e;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
/* 等宽字体 */
|
||||
font-family: monospace;
|
||||
/* 字体大写 */
|
||||
text-transform: uppercase;
|
||||
font-size: 50px;
|
||||
}
|
||||
.bottle{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 1em=1*font-size */
|
||||
/* 在这里：11em=11*50px=550px */
|
||||
width: 11em;
|
||||
height: 11em;
|
||||
/* 设置视距 */
|
||||
perspective: 25em;
|
||||
}
|
||||
.bottle-sides,
|
||||
.bottle-side{
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
/* 开启3D效果 */
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.bottle-sides{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 10%;
|
||||
transform: rotateZ(90deg) rotateX(-90deg);
|
||||
/* 执行动画：动画名 时长 线性 无限次播放 */
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
.bottle-side{
|
||||
/* --rx是自定义属性，在这之前已经设置好了 */
|
||||
/* 设置Y轴偏移量+X轴旋转角度 */
|
||||
transform: translateY(-50%) rotateX(var(--rx));
|
||||
}
|
||||
.bottle-side span{
|
||||
display: inline-block;
|
||||
/* ch是一个相对于数字0的大小，1ch=1个数字0的宽度 */
|
||||
width: 1ch;
|
||||
/* 隐藏旋转元素的背面 */
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
/* 接下来分别设置每一个span的Z轴偏移量+Y轴旋转角度+Y轴缩放 */
|
||||
.bottle-side span:nth-child(1){
|
||||
transform: translateZ(2ch) rotateY(0deg) scaleY(1);
|
||||
}
|
||||
.bottle-side span:nth-child(2){
|
||||
transform: translateZ(2ch) rotateY(0deg) scaleY(1);
|
||||
}
|
||||
.bottle-side span:nth-child(3){
|
||||
transform: translateZ(2.25ch) rotateY(-30deg) scaleY(1);
|
||||
}
|
||||
.bottle-side span:nth-child(4){
|
||||
transform: translateZ(2.75ch) rotateY(-30deg) scaleY(1.3);
|
||||
}
|
||||
.bottle-side span:nth-child(5){
|
||||
transform: translateZ(3.25ch) rotateY(-30deg) scaleY(1.5);
|
||||
}
|
||||
.bottle-side span:nth-child(6){
|
||||
transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);
|
||||
}
|
||||
.bottle-side span:nth-child(7){
|
||||
transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);
|
||||
}
|
||||
.bottle-side span:nth-child(8){
|
||||
transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);
|
||||
}
|
||||
.bottle-side span:nth-child(9){
|
||||
transform: translateZ(3.3ch) rotateY(15deg) scaleY(1.5);
|
||||
}
|
||||
.bottle-side span:nth-child(10){
|
||||
transform: translateZ(3ch) rotateY(15deg) scaleY(1.4);
|
||||
}
|
||||
.bottle-side span:nth-child(11){
|
||||
transform: translateZ(2.8ch) rotateY(0deg) scaleY(1.3);
|
||||
}
|
||||
.bottle-side span:nth-child(12){
|
||||
transform: translateZ(2.8ch) rotateY(0deg) scaleY(1.3);
|
||||
}
|
||||
.bottle-side span:nth-child(13){
|
||||
transform: translateZ(3ch) rotateY(-15deg) scaleY(1.4);
|
||||
}
|
||||
.bottle-side span:nth-child(14){
|
||||
transform: translateZ(3.3ch) rotateY(-15deg) scaleY(1.5);
|
||||
}
|
||||
.bottle-side span:nth-child(15){
|
||||
transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);
|
||||
}
|
||||
.bottle-side span:nth-child(16){
|
||||
transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);
|
||||
}
|
||||
.bottle-side span:nth-child(17){
|
||||
transform: translateZ(3.25ch) rotateY(15deg) scaleY(1.5);
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
@keyframes spin {
|
||||
0%{
|
||||
transform: rotateZ(90deg) rotateX(-90deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotateZ(90deg) rotateX(-54deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>饮料瓶造型文字旋转特效</title>
|
||||
<link rel="stylesheet" href="188.css">
|
||||
<!-- 引入vue -->
|
||||
<script src="/js/vue.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="bottle">
|
||||
<div class="bottle-sides">
|
||||
<!-- --rx是css自定义属性，这里用来计算bottle-side沿X轴旋转的角度，自定义属性可通过var函数进行调用 -->
|
||||
<div class="bottle-side" v-for="n,i in 6" :style="{'--rx':(i*36)+'deg'}">
|
||||
<span v-for="t in arr">{{t}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el:'.bottle',
|
||||
data:{
|
||||
text:'drink more water!',
|
||||
arr:[]
|
||||
},
|
||||
mounted(){
|
||||
// 把文本拆分为单个字符组成的数组
|
||||
this.arr=this.text.split('');
|
||||
// console.log(this.arr);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue