css3绘制小玩意

最新推荐文章于 2023-05-11 16:21:02 发布

weixin_43831302

最新推荐文章于 2023-05-11 16:21:02 发布

阅读量112

点赞数

分类专栏：小知识点

原文链接：https://blog.csdn.net/Miracle1203/article/details/105973389?utm_medium=distribute.pc_category.none-task-blog-hot-10.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-10.nonecase&request_id=

版权

小知识点专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.绘制爱心看到了记录一下，原网址https://blog.csdn.net/weixin_43570367/article/details/106018731?utm_medium=distribute.pc_category.none-task-blog-hot-5.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-5.nonecase&request_id=

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .heart {
            width: 400px;
            margin: 100px auto;
            position: relative;
        }

        .lovefall:before,
        .lovefall:after {
            border-radius: 10px 10px 0 0;
            content: "";
            position: absolute;
            width: 20px;
            height: 30px;
            display: block;
            background: red;
        }

        .lovefall:before {
            transform: rotate(45deg);
            left: 7px;
        }

        .lovefall:after {
            transform: rotate(-45deg);
        }
    </style>
</head>

<body>
    <div class="heart">
        <div class="lovefall"></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>红色的月亮</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background: black;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .moon
        {
            width: 8em;
            height: 8em;
            border-radius: 50%;
            background: black;
            box-shadow: inset 0.5em -0.5em crimson;
            position: relative;
            animation: move 2s linear infinite;
        }
        .moon::before,.moon::after
        {
            position: absolute;
            width: 100%;
            height: 100%;
            background: inherit;
            box-shadow: inherit;
            border-radius: inherit;
            content: ""; 
        }
        .moon::before{
            filter: blur(5px);
        }
        .moon::after{
            filter: blur(10px);
        }
        @keyframes move {
            to{
                transform: rotate(1turn);
            }
        }

    </style>
</head>
<body>
    <div class="moon"></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>文本效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #0f0f0f;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .mywords {
            color: #fff;
            font-size: 1.5em;
            line-height: 1.8em;
            margin: 0 1em;

        }

        .mywords span {
            animation: lightin 0.8s both;

        }

        @keyframes lightin {
            from {
                opacity: 0;
            }

            65% {
                opacity: 1;
                text-shadow: 0 0 10px #fff;
            }

            75% {
                opacity: 1;
            }

            to {
                opacity: 0.7;
            }
        }
    </style>
</head>

<body>
    <p class="mywords">
        不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。
    </p>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function () {
            var words = $(".mywords").text().split("");
            $(".mywords").empty();
            words.forEach((w, i) => {
                $(`<span>${w}</span>`)
                    .css({
                        "animation-delay": 0.05 * i + 's'
                    })
                    .appendTo($(".mywords"));
            })
        })
    </script>
</body>

</html>

下雪版本改成下爱心版本了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>想和你一起去看雪</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            height: 100vh;
            background: radial-gradient(ellipse at bottom,
                    #1b2735 0, #090a0f 100%);
            filter: drop-shadow(0 0 10px white);
            position: relative;
        }

        .snow {
            /* width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff; */
            position: absolute;
        }

        .snow:before,
        .snow:after {
            border-radius: 10px 10px 0 0;
            content: "";
            position: absolute;
            width: 20px;
            height: 30px;
            display: block;
            background: pink;
        }

        .snow:before {
            transform: rotate(45deg);
            left: 7px;
        }

        .snow:after {
            transform: rotate(-45deg);
        }

        .mywords {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 1.5em;
            line-height: 2em;
            font-weight: 500;
            display: flex;
            flex-wrap: wrap;

        }

        .mywords span {
            animation: jumpin 0.5s ease-out both;

        }

        @keyframes jumpin {
            from {
                transform: translateY(-20%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <p class="mywords">
        余生我只想和你看雪看星星看月亮，从诗词歌赋谈到人生理想。
    </p>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function () {
            var words = $(".mywords").text().split("");
            $(".mywords").empty();
            words.forEach((w, i) => {
                $(`<span>${w}</span>`).css({
                    "animation-delay": 0.1 * i + 's'
                }).appendTo($(".mywords"));
            });
            for (var i = 0; i < 200; i++) {
                var x = Math.random() * 100;
                var y = Math.random() * 100;
                var scale = Math.random();
                var opacity = Math.random();
                var t1 = Math.random() * 20 + 10;
                var t2 = Math.random() * 30;

                var o = Math.random() * 20 - 10;
                var x1 = x + o;
                var x2 = x + o / 2;

                $(`<style> @keyframes fall${i} {
            ${y}%{
                transform: translate(${x1}vw, ${y}vh) scale(${scale});
            }
            to{
                transform: translate(${x2}vw,100vh) scale(${scale});
            }
        }
    </style>`).appendTo($("head"));
                $('<div class="snow"></div>')
                    .css({
                        "transform": `translate(${x}vw, -10px) scale(${scale})`,
                        "opacity": opacity,
                        "animation": `fall${i} ${t1}s -${t2}s linear infinite`
                    })
                    .appendTo($("body")).end()

            }
        })
    </script>
</body>

</html>

交叉动画效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交叉动画实现</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .wrapper {
            background-color: #222;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dot {
            width: 2em;
            height: 2em;
            margin: 1em;
            border-radius: 50%;
            background-color: red;
            position: relative;
        }

        .dot::before {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: inherit;
            border-radius: inherit;
            content: "";
            animation: wave 2s ease-out infinite;
        }

        /* .dot:nth-of-type(1)::before {
            animation-delay: .2s;
        }

        .dot:nth-of-type(2)::before {
            animation-delay: .4s;
        } */

        /* .dot:nth-of-type(3)::before {
            animation-delay: .6s;
        }

        .dot:nth-of-type(4)::before {
            animation-delay: .8s;
        }

        .dot:nth-of-type(5)::before {
            animation-delay: 1s;
        } */

        /* .dot:nth-of-type(1) {
            background-color: green;
        }

        .dot:nth-of-type(2) {
            background-color: yellow;
        }

        .dot:nth-of-type(3) {
            background-color: blue;
        }

        .dot:nth-of-type(4) {
            background-color: yellowgreen;
        }

        .dot:nth-of-type(5) {
            background-color: white;
        } */

        @keyframes wave {
            50% {
                transform: scale(2.5);
            }

            100% {
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function()
        {
            var $dot=$(".dot");
            for(var i=0;i<$dot.length;i++)
            {
                $(`.dot:nth-of-type(${i+1})`).css({
                    "background-color":`rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
                })
                // $(`.dot:nth-of-type(${i+1})::before`).css({
                //     "animation-delay":i*0.2+"s"
                // })
                $("head").append(
                    `<style>
                        .dot:nth-of-type(${i+1})::before
                        {
                            animation-delay:${i*0.2}s
                        }
                    </style>`
                )
            }
        })
        function random(min,max)
        {
            return Math.floor(Math.random()*(max-min)+min)
        }
    </script>
</body>

</html>

虚线效果

.dotted-line{
    border: 1px dashed transparent;
    background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em);
}

具体的虚线的颜色和间距都可以通过repeating-linear-gradient生成的条纹背景去调整。

文本超出省略号（多行文本）

.multiline-ellipsis {
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; //需要显示的行数
  overflow: hidden;
  text-overflow: ellipsis;
}

扩展: -webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

calc()函数用来计算css属性的值。
用法

/** 属性：calc（expression）*/
width：calc（100％ - 34px）;

卡券效果

.coupon{
  width: 300px;
  height: 100px;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
    radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
    radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
    radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));
}

weixin_43831302

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3绘制小玩意

1.绘制爱心看到了记录一下，原网址https://blog.csdn.net/weixin_43570367/article/details/106018731?utm_medium=distribute.pc_category.none-task-blog-hot-5.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-5.nonecase&request_id=<!DOCTYPE html&
复制链接

扫一扫