纯CSS怎么实现从按钮两侧滑入装饰元素的悬停特效

这篇“纯CSS怎么实现从按钮两侧滑入装饰元素的悬停特效”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“纯CSS怎么实现从按钮两侧滑入装饰元素的悬停特效”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。

　　代码解读

　　定义dom，容器是一个无序列表，列表项代表按钮：

　　<ul>

　　<li>home</li>

　　</ul>

　　居中显示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　background:linear-gradient(deepskyblue,navy);

　　}

　　去掉列表项前面的符号：

　　ul{

　　padding:0;

　　list-style-type:none;

　　}

　　设置按钮的文字样式：

　　ulli{

　　color:#ddd;

　　font-size:25px;

　　font-family:sans-serif;

　　text-transform:uppercase;

　　}

　　用伪元素在按钮的左侧增加一个方块：

　　ulli{

　　position:relative;

　　}

　　ulli::before{

　　content:'';

　　position:absolute;

　　width:100%;

　　height:100%;

　　background:tomato;

　　left:-100%;

　　}

　　用伪元素在按钮的右侧增加一条下划线：

　　ulli::after{

　　content:'';

　　position:absolute;

　　width:100%;

　　height:0.2em;

　　background:tomato;

　　bottom:0;

　　left:100%;

　　}

　　接下来设置鼠标悬停效果。

　　当鼠标悬停时，左侧的方块移到文字所在位置：

　　ulli::before{

　　transition:0.4sease-out;

　　}

　　ulli:hover::before{

　　left:100%;

　　}

　　右侧的下划线移到文字所在位置，它的动画时间延迟到方块的动画快结束时再开始：

　　ulli::after{

　　transition:0.3s0.3sease-out;

　　}

　　ulli:hover::after{

　　left:0%;

　　}

　　同时，提高文字的亮度：

　　ulli{

　　transition:0.3s;

　　cursor:pointer;

　　}

　　ulli:hover{

　　color:#fff;

　　}

　　隐藏掉按钮外的部分，使方块和下划线在默认状态下都不可见，只有鼠标悬停时它们才从两侧入场：

　　ulli{

　　overflow:hidden;

　　}

　　最后，在dom中再增加几个按钮：

　　<ul>

　　<li>home</li>

　　<li>products</li>

　　<li>services</li>

　　<li>contact</li>

　　</ul>

　　布局多个按钮：

　　ul{

　　display:flex;

　　flex-direction:column;

　　align-items:center;

　　}

　　ulli{

　　margin:0.5em;

　　}

css的基本语法是什么

css的基本语法是：1、css规则由选择器和一条或多条声明两个部分构成；2、选择器通常是需要改变样式的HTML元素；3、每条声明由一个属性和一个值组成；4、属性和属性值被冒号分隔开。

感谢您的阅读，希望您对“纯CSS怎么实现从按钮两侧滑入装饰元素的悬停特效”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注亿速云行业资讯频道！