CSS动画笔记[旧]
来自2018/8/17
有两个版本
版本一1
版本二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&nk=842105949&s=100&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&nk=10086&s=100&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&nk=842105949&s=100&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&nk=842105949&s=100&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>
1 条评论
哈哈哈哈哈哈哈呃（噎着了）