文字走马灯置顶显示

发布网友发布时间：2022-04-26 08:58

共2个回答

懂视网时间：2022-05-14 05:51

这篇文章主要介绍了纯css3实现走马灯效果，主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，有需要的小伙伴参考下

纯css3实现了一个正六边形的走马灯效果，记录一下css3动画的学习情况，效果如下：

主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一点平面几何知识（计算间距、角度啥的），详细过程如下：

首先设计一下要显示的布局（俯视图），途中垂直的线为辅助线，计算偏移量时需要用的：

红色框框为旋转面（即走马灯效果的结构最终以该面的中点为旋转轴旋转的），六个面也都是基于这个面做的布局，先看红框下面的三个面，左侧的面原本在蓝色线处，通过旋转到达绿色线处，右边同理，中间的面只需要在Z轴方向移动二分之根号三个边长的距离即可，所有的面均通过偏移和旋转的方式达到上图的结构，需要注意的是要保证有图案的面（本例中使用的是文字，思路一致）要向外，比如上面中间的面，在Z轴向外偏移二分之根号三个边长的距离之后还要以中点为圆心旋转180°，所有的面同理易得。在此过程中需要牢记的一点技术是：三维坐标系中，从坐标原点出发，向着坐标轴的正方向看去，逆时针旋转时rotate(X/Y/Z)的值为正数，顺时针旋转时，rotate(X/Y/Z)值为负数。

设置结构：一个3D场景、一个走马灯的旋转面和走马灯的六个面：

<p class="wapper"> <!--场景-->
 <p class="rotate"> <!--容器-->
 <p class="item itemOne">1</p> <!--六个面-->
 <p class="item itemTwo">2</p>
 <p class="item itemThree">3</p>
 <p class="item itemFour">4</p>
 <p class="item itemFive">5</p>
 <p class="item itemSix">6</p>
 </p> 
</p>

设置3D场景：

.wapper{
 -webkit-perspective:800; /*观察距离800*/
 -webkit-perspective-origin:50% -100%; /*从正前方上方斜向下观察*/
 width:400px;
 height:300px;
 margin:100px auto;
}

设置旋转面：

@-webkit-keyframes rotation{ /*动画过程*/
 0%{-webkit-transform:rotateY(0deg);} 
 100%{-webkit-transform:rotateY(-360deg);}
}
.rotate{
 -webkit-transform-style:preserve-3d; /*3D变换*/
 -webkit-animation: rotation 6s infinite; /*动画名称、时间、循环动画*/
 -webkit-animation-timing-function: linear; /*匀速动画*/
 -webkit-transform-origin:center; /*沿中间旋转*/
 width:100%;
 height:100%;
 position:relative; /*相对定位布局*/
}

对六个面除了位置之外的通用样式做设置：

.item{
 -webkit-transform-origin:center; /*均沿中心旋转*/
 width:198px;
 height:300px;
 position:absolute; /*绝对定位在旋转面上*/
 background:none;
 text-align:center;
 line-height:300px;
}

分别设置六个面的位置，以一号为例（上面结构图中红框下面左边绿色线标注的面），所有的数值均需要经过几何计算得来：

.itemOne{
 left:-50px;
 -webkit-transform:translateZ(87px) rotateY(-60deg); /*z轴向外移动87px，沿Y轴方向旋转-60°*/
 background:#f00;
}

在鼠标悬浮在该结构上时动画停止：

.rotate:hover{
 -webkit-animation-play-state:paused; /*设置动画状态*/
}

本例子只有在webkit内核的浏览器中可以查看效果，如需兼容其他现代浏览器，需添加 -moz- 等前缀，完整代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Animation Test</title>
 <style>
 *{margin:0;padding:0;}
 @-webkit-keyframes rotation{ 
 0%{-webkit-transform:rotateY(0deg);} 
 100%{-webkit-transform:rotateY(-360deg);}
 }
 .wapper{
 -webkit-perspective:800;
 -webkit-perspective-origin:50% -100%;
 width:400px;
 height:300px;
 margin:100px auto;
 }
 .rotate{
 -webkit-transform-style:preserve-3d;
 -webkit-animation: rotation 6s infinite;
 -webkit-animation-timing-function: linear;
 -webkit-transform-origin:center;
 width:100%;
 height:100%;
 position:relative;
 }
 .item{
 -webkit-transform-origin:center;
 width:198px;
 height:300px;
 position:absolute;
 background:none;
 text-align:center;
 line-height:300px;
 }
 .itemOne{
 left:-50px;
 -webkit-transform:translateZ(87px) rotateY(-60deg);
 background:#f00;
 }
 .itemTwo{
 left:100px;
 -webkit-transform:translateZ(173px);
 background:#ff0;
 }
 .itemThree{
 left:250px;
 -webkit-transform:translateZ(87px) rotateY(60deg);
 background:#0ff; 
 }
 .itemFour{
 left:250px;
 -webkit-transform:translateZ(-87px) rotateY(120deg); 
 background:#0f0;
 }
 .itemFive{
 left:100px;
 -webkit-transform:translateZ(-173px) rotateY(180deg);
 background:#0ff;
 }
 .itemSix{
 left:-50px;
 -webkit-transform:translateZ(-87px) rotateY(-120deg);
 background:#00f;
 }
 .rotate:hover{
 -webkit-animation-play-state:paused;
 }
 </style>
</head>
<body>
 <p class="wapper">
 <p class="rotate">
  <p class="item itemOne">1</p>
  <p class="item itemTwo">2</p>
  <p class="item itemThree">3</p>
  <p class="item itemFour">4</p>
  <p class="item itemFive">5</p>
  <p class="item itemSix">6</p>
 </p> 
 </p>
</body>
</html>

是不是很炫酷的效果呢，小伙伴们，CSS3真是个好东西，你值得拥有。

热心网友时间：2022-05-14 02:59

应用css实现走马灯置顶显示
超出显示
用到命令 text-overflow ： clip | ellipsis 文本超出：截断|省略
但这一条命令是看不到效果的，需要另外两条命令配合使用，让文本能够溢出，第一个是强制一行内显示，white-space:nowrap；第二个是溢出内容隐藏,overflow:hidden
超出跑马等效果
老的前端开发人员对于marquee标签肯定不陌生，一个被淘汰的标签，被刚入门的新手所喜爱，因为能通过一个简单的标签做出动态的效果。但是在实际应用上的局限性和效果的过时，使这个标签退出历史舞台，大家纷纷改用js来实现无间断滚动等效果。
新的CSS3 marquee设置，可以说功能强大了很多，更加易操作，用简单的代码解决了js中比较纠结的字符长度判断等难题。强烈推荐大家使用。
对于这个属性的定义，W3C标准用法和webkit内核浏览器的支持用法并不相同，由于我们立足实战实用，所以这里只介绍好用的。可用的。
我们需要四句常用命令
overflow:-webkit-marquee;//指定溢出时滚动。
-webkit-marquee-style:scroll | slide | alternate; //跑马灯样式，分三种。
scroll，从一端滚动到另一端，内容完全滚入（消失）时重新开始。slide，从一端滚到另一端，内容接触到另一端后，立马重新开始。alternate，内容不跑到显示区域外，在里面来回碰壁反弹。这里主要用第一种。
-webkit-marquee-repetition:infinite | number;// 跑马灯跑的次数，infinite 为无限多次，不结束。或者可以用正整数设置滚动的次数。
-webkit-marquee-direction:up | down | left | right; //跑动的方向，这个要注意结合实际情况，即实际你操作的标签文本流溢出在哪个方向溢出。
-webkit-marquee-speed:slow | normal | fast;//跑动的速度设置。

文字走马灯置顶显示

应用css实现走马灯置顶显示超出显示用到命令 text-overflow ： clip | ellipsis 文本超出：截断|省略但这一条命令是看不到效果的，需要另外两条命令配合使用，让文本能够溢出，第一个是强制一行内显示，white-space:nowrap；第二个是溢出内容隐藏,overflow:hidden超出跑马等效果老的前端开发人员对于marquee标...

文字走马灯置顶显示

qq置顶文字怎么设置微信置顶怎么设置文字微信置顶文字怎么设置颜色微信聊天置顶文字怎么设置朋友圈置顶文字怎么弄微信置顶文字别人能看到吗好听的微信置顶文字微信朋友圈置顶文字怎么弄微信聊天置顶文字

文字走马灯 置顶显示

文字走马灯置顶显示