您现在的位置是:首页 > 正文

分享一个随手写的简单css效果

2024-01-30 20:51:07阅读 0

前言

 刚刚随手写了一个网页,添加了一点css的效果,虽然没有很惊艳,但个人认为有点意思,所以就立刻分享给大家了,有兴趣的小伙伴快来看看吧!
 本页面实现了鼠标放置、离开的动态效果以及渐变色背景的效果!

提示:本页面实现环境为Chrome浏览器。


效果图

效果图展示
请添加图片描述

代码

 代码分为基本的HTML与CSS,下面给出具体代码。

HTML

<!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>Document</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="box1">CSDN</div>
    <div class="box1 box2">CSDN</div>
    <div class="box1 box3">CSDN</div>
    <div class="box1 box4">CSDN</div>
    <div class="box1 box5">CSDN</div>
</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
}
.box1{
    font-size: 18px;
    line-height: 18px;
    width: 200px;
    height: 200px;
    margin-left: 10px;
    /* background-color: #5c2223; */
    background: -moz-linear-gradient(
        left,#FC354C,#0ABFBC);
    transition: 1s;
    float: left;
}
.box1:hover{
    margin-left: 2px;
    margin-top: 2px;
    transition: 100ms;
}
.box2{
    background: -moz-linear-gradient(
        left,#3d7eaa,#ffe47a);
}
.box3{
    background: -moz-linear-gradient(
        left,#757f9a,#d7dde8);
}
.box4{
    background: -moz-linear-gradient(
        left,#5c258d,#4389a2);
}
.box5{
    background: -moz-linear-gradient(
        left,#134e5e,#71b280);
}

介绍

 由于代码较为简单,大神可以直接无视本介绍。
 博主认为该案例值得讲一下的地方有两个,一个就是鼠标放上去、挪开时的动态效果,另一个是框框中的渐变背景色

  • 首先我们给每一个div盒子设置了一个margin-left:10px;,这看起来微不足道,但却让我们五个盒子在变化的过程中能达到一个整体动态变化的效果,并且我们还给盒子的初始css属性添加了transition: 1s;,这个属性在第一次加载出页面的时候可能看不出什么端倪,但也同样具有十分重要的作用,因为它的作用是在鼠标移开的时候通过1s的时间去恢复到初始状态,如果没有这一设置,鼠标移开的动画将会显得十分僵硬。最后就是实现动态效果最重要的一步了,就是设置div的hover伪类,不懂伪类的可以查一下,很简单,hover的作用或者意思是当我们鼠标移动到该元素上时,可以通过hover对移动后元素的属性进行更改,比如一个div盒子长、宽是10px、10px,我可以在hover中设置鼠标移动到该div后的长、宽变为100px、100px(但这一变化是瞬间完成的)。最后就是transition属性设置了,博主认为这是实现动态效果最灵魂的一步通过transition设置,我们能够将原本生硬的变化效果变得更舒缓。
  • 对于渐变色的设置,我们只需要知道它用到的是下面这一语句实现的,其中第一个参数代表渐变的颜色起始位置,left即代表从左开始渐变,第二个参数代表左侧开始时的颜色,第三的参数是结束时的颜色。需要注意的是,并不是所有浏览器都使用如下的语句进行设置,他们的区别是-moz-这里,moz是火狐浏览器设置渐变,其他浏览器通过该语句可能无法实现这种效果。
background: -moz-linear-gradient(left,#FC354C,#0ABFBC);

推荐

 另外给大家推荐两个比较好用的配色、选色网站,亲测好用。
 如下列出。

Uigradients

Uigradient官网

中国传统配色网站

中国色官网

Colordrop

colordrop官网

如果有疑问的或不懂的地方欢迎在评论区留言评论。如果你觉得本篇文章对你有帮助的话不妨点个赞吧~

网站文章

  • ajax首页首页显示数据库,ajax显示mysql数据库

    ajax首页首页显示数据库,ajax显示mysql数据库

    ajax显示mysql数据库 内容精选换一换GaussDB(for MySQL)支持的数据库版本,如表1所示。GaussDB(for MySQL)支持内核小版本升级,内核小版本的升级涉及性能提升、新功...

    2024-01-30 20:51:00
  • Qt中的进程与线程

    一、进程内容: 如何在Qt应用程序中启动一个进程; 进程间通讯方法; 使用进程的原因: (1)不希望将一个不太相关的功能集成到程序中 (2)或者是因为该功能与当前设计的应用程序联系不大 (3)或者是因为该功能已经可以使用现成的程序很好实现,可以使用进程调用外部的程序来实现该功能。 I、运行一个进程——QProcess类(继承自QIOdevice) 启动一个进程:调用start函数 ...

    2024-01-30 20:50:31
  • C#_实现月度信息的快捷查询

    日期字段的查询,一般需要输入开始日期和结束日期,有的时候,客户嫌麻烦,想输入2017-07这样的快捷输入来实现月度查询。这样的问题,需要程序自动补全开始日期和结束日期的范围,才能有效的获取需要的数据。开始日期:比较容易获得,条件+01字符串就可以了;结束日期:需要将开始日期转换成datatime,然后计算本月的天数,c#有现成的函数,直接用,太幸福了,然后拼出结束日期,ok。看代码

    2024-01-30 20:50:24
  • Spring常用注解

    Spring常用注解

    2019独角兽企业重金招聘Python工程师标准>>> ...

    2024-01-30 20:50:17
  • 【ChatGPT+Python】Landsat卫星图像黑边去云及旋转校正

    【ChatGPT+Python】Landsat卫星图像黑边去云及旋转校正

    Landsat的遥感影像四个角有黑色区域,这是正常的。但是如果你真的想去掉黑色区域的话,你可以使用重分类,把黑色的区域变成白色,这样和背景就一致了,在发布服务的时候设为白色透明就可以了。旋转正了的话,...

    2024-01-30 20:49:47
  • Struts的三种传参方式

    Struts的三种传参方式

    1、通过属性传参数(Attr) UserAction.java package com.bebig.struts2.user.action; import com.opensymphony.xwork2.ActionSupport; public class UserAction extends ActionSupport { private String name;

    2024-01-30 20:49:39
  • 【OpenCV C++&amp;Python】(一)图像读取、显示和保存

    【OpenCV C++&amp;Python】(一)图像读取、显示和保存

    文章目录OpenCV简介Mat图像存储方式显式创建Mat对象输出格式图像读取、显示和保存C++Python OpenCV简介 OpenCV(开源计算机视觉库)是一个开源库,是基于C/C++开发的: O...

    2024-01-30 20:49:33
  • 模型评估指标

    模型评估指标

    模型评估指标一、回归(Regression)算法指标1. Mean Absolute Error 平均绝对误差2. Mean Squared Error 均方误差3. Root Mean Square...

    2024-01-30 20:48:58
  • 【闲聊杂谈】HTTPS原理详解

    【闲聊杂谈】HTTPS原理详解

    HTTP虽然使用极为广泛, 但是却存在不小的安全缺陷, 主要是其数据的明文传送和消息完整性检测的缺乏, 而这两点恰好是网络支付, 网络交易等新兴应用中安全方面最需要关注的。关于 HTTP的明文数据传输...

    2024-01-30 20:48:49
  • org.hibernate.MappingException: Unknown entity:

    最近学习JEECG框架,使用代码自动生成功能并导入的过程后出现以下问题:页面能正常访问,但是首先前台页面出现NULL,相继后台打印出【org.jeecgframework.core.common.exception.MyExceptionHandler]java.lang.NullPointerException】点击确定后进行增删改查操作,编辑内容新增,提交后前台显示Unknown en

    2024-01-30 20:48:41