今天,小编将与大家分享 web 前端特效荟萃系列第十期,喜欢把玩儿炫酷效果的小伙伴快快看过来 ^_^ ,希望大家喜欢呦~
第十期,给大家分享一个使用使用 CSS 实现文字 3d 浮动效果,非常酷炫!相关代码如下:
在线演示:Here~
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cloth</title>
<style>
@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>
来源: http://igeekbar.com/igeekbar/post/987.htm