css点击文字后变色_【代码】苹果官网鼠标悬停变色、延迟

最新推荐文章于 2024-06-03 10:59:45 发布

在下乔西西

最新推荐文章于 2024-06-03 10:59:45 发布

阅读量791

点赞数

文章标签： css点击文字后变色

本文链接：https://blog.csdn.net/weixin_34556619/article/details/112092385

版权

本文介绍如何使用CSS实现文字被点击后颜色变化的效果，同时参照苹果官网实现鼠标悬停时的颜色渐变效果，带你领略代码的魅力。

摘要由CSDN通过智能技术生成

一学代码深似海，代码世界趣无穷！

上面的效果就是鼠标放到对象上的效果。 【文末完整代码】那么这是怎么实现的呢？其实计算机对代码的实现比较简单，关键是懂代码的语言和计算机实现你所设置的命令，当然写代码的思维和我们是相反的，上面用的是css语言，html最为明显的特点就是通过尖括号“<>”包围对象。首先，必须明白在代码的世界里怎么去写。从动图里看出只有黑色的背景和文字。在代码的世界中通过“盒子”的概念进行编写，也就是说这里整个黑色的大背景为一个“盒子”，其次，里面的导航文字为一个“盒子”，后期通过对“盒子”进行弹性的设置以及类标签的属性设置实现上面的交互原理。根据页面显示写9个小“盒子”的代码：

<body>    <div class="yetou-hezi">      <nav class="yetou-daohang">        <a href=""><i class="fa fa-apple">i>a>        <a href="">Maca>        <a href="">ipada>        <a href="">iphonea>        <a href="">Watcha>        <a href="">Musica>        <a href="">技术支持a>        <a href=""><i class="fa fa-search">i>a>        <a href=""><i class="fa fa-shopping-bag">i>a>      nav>    div>  body>

每个“盒子”写完以后，对其进行属性的赋予(如上图中红色的字)，再将父级的边距去掉，a标签的字体颜色设为白色：

body{margin: 0px;}      a{text-decoration: none;color: white;}

接下来对 yetou-hezi 和 yetou-daohang 进行设置：设置这两个对象是通过【类标签】的设置，格式为：“. + 名字{}”，如下：

.yetou-hezi{background-color: black;padding: 10px 0px;}      .yetou-daohang{display: flex;justify-content: space-between;max-width: 1180px;margin-left: auto;/* 左边距自动 */ margin-right: auto;/* 右边距自动 */}

yetou-hezi设置它的背景色和内边距，如1；yetou-daohang 设置弹性盒子、水平居中对齐、1180px最大宽度和左外边框自动，如2；最为关键的是3.4 ，这两步一个是实现悬停效果，一个是实现颜色过度时间。悬停代码hover{}, 变色过度颜色是transtion。

.yetou-daohang a:hover{color: red;background-color: bisque;font-size: 20px;}  /* 只针对导航里的a 标签内容字产生鼠标经过变色的效果 背景颜色 字体大小*/      .yetou-daohang a{transition: 2s;}  /* 只针对导航里的a 标签内容字产生鼠标经过变色的效果2s 过度变化 */

当然，这里面都是针对类标签中a标签的设置，写个红色字体颜色，20px小的字体和过渡时间2s 就实现了悬停效果！不过这里要明白：.yetou-dnohang{} 和a{} 的相关知识，不然你是看不懂的

完整代码和注释如下：

<html>  <head>    <meta charset="utf-8">    <title>苹果官网导航title>    <link href="css/font-awesome.css" rel="stylesheet">       <style>      body{margin: 0px;}      a{text-decoration: none;color: white;}      .yetou-hezi{background-color: black;padding: 10px 0px;}      .yetou-daohang{display: flex;justify-content: space-between;max-width: 1180px;margin-left: auto;/* 左边距自动 */ margin-right: auto;/* 右边距自动 */}      .yetou-daohang a:hover{color: red;background-color: bisque;font-size: 20px;}  /* 只针对导航里的a 标签内容字产生鼠标经过变色的效果 背景颜色 字体大小*/      .yetou-daohang a{transition: 2s;}  /* 只针对导航里的a 标签内容字产生鼠标经过变色的效果2s 过度变化 */style>  head>  <body>    <div class="yetou-hezi">      <nav class="yetou-daohang">        <a href=""><i class="fa fa-apple">i>a>        <a href="">Maca>        <a href="">ipada>        <a href="">iphonea>        <a href="">Watcha>        <a href="">Musica>        <a href="">技术支持a>        <a href=""><i class="fa fa-search">i>a>        <a href=""><i class="fa fa-shopping-bag">i>a>      nav>    div>  body>html>

最后的最后附上HTML 和 css属性的代码学习基本名称：

在下乔西西

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css点击文字后变色_【代码】苹果官网鼠标悬停变色、延迟

一学代码深似海，代码世界趣无穷！上面的效果就是鼠标放到对象上的效果。【文末完整代码】那么这是怎么实现的呢？其实计算机对代码的实现比较简单，关键是懂代码的语言和计算机实现你所设置的命令，当然写代码的思维和我们是相反的，上面用的是css语言，html最为明显的特点就是通过尖括号“<>”包围对象。首先，必须明白在代码的世界里怎么去写。从动图里看出只有黑色的背景和文字。在代码的世界中...
复制链接

扫一扫