好看的CSS字体效果

效果图

效果图1
效果图2

代码

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <ul>
            <li><span>&times;</span><a href="#" data-text="Home">Home</a></li>
            <li><span>&times;</span><a href="#" data-text="About">About</a></li>
            <li><span>&times;</span><a href="#" data-text="Services">Services</a></li>
            <li><span>&times;</span><a href="#" data-text="Typing Menu">Typing Menu</a></li>
            <li><span>&times;</span><a href="#" data-text="Our Team">Our Team</a></li>
            <li><span> &times;</span><a href="#" data-text="Contact Us">Contact Us</a></li>
        </ul>
    </body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    font-family: consolas;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1c234a;
}
ul{
    position: relative;
}
ul li{
    list-style: none;
    margin: 0 20px;
    font-size: 4em;
}
ul li span{
    position: relative;
    top: -5px;
    left: -10px;
    color: transparent;
}
ul li:hover span{
    color: red;
}
ul li a
{
    position: relative;
    color: rgba(255,255,255,0.1);
    text-decoration: none;
    font-weight: 700;
}
ul li a:before
{
    content: attr(data-text);
    position: absolute;
    top: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    color: #1bfaad;
    white-space: nowrap;
}
ul:hover li a:before{
    /* steps个字母 */
    animation: animate 0.5s steps(11) forwards;
}
@keyframes animate{
    0%{
        width: 387.063px;
    }
    100%{
        width: 0px;
    }
}
ul li:hover a:before{
    /* steps个字母 */
    animation: animateTwo 2s steps(11) forwards;
}
@keyframes animateTwo{
    0%{
        width: 0;
    }
    100%{
        width: 387.063px;
    }
}

好看的搜索框

flex好看的相册

好看的a标签

实现好看的文字图片滚动

手机好看的页面

做一个好看的自定义搜索框

好看的好友列表页

一个div写出好看的按钮

好看的文件管理

好看的登录页

好看的打勾打叉符号

vue uni-app，微信小程序，app 自定义搜索框好看的搜索框。自定义搜索按钮搜索栏，左边输入框右边搜索按钮，搜索图标。element ui

好看的渐变色div效果橙色渐变效果

CSS弹性盒子，flex布局

CSS图片和文字对齐问题