不会触发重绘的CSS属性
opacity
transfrom
filter
开启GPU加速后可能会出现浏览器频繁闪烁或抖动
可以尝试如下方法
-webkit-backface-visibility：hidden
-webkit-perspective：1000
css的块内属性
字间距letter-spacing: normal; 数值
对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进text-indent: 数值px;
垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal; 数值
空格white-space: pre;(保留) nowrap;(不换行)
显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)
<html>
<head>
<style type="text/css">
.perBox{
perspective:400px;
}
.aniBox{
text-align:center;
margin-left:40px;
position: relative;
transform-style:preserve-3d;
width:220px;
height:220px;
animation:box-3d 5s infinite linear;
}
.aniBox>div{
position: absolute;
width:100%;
height:100%
}
.ani1{
background:#4879dc;
transform:translateZ(110px);
}
.ani2{
background:#3bd168;
transform:translateZ(-110px);
}
.ani3{
background:#e31653;
transform:rotateY(90deg) translateZ(110px)
}
.ani4{
background:#e31653;
transform:rotateY(-90deg) translateZ(110px)
}
.ani5{
background:#e9c80f;
transform:rotateX(90deg) translateZ(110px)
}
.ani6{
background:#821fd3;
transform:rotateX(-90deg) translateZ(110px)
}
@keyframes box-3d{
100%{
transform: rotateX(360deg) rotateZ(-720deg);
}
}
</style>
</head>
<body>
<p style="font-size:50px">燃烧您的GPU</p>
<div class = "perBox">
<div class = "aniBox" >
<div class = "ani1">好好学习</div>
<div class = "ani2">天天向上</div>
<div class = "ani3">平安</div>
<div class = "ani4">吉祥</div>
<div class = "ani5">如意</div>
<div class = "ani6">富强</div>
</div>
</div>
</body>
</html>
div{
border-radius: 100px 0;
background-color:red;
}
扫一扫
793
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
