CSS笔记2[旧](html im demo 包含javascript)

博主： CcDalao
发布时间：2020 年 03 月 24 日
798 次浏览
1 条评论
15152字数
分类： CSS笔记

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

版本一[1][1]
版本二[2][2]
图片展示：![2][4]
![静态图][3]
由于时间久远，可能介绍不对
该代码的 抖动特效来源网络，当时对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"style="">
                    <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"style="">
                        </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"style="">
                        </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"style=""></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"style=""></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>

[1]: https://blog.ccdalao.cn/blog/demo/css/2/old.html
  [2]: https://blog.ccdalao.cn/blog/demo/css/2/index.html
  [3]: https://blog.ccdalao.cn/usr/uploads/time/5e79dbbef2557.png
  [4]: https://blog.ccdalao.cn/usr/uploads/time/5e79dc7db11f8.png

最后修改：2020 年 03 月 24 日