web---特效

最新推荐文章于 2023-04-18 14:21:44 发布

阳光搬运工

最新推荐文章于 2023-04-18 14:21:44 发布

阅读量78

点赞数

分类专栏： web前端基础笔记文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_57097732/article/details/119351501

版权

笔记同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

web前端基础

30 篇文章 0 订阅

订阅专栏

阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: cyan;
            box-shadow: -50px -50px 100px tomato;
        }
        p {
            font-size: 2em;
            text-shadow: 1px 1px 1px gray;
        }
        section {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        section:hover {
            cursor: pointer;
            box-shadow: 0 8px 10px gray;
        }
    </style>
</head>
<body>
    <div></div>
    <p>知了堂知了堂知了堂知了堂知了堂</p>
    <section></section>
</body>
</html>

运行结果

渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gradient</title>
    <style>
       div {
            width: 500px;
            height: 200px;
            margin-bottom: 100px;
        }
        .ch {
            background-image: -webkit-radial-gradient(center bottom, white 40%,purple, deepskyblue, cyan, greenyellow, gold, orange, tomato,white 60%);
            background-image: radial-gradient(center bottom, white 40%, purple, deepskyblue, cyan, greenyellow, gold, orange, tomato, white 60%);
        }
    </style>
</head>
<body>
    <div class="ch"></div>
</body>
</html>

运行结果

过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡transition</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: cyan;
            transition: .3s;
        }
        div:hover {
            cursor: pointer;
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

变形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变形transform</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-image: url(img/xhr.jpeg);
            background-size: cover;
            transition: .5s;
        }
        section {
            width: 200px;
            height: 200px;
            line-height: 200px;
            color: white;
            text-align: center;
            background-color: deepskyblue;
            margin-left: 100px;
            transform-origin: left top;
            transition: .5s;
        }
        section:hover {
            transform: rotate(60deg);
        }
 
        div:hover {
            /*平移*/
            /*transform: translateX(100px);*/
            /*旋转   deg   turn  grad*/
            /*transform: rotate(360deg);*/
            /*transform: rotate(1turn);*/
            /*transform: rotate(400grad);*/
            /*transform: rotateX(90deg);*/
            /*缩放*/
            /*transform: scaleY(.2);*/
            /*transform: scale(3);*/
            /*倾斜*/
            /*transform: skewY(-90deg);*/
        }
    </style>
</head>
<body>
    <div></div>
    <p>知了堂</p>
    <section>Rotate</section>
</body>
</html>

注意：变形不会影响文档流

滤镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>filter过滤</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-image: url(img/xhr.jpeg);
            background-size: cover;
 
            /*模糊*/
            /*filter: blur(1px);*/
            /*亮度*/
            /*filter: brightness(2)*/
            /*对比度*/
            /*filter: contrast(2);*/
            /*阴影*/
            /*filter: drop-shadow(5px 5px 5px tomato);*/
            /*灰度*/
            /*filter: grayscale(1);*/
            /*色相转变*/
            /*filter: hue-rotate(360deg);*/
            /*反转*/
            /*filter: invert(1);*/
            /*透明度*/
            /*filter: opacity(.25);*/
            /*饱和度*/
            /*filter: saturate(4.25);*/
            /*褐色*/
            /*filter: sepia(.5);*/
        }
        section {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: 3s;
        }
        section:hover {
            filter: hue-rotate(360deg);
        }
    </style>
</head>
<body>
    <div></div>
 
    <section></section>
</body>
</html>

阳光搬运工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web---特效

目录阴影渐变过渡变形滤镜阴影<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style>...
复制链接

扫一扫