#856
展开↯#857
作者：北京市
You keep pressing until it hurts. Then you know where to look。
文章：@意见反馈/技术支持/伊网/安企网 发表时间：2017-11-01, 01:41:05
#858
作者：广西南宁市
火速标题截取后两个字中文汉字红色
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
<?php
$newwstt=mb_substr($r['name'],2,4,'utf-8');
$r['name']=str_ireplace($newwstt,'<span class="fcred">'.$newwstt.'</span>',$r['name']);
?>Run code
Cut to clipboard
文章：PHP分割txt纯文本小说格式章节 发表时间：2017-10-31, 18:14:54
#859
作者：广西南宁市
js将div中滚动条滚动到指定位置
Js代码：
Html代码：
Js代码：
onload = function () {
//初始化
scrollToLocation();
};
function scrollToLocation() {
var mainContainer = $('#thisMainPanel'),
scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
//scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
//非动画效果
//mainContainer.scrollTop(
// scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
//);
//动画效果
mainContainer.animate({
scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
}, 2000);//2秒滑动到指定位置
}Run code
Cut to clipboard
Html代码：
<div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">
<div class="son-panel">我是类容区域-1</div>
<div class="son-panel">我是类容区域-2</div>
<div class="son-panel">我是类容区域-3</div>
<div class="son-panel">我是类容区域-4</div>
<div class="son-panel" style="height:160px;">我是类容区域-5</div>
<div class="son-panel">我是类容区域-6</div>
<div class="son-panel">我是类容区域-7</div>
<div class="son-panel">我是类容区域-8</div>
</div>Run code
Cut to clipboard
文章：CSS3可控旋转Js播放音乐按钮 发表时间：2017-10-31, 18:11:56
#860
作者：广西南宁市
html5 audio标签播放完成后事件
var audioaud = document.getElementById("fmmmedia");
audioaud.addEventListener('ended',function(){
var ids = document.getElementById('fmmmedia');
var target = document.getElementById('audio-btn');
ids.pause();
$(target).removeClass('on').addClass('off');
$("#mmuslisss").hide();
});
Run code
Cut to clipboard
文章：CSS3可控旋转Js播放音乐按钮 发表时间：2017-10-31, 15:07:25
#861
作者：广西南宁市
jquery each判断是否执行到最后一个元素
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()
{
var len = $ (":button").length;
$ (":button").each (function (i, dom)
{
if (i === len - 1)
{
alert (i)
}
});
})
</script>
</head>
<body>
<button>toggle</button>
<button>toggle</button>
<button>toggle</button>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-31, 12:26:08
#862
作者：广西南宁市
weiphp onethinkphp 多个编辑器bug修复
问题是由于框架没有考虑到一个页面多个uditor实例，所以框架中的写法是读取模型字段的时候，有编辑器类型的字段就引入ueditor的js文件，并创建1个imageEditor对象变量。但是这样有多个编辑器的情况下，ueditor初始化js文件和imageEditor肯定是会相互覆盖的。
我的解决方法是重写框架的加载方法，用静态变量判断是否已经加载了ueditor.all.js这个文件，如果加载了不重复加载。另外编辑器实例的创建使用!function(){}()风格，把imageEditor这个变量封装到函数中作为局部变量，千万不能放在全局中。
\Addons\EditorForAdminRun code
Cut to clipboard
问题是由于框架没有考虑到一个页面多个uditor实例，所以框架中的写法是读取模型字段的时候，有编辑器类型的字段就引入ueditor的js文件，并创建1个imageEditor对象变量。但是这样有多个编辑器的情况下，ueditor初始化js文件和imageEditor肯定是会相互覆盖的。
我的解决方法是重写框架的加载方法，用静态变量判断是否已经加载了ueditor.all.js这个文件，如果加载了不重复加载。另外编辑器实例的创建使用!function(){}()风格，把imageEditor这个变量封装到函数中作为局部变量，千万不能放在全局中。
<else />
<?php
$_SESSION['nfasdfasdfsdasad']++;
if($_SESSION['nfasdfasdfsdasad']==2){
?>
<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.config.js?v={:SITE_VERSION}"></script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.all.js?v={:SITE_VERSION}"></script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/lang/zh-cn/zh-cn.js?v={:SITE_VERSION}"></script>
<?php
}
?>
<script type="text/javascript">
$('textarea[name="{$addons_data.name}"]').attr('id', 'editor_id_{$addons_data.name}');
window.UEDITOR_HOME_URL = "__STATIC__/ueditor/";
window.UEDITOR_CONFIG.initialFrameHeight = parseInt('{$addons_config.editor_height}');
window.UEDITOR_CONFIG.scaleEnabled = <eq name="addons_config.editor_resize_type" value="1">true<else />false</eq>;
window.UEDITOR_CONFIG.imageUrl = '{:addons_url("EditorForAdmin://Upload/ue_upimg")}';
window.UEDITOR_CONFIG.imagePath = '';
window.UEDITOR_CONFIG.imageFieldName = 'imgFile';
//在这里扫描图片
window.UEDITOR_CONFIG.imageManagerUrl='{:addons_url("EditorForAdmin://Upload/ue_mgimg")}';//图片在线管理的处理地址
window.UEDITOR_CONFIG.imageManagerPath='';
var imageEditor = UE.getEditor('editor_id_{$addons_data.name}');
//添加一下判断是否是单个按钮管理图片 需要执行一下代码
<if condition="isset($addons_data['btnClassName'])" >
imageEditor.ready(function () {
//设置编辑器不可用
imageEditor.setDisabled();
//隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
imageEditor.hide();
//侦听图片上传
imageEditor.addListener('beforeInsertImage', function (t, arg) {
//将地址赋值给相应的input,只去第一张图片的路径
//console.log(t);
//console.log(arg);
<if condition="empty($addons_data['is_mult'])" >
//单张情况
$(".{$addons_data.name}_preview").html("");
var imghtml = $("<img src="+arg[0].src+" width='100' height='100'/>");
$(".{$addons_data.name}_preview").append(imghtml);
//储存路劲
//单张图片存储图片id
$("#editor_id_{$addons_data.name}").text(arg[0].id);
//图片预览
$(".{$addons_data.name}_preview").show();
//微信预览
$('.weixin-cover-pic').attr('src',arg[0].src);
//console.log(arg);
<else />
//多张情况
var srcs = "";
var srcIds = "";
//$(".{$addons_data.name}_preview").html("");
for(var i=0;i<arg.length;i++){
if(i==arg.length-1){
srcs = srcs + arg[i].src;
srcIds = arg[i].id;
}else{
srcs = srcs + arg[i].src+"|";
srcIds = srcIds + arg[i].id+",";
}
var imghtml = $("<img src="+arg[i].src+" width='100' height='100'/>");
$(".{$addons_data.name}_preview").append(imghtml);
//console.log(arg[i].src);
}
$(".{$addons_data.name}_preview").append(imghtml);
$(".{$addons_data.name}_preview").show();
var oldIds = $("#editor_id_{$addons_data.name}").text();
//多张图片存储一逗号分隔的id串
$("#editor_id_{$addons_data.name}").text(oldIds+","+srcIds);
</if>
})
//增加按钮className
$('.{$addons_data.btnClassName}').bind('click',function(){
var uploadImage = imageEditor.getDialog("insertimage");
uploadImage.open();
})
});
</if>
</script>
<?php
if($_SESSION['nfasdfasdfsdasad']>2) $_SESSION['nfasdfasdfsdasad']=1;
?>
</eq>Run code
Cut to clipboard
\Public\static\ueditor\ueditor.all.jsRun code
Cut to clipboard
id: 'ueditor_' + Math.random(),//me.uid,Run code
Cut to clipboard
\Addons\EditorForAdmin\content.htmlRun code
Cut to clipboard
文章：weiphp微信第三方开发框架新增插件后列表页新增页面空白解决办法 发表时间：2017-10-31, 10:16:29
#863
作者：广西南宁市
可以使用亦或
int a = 2;
int b = 3;
a = a^b;
b = a^b;
a= a^b;1 , 只是基本类型交换 基本类型大数据的交换节省个了很多性能
int a = 2;
int b = 3;
a = a^b;
b = a^b;
a= a^b;
文章：js一些算法小技巧 发表时间：2017-10-30, 17:17:16
#864
作者：广西南宁市
for(i in json)
最好写成 for(var i in json) 否则i就变成全局的了, 会污染整个window
最好写成 for(var i in json) 否则i就变成全局的了, 会污染整个window
文章：js一些算法小技巧 发表时间：2017-10-30, 17:17:06
#865
作者：广西南宁市
为 iPhoneX 而生的小效果
就是兼容不好，只有webkit内核支持。
就是兼容不好，只有webkit内核支持。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
::-webkit-scrollbar{
width: 0;
height: 0;
}
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
background: #000;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
ul{
list-style: none;
}
li{
padding: .5em;
box-shadow: inset 0 0 10px #eee;
}
.wrap{
position: relative;
margin: 0 auto;
width: 800px;
height: 500px;
overflow: auto;
background: #fff;
box-shadow: 0 0 15px #fff;
}
.po{
position: absolute;
left: 0;
top: 155px;
width: 30px;
height: 190px;
background: #000;
border-radius: 0 100% 100% 0/0 100% 100% 0;
}
.fl{
float: left;
width: 40px;
shape-outside: polygon(0 150px, 20px 152px, 30px 155px, 40px 170px, 40px 330px, 30px 345px, 20px 348px, 0 350px);
}
</style>
</head>
<body>
<div class="wrap">
<div class="po"></div>
<div class="fl"></div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
<script type="text/javascript">
var wrap = document.querySelector('.wrap');
var ul = document.querySelector('.wrap ul');
var fl = document.querySelector('.wrap .fl');
var po = document.querySelector('.wrap .po');
fl.style.height = ul.scrollHeight + 'px';
wrap.onscroll = function(e){
var s = wrap.scrollTop;
fl.style.shapeOutside = 'polygon(0 '+(150+s)+'px, 20px '+(152+s)+'px, 30px '+(155+s)+'px, 40px '+(170+s)+'px, 40px '+(330+s)+'px, 30px '+(345+s)+'px, 20px '+(348+s)+'px, 0 '+(350+s)+'px)';
po.style.top = 155 + s +'px';
}
</script>
</body>
</html>Run code
Cut to clipboard
文章：利用CSS属性环绕布局Shapes绘制各个形状图形形状文本文字环绕特效 发表时间：2017-10-28, 16:42:57
#867
作者：广西南宁市
div等标签获取焦点绑定keypress等事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.box{
width: 300px;
padding: 30px 20px;
background-color: #f4d5e8;
margin: 50px;
font-size: 24px;
color: #ccc;
text-align: center;
}
#box2{
color: #4c9579;
background-color: #d5f4e8;
}
.box:focus{
border: solid 1px #d5e8f4;
box-shadow: 0 0 5px 2px #d5e8f4;
}
</style>
</head>
<body>
<div class="box" id="box1">我不能获得焦点</div>
<div class="box" id="box2" tabindex="1">点我可以获得焦点。因为我有【tabindex】属性</div>
<script>
document.getElementById('box2').onfocus = function(){
this.innerHTML = "现在请敲击键盘！！";
}
document.getElementById('box2').onblur = function(){
this.innerHTML = "点我可以获得焦点。因为我有【tabindex】属性";
}
//能获得焦点的div才可以使用keypress等键盘事件
document.getElementById('box2').onkeypress = function(e){
this.innerHTML = "只有获得焦点，才能用keypress等事件。您按的是【"+e.key+"】。";
}
//没有焦点的div等普通dom元素 就算绑定也没用！
document.getElementById('box1').onkeypress = function(e){
alert('就算绑定了也没用！！');
}
</script>
</body>
</html>Run code
Cut to clipboard
文章：让输入框获取焦点 JS 发表时间：2017-10-28, 14:44:07
#868
作者：广西南宁市
table border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<style>
table{border-collapse:collapse;border:1px solid #ddd;}
th,td{border:1px solid #ddd;}
</style>
</head>
<body>
<table>
<tr><th>132</th><td>132</td></tr>
<tr><th>132</th><td>132</td></tr>
</table>
</body>
</html>Run code
Cut to clipboard
文章：实现表格每行随鼠标的移动改变颜色 发表时间：2017-10-28, 14:43:13
#869
作者：广西南宁市
canvas放大镜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#cvs{
border: 1px solid red;
box-shadow: 10px 10px 10px gray;
}
</style>
</head>
<body>
<canvas id="cvs" width="1000" height="600"></canvas>
<script type="text/javascript">
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
// 创建图片
var img = new Image();
img.src = "http://li.img.pan.lizhenqiu.com/f9fb4f79f59fad81f092f0d18265d759.jpg";
// 先将图片绘制到画布上
img.onload = function(){
ctx.beginPath();
// 从画布的原点开始绘制图片
ctx.drawImage(img,0,0);
// 添加鼠标事件
cvs.onmouseover = function(){
cvs.onmousemove = function(e){
//每次移动都要清除画布
ctx.clearRect(0,0,cvs.width,cvs.height);
// 再次将图片绘制到画布上
ctx.drawImage(img,0,0);
// 移动的时候开始不断获取鼠标位置
var ev = e||window.event;
// 获取鼠标相对于画布的位置
var x = ev.clientX - cvs.offsetLeft;
var y = ev.clientY - cvs.offsetTop;
// 开始绘制放大区域
ctx.drawImage(img,x-50,y-50,100,100,x-100,y-100,200,200);
}
}
cvs.onmouseout=function(){
ctx.clearRect(0,0,cvs.width,cvs.height);
}
}
</script>
</body>
</html>
Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 14:41:05
#870
展开↯#871
作者：广西南宁市
简单自动打字机效果，打完清空从头开始
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<script type="text/javascript">
var count=0;
var newstr="";
var other = "|"
var odiv = document.getElementsByTagName('div')[0]
var timer = setInterval(function(){
var str = "哈哈哈哈哈哈哈哈哈哈哈哈嗝~哈哈哈哈哈哈哈哈哈哈哈哈哈嗝~";
newstr += str[count];
odiv.innerHTML = newstr + other;
count++;
if(count == str.length+1){
odiv.innerHTML = "";
newstr = "";
count=0;
timer;
}
},200)
</script>
</body>
</html>Run code
Cut to clipboard
文章：JS打字机效果 发表时间：2017-10-28, 11:40:55
#872
作者：广西南宁市
JavaScript事件委托实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box">
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<a>第一个a</a>
</ul>
</div>
<script>
var Obox = document.getElementById('box')
Obox.addEventListener('click',function (e){
var l = e.target
while(l.tagName !== 'LI'){
if(l === ul){
l = null
break;
}
l = l.parentNode
}
if (l) {
alert(l.innerHTML);
}
})
</script>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 11:38:57
#873
作者：广西南宁市
数组排序的一个实例--冒泡排序法
var arr = [453,43,4,6,46,34,4,7,1,5]//原数组
for (var i = 0; i < arr.length-1; i++) {
for (var j = 0; j < arr.length-1-i; j++) {
if (arr[j]>arr[j+1]) {//判断如果j>j+1就交换位置
var temp = arr[j]
arr[j]=arr[j+1]
arr[j+1]=temp
}
}
}
document.write(arr);Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 11:38:30
#874
作者：广西南宁市
利用indexOf()方法进行数组去重的实例
var arr = ['32','23','4','12','4','35','64','4','35','64']//原数组
var newarr = []//定义一个新数组
for (var i = 0; i < arr.length; i++) {
if (newarr.indexOf(arr[i])==-1) { //在新数组中查找有没有这个数，如果等于-1说明没找到
newarr.push(arr[i])
}
}
document.write(newarr);
Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 11:38:11
立方体魔方中里面包含小正方体方块图标
<style> .cube-wrapper[data-v-bc50a1ba] { width: 100%; position: relative; -webkit-transform: scale(.25); transform: scale(.25); height: 50px; z-index: -1 } .cube-wrapper .cube[data-v-bc50a1ba],.cube-wrapper .cube li[data-v-bc50a1ba] { position: absolute; display: block } .cube-wrapper .cube[data-v-bc50a1ba] { width: 100%; height: 100%; padding: 0; -webkit-transform-origin: 50px 50px; transform-origin: 50px 50px; -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: slow-spin-data-v-bc50a1ba 3s linear infinite; animation: slow-spin-data-v-bc50a1ba 3s linear infinite; margin: -50px 0 0 -50px; top: 50%; left: 50% } .cube-wrapper .cube li[data-v-bc50a1ba] { width: 75pt; height: 75pt } .cube-wrapper .cube li[data-v-bc50a1ba]:after { content: ""; display: block; position: absolute; width: 75pt; height: 75pt; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: rgba(33,150,243,.2) } .cube-wrapper .cube .back[data-v-bc50a1ba],.cube-wrapper .cube .front[data-v-bc50a1ba],.cube-wrapper .cube .left[data-v-bc50a1ba],.cube-wrapper .cube .right[data-v-bc50a1ba],.cube-wrapper .cube .top[data-v-bc50a1ba] { background: radial-gradient(transparent 30%,rgba(6,68,117,.2) 100%) } .cube-wrapper .cube .front[data-v-bc50a1ba] { -webkit-transform: translateZ(50px); transform: translateZ(50px) } .cube-wrapper .cube .back[data-v-bc50a1ba] { -webkit-transform: rotateX(-180deg) translateZ(50px); transform: rotateX(-180deg) translateZ(50px) } .cube-wrapper .cube .right[data-v-bc50a1ba] { -webkit-transform: rotateY(90deg) translateZ(50px); transform: rotateY(90deg) translateZ(50px) } .cube-wrapper .cube .left[data-v-bc50a1ba] { -webkit-transform: rotateY(-90deg) translateZ(50px); transform: rotateY(-90deg) translateZ(50px) } .cube-wrapper .cube .top[data-v-bc50a1ba] { -webkit-transform: rotateX(90deg) translateZ(50px); transform: rotateX(90deg) translateZ(50px) } .cube-wrapper .cube .top[data-v-bc50a1ba]:after { background-color: rgba(33,150,243,.2) } .cube-wrapper .cube .bottom[data-v-bc50a1ba] { -webkit-transform: rotateX(-90deg) translateZ(50px); transform: rotateX(-90deg) translateZ(50px) } .cube-wrapper .cube .floor[data-v-bc50a1ba] { box-shadow: -300px 0 50px rgba(0,0,0,.3); -webkit-backface-visibility: visible; backface-visibility: visible; width: 110px; height: 110px; left: 295px; background-color: transparent; -webkit-transform: rotateX(-90deg) translateZ(60px); transform: rotateX(-90deg) translateZ(60px) } .cube-wrapper .cube .floor[data-v-bc50a1ba]:after { display: none } .cube-wrapper .cube-inner[data-v-bc50a1ba],.cube-wrapper .cube-inner li[data-v-bc50a1ba] { position: absolute; display: block } .cube-wrapper .cube-inner[data-v-bc50a1ba] { width: 100%; height: 100%; padding: 0; top: 50%; left: 50%; -webkit-transform-origin: 25px 25px; transform-origin: 25px 25px; margin: -25px 0 0 -25px; -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: fast-spin-data-v-bc50a1ba 3s linear infinite; animation: fast-spin-data-v-bc50a1ba 3s linear infinite } .cube-wrapper .cube-inner li[data-v-bc50a1ba] { width: 50px; height: 50px } .cube-wrapper .cube-inner li[data-v-bc50a1ba]:after { content: ""; display: block; position: absolute; width: 50px; height: 50px; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: rgba(0,0,0,.2) } .cube-wrapper .cube-inner .back[data-v-bc50a1ba],.cube-wrapper .cube-inner .front[data-v-bc50a1ba],.cube-wrapper .cube-inner .left[data-v-bc50a1ba],.cube-wrapper .cube-inner .right[data-v-bc50a1ba],.cube-wrapper .cube-inner .top[data-v-bc50a1ba] { background: radial-gradient(transparent 30%,rgba(0,0,0,.2) 100%) } .cube-wrapper .cube-inner .front[data-v-bc50a1ba] { -webkit-transform: translateZ(25px); transform: translateZ(25px) } .cube-wrapper .cube-inner .back[data-v-bc50a1ba] { -webkit-transform: rotateX(-180deg) translateZ(25px); transform: rotateX(-180deg) translateZ(25px) } .cube-wrapper .cube-inner .right[data-v-bc50a1ba] { -webkit-transform: rotateY(90deg) translateZ(25px); transform: rotateY(90deg) translateZ(25px) } .cube-wrapper .cube-inner .left[data-v-bc50a1ba] { -webkit-transform: rotateY(-90deg) translateZ(25px); transform: rotateY(-90deg) translateZ(25px) } .cube-wrapper .cube-inner .top[data-v-bc50a1ba] { -webkit-transform: rotateX(90deg) translateZ(25px); transform: rotateX(90deg) translateZ(25px) } .cube-wrapper .cube-inner .top[data-v-bc50a1ba]:after { background-color: rgba(0,0,0,.2) } .cube-wrapper .cube-inner .bottom[data-v-bc50a1ba] { -webkit-transform: rotateX(-90deg) translateZ(25px); transform: rotateX(-90deg) translateZ(25px) } @-webkit-keyframes slow-spin-data-v-bc50a1ba { 0% { -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg) } to { -webkit-transform: rotateX(-33.5deg) rotateY(225deg); transform: rotateX(-33.5deg) rotateY(225deg) } } @keyframes slow-spin-data-v-bc50a1ba { 0% { -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg) } to { -webkit-transform: rotateX(-33.5deg) rotateY(225deg); transform: rotateX(-33.5deg) rotateY(225deg) } } @-webkit-keyframes fast-spin-data-v-bc50a1ba { 0% { -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg) } to { -webkit-transform: rotateX(-33.5deg) rotateY(-315deg); transform: rotateX(-33.5deg) rotateY(-315deg) } } @keyframes fast-spin-data-v-bc50a1ba { 0% { -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg) } to { -webkit-transform: rotateX(-33.5deg) rotateY(-315deg); transform: rotateX(-33.5deg) rotateY(-315deg) } } </style><div data-v-69ecf4ec="" class="logo"><a data-v-69ecf4ec="" href="/" class="router-link-exact-active router-link-active"><section data-v-bc50a1ba="" data-v-69ecf4ec="" class="cube-wrapper"><ul data-v-bc50a1ba="" class="cube-inner"><li data-v-bc50a1ba="" class="front"></li> <li data-v-bc50a1ba="" class="back"></li> <li data-v-bc50a1ba="" class="right"></li> <li data-v-bc50a1ba="" class="left"></li> <li data-v-bc50a1ba="" class="top"></li> <li data-v-bc50a1ba="" class="bottom"></li></ul> <ul data-v-bc50a1ba="" class="cube"><li data-v-bc50a1ba="" class="front"></li> <li data-v-bc50a1ba="" class="back"></li> <li data-v-bc50a1ba="" class="right"></li> <li data-v-bc50a1ba="" class="left"></li> <li data-v-bc50a1ba="" class="top"></li> <li data-v-bc50a1ba="" class="bottom"></li> <li data-v-bc50a1ba="" class="floor"></li></ul></section></a></div>