使用CSS实现文字3d浮动效果

2018-02-06 09:44:14来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

使用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 >text</span> <span >{</span> <br/>    <p>   <span >background<span >:</span> <span >red</span><span           >;</span><br/>      margin<span >:</span> <span >0</span><span >;</span><br/>      font-size<span >:</span> <span >32px</span><span >;</span><br/>      font-family<span >:</span><span > "Open Sans", </span><span               >sans-serif</span><span >;</span><br/>    </p>    <span >}</span></div></body></html>

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台