CSS动画笔记[旧]
来自2018/8/17
有两个版本

版本一1
版本二2
图片展示:2
静态图
由于时间久远,可能介绍不对
该代码的 抖动特效来源网络,当时对js无了解
代码展示:

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

<head>
    <meta charset="UTF-8">
    <title>Css3</title>
    <style>
        .element::-webkit-scrollbar {
            display: none
        }

        ::-webkit-scrollbar {
            display: none;
        }

        body {
            background-color: #0000001f;
            -webkit-font-smoothing: subpixel-antialiased;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            input,
            button,
            select,
            textarea {
                outline: none
            }
            textarea {
                font-family: monospace;
                border-color: rgb(169, 169, 169);
            }
        }

        .tb {
            display: flex;
            background-color: #ffffffcc;
            text-align: center;
            height: 510px;
            width: 200px;
            left: 250px;
            top: 80px;
            border-radius: 10px 0 0 10px;
        }

        .tb-table {
            width: 100%;
            background-color: #ffffffbd;
            border-radius: 10px 0 0 0;
            height: 54px;
        }

        .tb-table-img {
            position: absolute;
            border-radius: 100%;
            height: 45px;
            left: 10px;
            z-index: 1;
            top: 5px;
        }

        #name {
            float: left;
            color: #505050;
        }

        #pp {
            color: #ccc;
            font-size: 1px;
            float: left;
        }

        .ta {
            position: absolute;
            background-color: #ffffff1c;
            text-align: center;
            height: 429px;
            width: 700px;
            margin: auto;
            left: 200px;
            top: 0;
            font-size: 1px;
            border-radius: 0 10px 0 0;
            overflow: scroll;
            overflow-x: hidden;
            padding: 5px;
        }

        .list-unstyled {
            padding-left: 0;
            list-style: none;
        }

        .mar-btm {
            margin-bottom: 15px;
        }

        li {
            list-style: none;
        }

        .media-block .media-right {
            float: right;
        }

        .media-block .media-left {
            display: block;
            float: left;
        }

        .media-body,
        .media-left,
        .media-right {
            display: table-cell;
            vertical-align: top;

        }

        .media-block .media-body {
            display: block;
            overflow: hidden;
            width: auto;
        }

        .speech-left {
            text-align: left;
        }

        .speech-left>.speech:before {
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            left: 0;
            top: 0;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-right: 7px solid #F5F5F5;
            margin: 15px 0 0 -7px;
        }

        .speech .media-heading {
            font-size: 14px;
            display: block;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            padding-bottom: 5px;
            font-weight: 300;
        }

        .media-heading {
            margin-top: 0;
            margin-bottom: 5px;
        }

        .media-left,
        .media>.pull-left {
            padding-right: 10px;
        }

        .media-body,
        .media-left,
        .media-right {
            display: table-cell;
            vertical-align: top;
        }

        .media-right,
        .media>.pull-right {
            padding-left: 10px;
        }

        .img-circle {
            border-radius: 50%;
        }

        .img-sm {
            width: 40px;
            height: 40px;
        }

        .media-block .media-body {
            display: block;
            overflow: hidden;
            width: auto;
        }

        .speech-right {
            text-align: right;
        }

        .speech-left>.speech {
            text-align: left;
            background: #e8e9ec !important;
        }

        .pad-hor {
            padding-left: 6px;
            padding-right: 6px;
        }

        .speech-right>.speech {
            text-align: right;
            background: #e8e9ec !important;
        }

        .speech {
            padding: 10px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 10px;
            position: relative;
            display: inline-block;
        }

        .speech-right>.speech:before {
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            left: auto;
            right: 0;
            top: 0;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-left: 7px solid #e8e9ec;
            border-right: 0;
            margin: 15px -7px 0 0;
        }

        .media-heading {
            margin-top: 0;
            margin-bottom: 5px;
        }

        .speech p {
            margin: 0px;
            padding-top: 3px;
            font-size: 13px;
        }

        .npa {
            position: absolute;
            top: 8px;
            left: 75px;
        }

        .tx {
            position: absolute;
            width: 710px;
            margin: auto;
            left: 200px;
            top: 438px;
            background-color: #ffffff7d;
            height: 72px;
            border-radius: 0 0 10px 0;
        }

        #txtex {
            margin: 0px;
            display: block;
            width: 699px;
            padding: 5px 0 0;
            height: 64px;
            line-height: 20px;
            border: none;
            resize: none;
            left: 4px;
            position: absolute;
            font-family: verdana, sans-serif;
            font-size: 12px;
            letter-spacing: -0.6pt;
            word-spacing: -0.6pt;
            outline: none;
            background: #ff2f2f00;
        }

        #bg {
            width: 910px;
            height: 510px;
            position: absolute;
            left: 250px;
            top: 80px;
            border-radius: 10px;
            background: url(http://xiaomol.1k.hk/api.jpg) no-repeat center center fixed;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
        }

        .btn-etn {
            position: absolute;
            top: 28px;
            left: 628px;
            display: inline-block;
            vertical-align: top;
            font-size: 14px;
            line-height: 32px;
            margin-left: 5px;
            padding: 0 20px;
            background-color: #5FB878;
            color: #fff;
            text-decoration: none;
            user-select: none;
        }

    </style>
</head>

<body>
    <div id="bg">
        <div class="tb" id="tb">
            <div class="tb-table">
                <img src="https://q1.qlogo.cn/g?b=qq&nk=10086&s=100&t=" alt="" class="tb-table-img">
                <div class="npa">
                    <a id="name">中国联通</a><br>
                    <a id="pp">233</a>
                </div>
            </div>
        </div>
        <div class="ta">
            <ul class="list-unstyled media-block" id="内容" style="overflow:auto; height: 420px;">

                <li class="mar-btm">
                    <div class="media-right">
                        <img src="https://q1.qlogo.cn/g?b=qq&amp;nk=842105949&amp;s=100&amp;t=" class="img-circle img-sm" alt="Profile Picture">
                    </div>
                    <div class="media-body pad-hor speech-right">
                        <div class="speech">
                            <a class="media-heading" style="color: #333;">CcDalao</a>
                            <p id="ddap">哈哈哈哈哈哈哈哈哈哈哈哈哈劳资最牛逼</p>
                        </div>
                    </div>
                </li>


                <li class="mar-btm">
                    <div class="media-left">
                        <img src="https://q1.qlogo.cn/g?b=qq&amp;nk=10086&amp;s=100&amp;t=" class="img-circle img-sm" alt="Profile Picture">
                    </div>
                    <div class="media-body pad-hor speech-left">
                        <div class="speech">
                            <a class="media-heading">中国联通</a>
                            <p id="ddap">哈哈哈你牛B个屁</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="tx">
            <textarea id="txtex" rows="5"></textarea>
            <a onclick="add();" id="发送" class="btn-etn">发送</a>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>

    <input type="button" value="设置预览文字并截取14个字符" id="oc">
    <input type="button" value="抖动" onclick="shock();return false;">
    <input type="button" value="发送" onclick="add();" id="发送">
    <input name="submit" type="button" value="检测发送框内脏话" onclick="zang();" />

    <script type="text/javascript">
        function zang() {
            var obj = document.getElementById("txtex");
            var kw = "傻|逼|习近平|江泽民|胡锦涛|JB"; //要屏蔽的关键词,多个请用英文输入法状态下的逗号
            var tempKw = kw.split("|")
            if (tempKw.length >= 1) {
                for (i = 0; i < tempKw.length; i++) {
                    if (obj.value.indexOf(tempKw[i]) >= 0) {
                        layer.msg('请避开敏感字符!');
                    }else{
                        layer.msg('无敏感字符!');
                    }
                    
                }
            }
        }

    </script>
    <script>
        var box_left = 0;
        $(document).ready(function() {
            box_left = ($(window).width() - $('#bg').width()) / 2;
            $('#bg').css({
                'left': box_left,
                'position': 'absolute'
            });
        });

        function shock() {
            for (i = 1; i < 5; i++) {
                $('#bg').animate({
                    'left': '-=15'
                }, 31, function() {
                    $(this).animate({
                        'left': '+=30'
                    }, 13, function() {
                        $(this).animate({
                            'left': '-=15'
                        }, 13, function() {
                            $(this).animate({
                                'left': box_left
                            }, 13, function() {
                                // shock end
                            });
                        });
                    });
                });
            }
        }

    </script>
    <script>
        $(function() {
            $("#oc").click(function() {
                $("#内容 li:last-child").addClass('red'); // 设置样式
                str = $("#内容 li:last-child #ddap").map(function() { // 获取最后一个锂元素的内容
                    return $(this).text();
                }).get().join(',');
                $("#pp").text(str);
                $("#pp").each(function(i) {
                    if ($(this).text().length > 14) {
                        var text = $(this).text().substring(0, 14) + "...";
                        $(this).text(text);
                    }
                });
            });
        })

    </script>
    <script type="text/javascript">
        function add() {

            if ($("#txtex").val() == "") {

                layer.msg('请输入内容哦!');

            } else {
                var mydate = new Date();
                var t = mydate.toLocaleString();
                var qian = '<li class="mar-btm"><div class="media-right"><img src="https://q1.qlogo.cn/g?b=qq&amp;nk=842105949&amp;s=100&amp;t=" class="img-circle img-sm" alt="Profile Picture"></div><div class="media-body pad-hor speech-right"><div class="speech"><a class="media-heading" style="color: #333;">CcDalao</a><p id="ddap">';
                var txtex = $("#txtex").val()
                var div = document.getElementById('内容');
                div.innerHTML = div.innerHTML + t + qian + txtex + '</p></div></div></li>';
                $("#txtex").val("");
                div.scrollTop = div.scrollHeight;
            }


        }


        document.onkeydown = function(e) {
            if (e.keyCode == 13 && e.ctrlKey) {
                // 这里实现换行
                document.getElementById("a").value += "\n";
            } else if (e.keyCode == 13) {
                // 避免回车键换行
                e.preventDefault();
                if ($("#txtex").val() == "") {

                    layer.msg('请输入内容哦!');

                } else {
                    var mydate = new Date();
                    var t = mydate.toLocaleString();
                    var qian = '<li class="mar-btm"><div class="media-right"><img src="https://q1.qlogo.cn/g?b=qq&amp;nk=842105949&amp;s=100&amp;t=" class="img-circle img-sm" alt="Profile Picture"></div><div class="media-body pad-hor speech-right"><div class="speech"><a class="media-heading" style="color: #333;">CcDalao</a><p id="ddap">';
                    var txtex = $("#txtex").val()
                    var div = document.getElementById('内容');
                    div.innerHTML = div.innerHTML + qian + txtex + '</p></div></div></li>';
                    $("#txtex").val("");
                    div.scrollTop = div.scrollHeight;
                }
            }
        }

    </script>
    <script>
        function dragFunc(id) {
            var Drag = document.getElementById(id);
            Drag.onmousedown = function(event) {
                var ev = event || window.event;
                event.stopPropagation();
                var disX = ev.clientX - Drag.offsetLeft;
                var disY = ev.clientY - Drag.offsetTop;
                document.onmousemove = function(event) {
                    var ev = event || window.event;
                    Drag.style.left = ev.clientX - disX + "px";
                    Drag.style.top = ev.clientY - disY + "px";
                    Drag.style.cursor = "move";
                };
            };
            Drag.onmouseup = function() {
                document.onmousemove = null;
                this.style.cursor = "default";
            };
        };
        dragFunc("bg");

    </script>
</body>

</html>
最后修改:2020 年 03 月 24 日 06 : 11 PM
如果觉得我的文章对你有用,请随意赞赏