CSS+HTML动手实战（一）鼠标悬停效果

最新推荐文章于 2024-01-15 16:14:08 发布
最新推荐文章于 2024-01-15 16:14:08 发布
阅读量3.6k 收藏 12
点赞数 8
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52932975/article/details/129886841
版权

CSS+HTML动手实战（一）鼠标悬停效果

前言

最近学习完了CSS+HTML，想做几个项目练练手，经朋友告知，可以写代码记录，所以在此进行代码的另类备份以及记录实际动手时发现的问题。（新手向记录，望大佬们海涵！）（每个实战后都附有完整代码）

（一）鼠标悬停实现翻转

通过CSS3中的属性transition实现某个属性发生改变时，产生一个过渡效果，过渡，即属性变换的过程产生一定延迟，并非生分的直接变化，能产生一定的视觉美感（bushi）。

  • 首先设置一个三层的div嵌套，最外层div用于装下实现本次翻转效果的其余div，第二层div可以提供一个拥有两个面的立体空=间，实现翻转的视觉效果，第三层两个div为第二层div的两个面。
<body>
    <div class="out_div">
        <div class="contt">
            <div class="first_div">First Page</div>
            <div class="back_div">Back Page</div>
        </div>
    </div>
</body>
  • 然后为每一个div加上宽高，背景色等基本属性,并将两个需要翻转的div设置为绝对定位，使其脱离文档流（否则两个div的位置会不重叠，翻转时位置产生变化）
<style>
        .out_div{
            display: inline-block;
            width: 160px;
            height: 80px;
        }
        .contt{
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .first_div{
            position: absolute;
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: aqua;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .back_div{
            position: absolute;
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: aquamarine;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
</style>
  • 最后为两个最内层的div设置过渡效果，实现鼠标悬浮时翻转。如下，完整style代码：
    <style>
        .out_div{
            display: inline-block;
            width: 160px;
            height: 80px;
        }
        .contt{
            display: inline-block;

            width: 100%;
            height: 100%;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        .first_div{
            position: absolute;
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: aqua;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            transition: transfrom 0.8s;
            /*设置backface-visibility属性，使得翻转180度后不显示此div，只有在正面时显示*/
            backface-visibility: hidden;
        }
        .back_div{
            position: absolute;
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: aquamarine;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            /* 旋转180使得刚开始看不到这个div */
            transform: rotateX(180deg);
            /*过渡效果在transfrom属性产生变化时生效，使得transfrom属性变化时间延迟至0.8s*/
            transition: transfrom 0.8s;
            /*设置backface-visibility属性，使得翻转180度后不显示此div，只有在正面时显示*/
            backface-visibility: hidden;
        }
        .out_div:hover .contt{
            transform: rotateX(180deg);
        }
    </style>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip测试</title>
    <style>
        .out_div{
            display: inline-block;
            width: 160px;
            height: 80px;
        }
        .contt{
            display: inline-block;

            width: 100%;
            height: 100%;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        .first_div{
            position: absolute;
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: aqua;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            transition: transfrom 0.8s;
            backface-visibility: hidden;
        }
        .back_div{
            position: absolute;
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: aquamarine;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            /* 旋转180使得刚开始看不到这个 */
            transform: rotateX(180deg);
            transition: transfrom 0.8s;
            backface-visibility: hidden;
        }
        .out_div:hover .contt{
            transform: rotateX(180deg);
        }
        
    </style>
</head>
<body>
    <div class="out_div">
        <div class="contt">
            <div class="first_div">First Page</div>
            <div class="back_div">Back Page</div>
        </div>
    </div>
</body>
</html>

（二）鼠标悬停实现闪光

原理同上，利用的是transition的过渡效果。

  • 首先创建一个div，将其当成产生变化的背景
<div class="shin">触摸就会闪光</div>
  • 接着为这个div设置宽高，背景色等基础属性
<style>
        .shin{
            display: inline-block;
            width: 160px;
            height: 80px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
</style>
  • 设置完div基础属性后，我们需要用到CSS中的伪类after（after伪类还可以用于解决高度塌陷问题），将after伪类设置成闪光效果中的那道光。

    为了实现类似光闪烁的效果，可以将after伪类设置为绝对定位，使其脱离文档流，提高层级，达到覆盖div的效果，同时为了不影响鼠标不悬浮时的视觉效果，将after伪类初始位置设置在界面外（left: -50px;）
    <style>
        .shin{
            display: inline-block;
            width: 160px;
            height: 80px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            /*设置为超出时隐藏，可以使得鼠标不悬浮和过渡完后after伪类不会出现在div上层*/
            overflow: hidden;
            /*设置为相对定位可以使得div变成after伪类的包含块，否则after伪类会把根元素html当成它的包含块，使得光束after伪类变化范围出现错误（变成全屏移动的光束了）*/
            position: relative;
        }
        .shin::after{
            content: "";
            background-color: #fff;
            width: 20px;
            /*此处为了模拟的真实，设置的宽度和角度由于div溢出隐藏overflow: hidden的设置，恰好使得旋转后的after伪类显示高度与div一致（实际高度不一致，具体可以删除div的overflow: hidden;属性查看）*/
            height: 120px;
            transform: rotate(30deg);
            left: -50px;
            
            position: absolute;
            transition: left 0.8s;
        }
        .shin:hover::after{
        /*当鼠标悬浮时after伪类从左侧出现，并过渡到div的右侧，但由于div设置了overflow: hidden，故超出时，after伪类会被隐藏*/
            left:120%;
        }
    </style>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shin</title>
    <style>
        .shin{
            display: inline-block;
            width: 160px;
            height: 80px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }
        .shin::after{
            content: "";
            background-color: #fff;
            width: 20px;
            height: 120px;
            transform: rotate(30deg);
            left: -50px;
            position: absolute;
            transition: left 0.8s;
        }
        .shin:hover::after{
            left:120%;
        }
    </style>
</head>
<body>
    <div class="shin">触摸就会闪光</div>
</body>
</html>
结语

这次其实也主要是为了尝试写博客，选择的项目也是非常小白的，主要是练练手和练习博客的写法，下次必须有进步！

请教我编程
关注
html+css 实现hover 3D按钮特效
宝码香车的博客
08-09 1698
这是一个，hover 3D悬浮的按钮效果。附具体代码，深入理解，彻底掌握！直接看代码，可以一键复制，查看效果。
html语言添加鼠标悬停效果,HTML+CSS制作鼠标悬停效果
weixin_33955307的博客
05-31 3399
鼠标悬停效果*{margin: 0;padding: 0;}body{background-color: #000;}a{width: 200px;height: 50px;display: block;text-align: center;line-height: 50px;text-decoration: none;position: absolute;top: 50%;left: 50%;t...
网站开发之鼠标悬停简单特效实现（四）
热门推荐
杨秀璋的专栏
11-06 2万+
鼠标悬停等操作和特效是网站设计非常重要的一个内容，常见的包括包括：鼠标移动悬停放大、鼠标悬停背景颜色变换、鼠标悬停下拉菜单显示、图片旋转等特效，这篇文章主要是总结HTML和JavaScript中关于鼠标操作的一些特效，希望基础性文章对你有所帮助，如果文章中存在错误或不足之处，还请海涵~
HTML-鼠标悬浮文案效果
最新发布
Bruce__taotao的博客
01-15 6429
有时候，我们浏览网站时，鼠标停留在某处后鼠标会提示一些文案。以上就是今天的内容了，简单地讨论hover方式，tiltle 属性方式来实现鼠标悬浮效果。
html实现鼠标悬停效果实现
weixin_45557228的博客
11-18 9540
html实现鼠标悬停效果实现 css写法： a.hand:hover {cursor:hand} style=“cursor:wait” cursor其他取值 复制代码 1 auto ：标准光标 2 default ：标准箭头 3 hand ：手形光标 4 wait ：等待光标 5 text ：I形
鼠标悬停效果
anjignren的博客
04-06 1179
css鼠标悬停效果： html代码： <div class="container"> <div class="box"> <h1>01</h1> <h2>web Learn</h2> <p>he shortest way to do many things is to only one thing at a time.</p> &lt
HTML+CSS 鼠标悬停（一）
weixin_51747920的博客
06-28 2720
实现鼠标悬停效果
使用HTML + CSS实现鼠标悬停的一些奇幻效果
weixin_55846296的博客
04-07 3620
使用HTML + CSS实现鼠标悬停的一些奇幻效果 背景：图一是刚开始的样子，鼠标悬停上去实现图二的效果 参考：各种鼠标悬停效果 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
小米商城html项目实战，js+css+html
12-12
在本项目"小米商城html项目实战，js+css+html"中，我们将深入探讨前端开发中的核心技术：HTML、CSS和JavaScript，以及如何将这些技术有效地应用到实际的电子商务平台建设上。通过这个项目，你可以了解到如何构建一个...
小米商城（html+css+js）
06-29
导航栏的下拉菜单可以通过监听鼠标悬停事件，动态展示子菜单。 4. **电子商务特性**：作为一款电子商务网站，可能会包含商品展示、购物车、结算等功能。HTML可能包含商品列表、价格、库存等数据容器；CSS用于美化...
小米官网首页(高仿)初学者实战练习 html+css+javascript带动画效果
12-23
1. 导航栏下拉切换：当鼠标悬停在导航菜单项上时，下拉菜单会自动展开和收起。这可以通过监听`mouseover`和`mouseout`事件，改变下拉菜单的显示状态来实现。 2. 商品橱窗切换：模拟小米官网的商品轮播图，可以使用...
CSS3实现超酷的鼠标悬停效果
12-07
插件描述：CSS3实现超酷的鼠标悬停效果. 参考示例：http://www.jq22.com/jquery-info4997
CSS3 html5鼠标悬停按钮动画特效.zip
07-11
<link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" /> <link rel="stylesheet" type="text/css" href="css/zzsc.css?3.1.64"> <link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body>[removed][removed] <h1 class="title">CSS3动画按钮</h1> <div id="first" class="buttonBox">   <button>Hover One</button>   <div class="border"></div>   <div class="border"></div> </div> <div id="second" class="buttonBox">   <button>Hover Two</button>   <div class="border"></div>   <div class="border"></div> </div> <div id="third" class="buttonBox">   <button>Hover Three</button>   <div class="border"></div>   <div class="border"></div>   <div class="border"></div>   <div class="border"></div> </div> 鼠标悬停CSS3按钮动画特效是一款通过CSS3 transition和keyframes帧动画实现的鼠标经过按钮动画代码。
鼠标悬停<a>标签效果
05-25
NULL 博文链接：https://michaelfly.iteye.com/blog/474282
HTML+CSS+JS数据可视化大屏平台模板实例19-人口分析大数据
03-25
此外，CSS3的动画和过渡效果可用于增加交互性和视觉吸引力，例如在鼠标悬停或点击时改变图表颜色。 JavaScript（JS）是实现动态功能和交互的关键。在这个模板实例中，JS库如D3.js、ECharts或者Highcharts等可能被...
HTML5+CSS3九款鼠标经过图片展开特效源码.zip
11-03
在“HTML5+CSS3九款鼠标经过图片展开特效源码.zip”这个压缩包中，包含了九种不同的鼠标悬停时图片展开的交互效果，这些都是利用HTML5的元素和CSS3的新特性实现的。 1. **HTML5的新特性**：HTML5引入了更多的语义化...
html鼠标悬停按钮效果,纯css3实现的鼠标悬停动画按钮
weixin_39989668的博客
06-04 547
今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下：实现的代码。html代码：复制代码代码如下:css3代码：复制代码代码如下:body{background-color: #333;}div{width: 200px;height: 200px;margin: 0 auto;}span{position: rel...
鼠标悬停两种效果
m0_73980534的博客
03-05 1101
鼠标悬停效果隐藏和浮现的两种效果
html鼠标悬停多个效果,33个jQuery与CSS3实现的绚丽鼠标悬停效果
weixin_36284062的博客
06-07 567
只要你有创意，完全可以使用CSS3来实现漂亮的动效，当然如果配合jQuery，这样会更加强大，实现更多高级绚丽的动画效果。鼠标hover效果是很常用的，虽然很细微的东西，但网站的细节注定的网站的体验，所以也不要忽视这些小细节。今天整理了33个使用jQuery与CSS3实现绚丽的鼠标悬停效果，有些是纯CSS3的，这些效果你完全可以用在你的网页上，让网站获得更好的体验。Animated Opening...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值