HTML设置悬停效果,如何使用纯CSS实现按钮的悬停效果

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义dom，容器是一个无序列表，包含4个元素，代表4个按钮：

home
products
services
contact

居中显示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:cornsilk;

}

去掉列表项前面的符号：

ul{

padding:0;

list-style-type:none;

}

设置按钮的边框和背景的样式，背景采用渐变色，但渐变的方向依次交替：

ulli{

box-sizing:border-box;

width:15em;

height:3em;

font-size:20px;

border-radius:0.5em;

margin:0.5em;

box-shadow:001emrgba(0,0,0,0.2);

}

ulli:nth-child(odd){

background:linear-gradient(toright,orange,tomato);

}

ulli:nth-child(even){

background:linear-gradient(toleft,orange,tomato);

}

设置按钮上文字的样式，依次交替居左或居右：

ulli{

color:white;

font-family:sans-serif;

text-transform:capitalize;

line-height:3em;

}

ulli:nth-child(odd){

text-align:left;

padding-left:10%;

}

ulli:nth-child(even){

text-align:right;

padding-right:10%;

}

设置按钮的透视效果，依次交替向左旋转和向右旋转，此时透视的距离是500px，注意perspective()函数和rotateY()函数的顺序不能写反：

ulli:nth-child(odd){

transform:perspective(500px)rotateY(45deg);

}

ulli:nth-child(even){

transform:perspective(500px)rotateY(-45deg);

}

为按钮增加悬停效果，使悬停时的透视距离变短为200px，透视距离越短，旋转的幅度看起来就越大：

ulli:nth-child(odd):hover{

transform:perspective(200px)rotateY(45deg);

padding-left:5%;

}

ulli:nth-child(even):hover{

transform:perspective(200px)rotateY(-45deg);

padding-right:5%;

}

最后，设置一个缓动时间，使效果转换变得平滑：

ulli{

transition:0.3s;

cursor:pointer;

}

本文转载自中文网

HTML设置悬停效果,如何使用纯CSS实现按钮的悬停效果相关推荐

html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
26.纯 CSS创作按钮被从纸上掀起的立体效果
26.纯 CSS创作按钮被从纸上掀起的立体效果原文地址:https://segmentfault.com/a/1190000014930183 感想:主要2D和3D转换.阴影效果. HTML代码: ...
html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...

HTML设置悬停效果,如何使用纯CSS实现按钮的悬停效果

HTML设置悬停效果,如何使用纯CSS实现按钮的悬停效果相关推荐

最新文章

热门文章