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

虽然什么都没做，但我还是辛苦了

已于 2022-05-19 16:04:25 修改

阅读量459

点赞数 3

文章标签： html css 页面设计动态效果

于 2022-04-01 11:29:30 首次发布

本文链接：https://blog.csdn.net/qq_49175846/article/details/123570072

版权

随手制作的简单css效果

前言
效果图
代码
- HTML
- CSS
介绍
推荐

前言

刚刚随手写了一个网页，添加了一点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);

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

随手制作的简单css效果

前言

效果图

代码

HTML

CSS

介绍

推荐

Uigradients

中国传统配色网站

Colordrop

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

随手制作的简单css效果

前言

效果图

代码

HTML

CSS

介绍

推荐

Uigradients

中国传统配色网站

Colordrop

“相关推荐”对你有帮助么？