使用CSS实现文字3d浮动效果
使用CSS实现文字3d浮动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
body {
background: #081625;
font-family: "Open Sans", sans-serif;
font-weight: 600;
height: 100vh;
margin: 0;
font-size: 50px;
display: flex;
align-items: center;
-webkit-perspective: 500px;
perspective: 500px;
}
div {
margin: auto;
transform: rotateY(-20deg);
animation: anim 10s linear infinite;
}
p {
padding: 0 50px;
margin: 0;
color: #fff;
}
.yellow {
color: #EFC371;
}
.violet {
color: #8E94C0;
}
.fff {
color: #fff;
}
.green {
color: #5A9462;
}
.red {
color: #DD8339;
}
@keyframes anim {
0% {
transform: rotateY(-20deg) rotatex(10deg);
}
50% {
transform: rotateY(-10deg) rotatex(15deg);
}
100% {
transform: rotateY(-20deg) rotatex(10deg);
}
}
@-webkit-keyframes anim {
0% {
transform: rotateY(-20deg) rotatex(10deg);
}
50% {
transform: rotateY(-10deg) rotatex(15deg);
}
100% {
transform: rotateY(-20deg) rotatex(10deg);
}
}
</style>
</head>
<body>
<div><span class="yellow">text</span> <span class="fff">{</span> <br/>
<p>
<span class="violet">background<span class="fff">:</span> <span class="yellow">red</span><span
class="fff">;</span><br/>
margin<span class="fff">:</span> <span class="red">0</span><span class="fff">;</span><br/>
font-size<span class="fff">:</span> <span class="red">32px</span><span class="fff">;</span><br/>
font-family<span class="fff">:</span><span class="green"> "Open Sans", </span><span
class="yellow">sans-serif</span><span class="fff">;</span><br/>
</p>
<span class="fff">}</span>
</div>
</body>
</html>.
相关推荐
sunshineboyleng 2020-07-08
impress 2020-05-11
yaodilu 2020-04-30
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
福叔 2020-04-11
zjuwangleicn 2020-03-08
冰蝶 2020-03-01
somboy 2020-02-29
zengni 2020-02-23
wangjie 2020-02-22
tianzyc 2020-02-19
冰蝶 2020-02-16
lanzhusiyu 2020-02-03
lanzhusiyu 2020-01-12
MaureenChen 2020-01-01
jiedinghui 2019-12-27
zhanghao 2019-12-20
bertzhang 2019-12-14