三角旋转1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="icon/iconfont.css" />
<link rel="stylesheet" href="icon2/iconfont.css" />
<style type="text/css">
.sanjiao{
color: #fff;
}
.sanjiao-active{
color: #fff;
}
.sanjiao::before{
width: 0;
height: 0;
border-top: 12px solid #fff;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
content: "";
position: absolute;
top: 4px;
right: 5px;
-webkit-transition:0.3s;
-o-transition:0.3s;
transitoin:0.3s;
}
.sanjiao-active::before{
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
.clearfix {
clear: both;
}
.clearfix:after {
clear: both;
content: "";
display: block;
height: 0;
visibility: hidden;
}
.fl {
float: left;
}
.fr {
float: right;
}
.pager {
max-width: 800px;
text-align: center;
margin-bottom: 30px;
display: inline-block;
}
.pager a{
cursor: pointer;
}
.pager a,
.pager span {
width: 29px;
height: 28px;
border: 1px #cccccc solid;
margin-left: -1px;
color: #8a8a8a;
display: inline-block;
line-height: 28px;
float: left;
font-size: 12px;
text-decoration: none;
margin: 0 2px;
}
.pager a:hover,
.pager span:hover {
border-color: #3897cd;
color: #3897cd;
position: relative;
z-index: 1;
}
.pager span.current {
background-color: #3897cd;
color: #fff;
border-color: #3897cd;
position: relative;
z-index: 1;
}
.pager .pg-first,
.pager .pg-prev,
.pager .pg-next,
.pager .pg-last{
background: url(images/page_bg.jpg) 0 0 no-repeat;
}
.pager .pg-first:hover,
.pager .pg-prev:hover,
.pager .pg-next:hover,
.pager .pg-last:hover{
background: url(images/page_bg_hover.jpg) 0 0 no-repeat;
}
.pager .pg-prev,
.pager .pg-prev:hover{
background-position: 0 -28px;
}
.pager .pg-next,
.pager .pg-next:hover{
background-position: -29px -28px;
}
.pager .pg-last,
.pager .pg-last:hover{
background-position: -29px 0;
}
.pager .pg-prev[disabled=‘true‘],
.pager .pg-prev[disabled=‘true‘]:hover{
cursor: default;
background-image: url(images/page_bg.jpg);
}
.pager .pg-next[disabled=‘true‘],
.pager .pg-next[disabled=‘true‘]:hover{
cursor: default;
background-image: url(images/page_bg.jpg);
}
.pager .pg-prev[disabled=‘true‘],
.pager .pg-next[disabled=‘true‘]{
border-color: #eeeeee;
}
.pager span.els{
border-color: transparent;
}

.pagerHtmlWrap{
width: 800px;
margin: 30px auto;
}
.pagerHtmlWrap .cc_cells{
width: 100%;
height: 35px;
padding: 5px 0;
border-bottom: 1px #cccccc solid;
}
.pagerHtmlWrap .cc_cells a{
color: #454545;
font-size: 14px;
line-height: 35px;
text-decoration: none;
}
.pagerHtmlWrap .cc_cells a span{
display: inline-block;
width: 25%;
text-align: left;
margin: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".checkbox1").click(function(){
if($(".checkbox1").is(‘:checked‘)){
$(".choice-pingtai").show();

}else{

$(".choice-pingtai").hide();

}

});

$(".sky-eye").click(function(){
var display=$("#skyeye-two").css(‘display‘);
console.log(display);
if(display == ‘none‘){
$("#skyeye-one").addClass(‘sanjiao-active‘)
$("#skyeye-two").slideDown(‘slow‘);

}else {
$("#skyeye-one").removeClass(‘sanjiao-active‘)
$("#skyeye-two").slideUp(‘slow‘);
}
})

$(".sku-manage").click(function(){
var display=$("#skyeye-two").css(‘display‘);
console.log(display);
if(display == ‘none‘){
$("#skyeye-one").addClass(‘sanjiao-active‘)
$("#skyeye-two").slideDown(‘slow‘);

}else {
$("#skyeye-one").removeClass(‘sanjiao-active‘)
$(".sku-control-zy2").slideUp();
}
})
});
</script>
<body>
<div class="contain-all">
<div class="eye-control">
<p class="haitun-eye">海豚天眼大数据监控平台</p>
</div>
<div class="eye-control-left">
<div class="topnav">
<div class="sky-eye sanjiao" id="skyeye-one"><a href="index.html"><i class="iconfont "></i>天眼</a></div>
<ul class="sku-control-zy" id="skyeye-two">
<li><a href="#"><i class="iconfont control-icon"></i>sku监控</a></li>
<li><a href="#"><i class="iconfont pinlei-icon"></i>品类监控</a></li>
</ul>
<div class="sku-manage">
<li><a href="skumanager.html"><i class="iconfont"></i>sku管理</a></li>
</div>
<ul class="sku-control-zy2">
<li><a href="#"><i class="iconfont create-icon"></i>创建</a></li>
<li><a href="#"><i class="iconfont editor-icon"></i>编辑</a></li>
</ul>
</div>
</div>
<div class="eye-control-all">
<div class="choice">

<span class="pin-lei">品类选择：</span><select style="border-radius: 5px;width: 120px;height: 30px;">
<option value ="volvo">请选择</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<select style="border-radius: 5px;width: 80px;height: 30px;">
<option value ="volvo">请选择</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<select style="border-radius: 5px;width: 120px;height: 30px;">
<option value ="volvo">请选择品牌</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="button" class="eye-check" value="天眼查询" />
<input type="button" class="checkout" value="导出" />
</div>
<ul class="baby-chice">
<li class="prode">母婴用品</li>
<li class="milk">奶粉</li>
<li class="children">儿童星</li>
</ul>
<input type="checkbox" class="checkbox1" checked="checked" /><span class="about">关联海豚sku</span>
<div class="choice-pingtai">
<select style="border-radius: 5px;width: 120px;height: 30px;">
<option value ="volvo">请选择平台</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<p class="global">京东全球购</p>
</div>
<div class="global-bottom"></div>
<span class="search">共搜索到922条数据</span>
<div class="table-class1">
<table id="table-aleph" >

<tr class="sku">
<td class="haitun">海豚sku</td>
<td class="haitun">京东全球购</td>
<td class="haitun">天猫国际</td>
<td class="haitun">网易考拉</td>
<td class="haitun">蜜芽</td>
<td class="haitun">贝贝网</td>
</tr>

<td>ht123980</td>
<td><p class="date">2017-07-01</p>
<p class="price">价格：108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
<p class="total-number">月销量：5879</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
</tr>
<tr>
<td>ht128790</td>
<td><p class="date">2017-07-01</p>
<p class="price"></p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price"></p>
<p class="pinlun">评论数：10000</p>
<p class="total-number">月销量：5879</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price">108.9</p>
<p class="pinlun">评论数：10000</p>
</td>
<td><p class="date">2017-07-01</p>
<p class="price"></p>
<p class="pinlun">评论数：10000</p>
</td>
</tr>
</table>
<!--<div class="digg">
<span class="disabled">&lt; </span>
<span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="http://www.divcss5.com/">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>
...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2"> &gt; </a>
</div> -->
<div style="text-align: center;margin:20px auto;"><div id="pager" class="pager clearfix"></div></div>
<div id="wraper" class="pagerHtmlWrap"></div>
<div style="text-align: center;">
<!--<div id="pager2" class="pager clearfix"></div>-->
</div>

</div>
</div>
</div>
</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.z-pager.js" charset="utf-8"></script>
<script type="text/javascript">
$("#pager").zPager({
totalData: 60
});
$("#pager2").zPager({
url:‘pageData.json‘,
htmlBox: $(‘#wraper‘),
btnShow: false
// ,
// dataRender: function(data){
// console.log(data+‘---data-2‘);
// }
});

</script>
</html>

*{margin: 0;padding: 0;}
a{text-decoration:none ;}
.contain-all{width: 100%;height: 100%;overflow: hidden;}
.choice{margin-top:20px;margin-left:20px ;}
.pin-lei{font-size: 14px;font-weight: 500;}
ul,ol,li{list-style: none;}
a{text-decoration: none;}
.haitun-eye{font-size: 20px;color:white;font-weight: 600;padding-top:20px;padding-left:80px ;}
.eye-control{width:100%;height:80px;background:black;}
.eye-control-left{width:14%;height:1000px;background:black ;float: left;}
.eye-control-all{float: left;width:80%;}
.baby-chice{margin-top:10px;}
.baby-chice li{float: left;font-size:12px;}
.baby-chice .prode{margin-left: 116px;}
.baby-chice .milk{margin-left: 73px;}
.baby-chice .children{margin-left: 56px;}
.about{font-size: 12px;margin-left:5px;}
.eye-check{margin-left: 25px;border-radius:5px ;width: 75px;height:30px;text-align: center;background:white;}
.checkout{margin-left: 5px;border-radius:5px;width: 50px;height:30px;text-align: center;background:white ;}
.checkbox1{margin-left: 95px;font-size: 12px;}
.choice-pingtai{margin-left:91px;width:120px;height:25px;}
.global{font-size:12px ;margin-left: 12px;margin-top:10px;}
.global-bottom{border-bottom: 1px solid black;width: 1000px;margin-top:38px;margin-left:5px;}
.search{font-size: 12px;margin-left: 5px;}
#table-aleph{font-size:12px;border:1px solid #cccccc;width:1100px;height:300px;margin-left: 10px;
margin-top: 10px;border-collapse:collapse;}

#table-aleph tr{width:1100px;border:1px solid #cccccc;}
#table-aleph td{height:120px;border:1px solid #cccccc;}
#table-aleph .sku{width:1100px;border:1px solid #cccccc;}
#table-aleph .haitun{height:60px;border:1px solid #cccccc;}
#table-aleph .date{margin:20px 0;}

.table-second{font-size:12px;border:1px solid #cccccc;width:1200px;
height:300px;margin-left: 10px;margin-top: 10px;border-collapse:collapse;}
.table-second tr{width:1200px;border:1px solid #cccccc;}
.table-second td{height:120px;border:1px solid #cccccc;}
.table-second.sku{width:1200px;border:1px solid #cccccc;}
.table-second .haitun{height:60px;border:1px solid #cccccc;}
.table-second.date{margin:20px 0;}
DIV.digg {
PADDING-RIGHT: 257px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;
MARGIN: 3px; PADDING-TOP: 60px; TEXT-ALIGN: center
}
DIV.digg A {
BORDER-RIGHT: #CCCCCC 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid;
PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px;
BORDER-LEFT: #aaaadd 1px solid; COLOR: #cccccc; PADDING-TOP: 2px;
BORDER-BOTTOM: #cccccc 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
BORDER-RIGHT: dodgerblue 1px solid; BORDER-TOP: dodgerblue 1px solid;
BORDER-LEFT: dodgerblue 1px solid; COLOR: white; BORDER-BOTTOM: dodgerblue 1px solid;
background: dodgerblue;
}
DIV.digg A:active {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid;
BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg SPAN.current {
BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px;
BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #cccccc 1px solid;
COLOR: #CCCCCC; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px solid;
}
DIV.digg SPAN.current:hover{
BORDER-RIGHT: dodgerblue 1px solid; BORDER-TOP: dodgerblue 1px solid;
BORDER-LEFT: dodgerblue 1px solid; COLOR: white; BORDER-BOTTOM:dodgerblue 1px solid ;
background: dodgerblue;
}
DIV.digg SPAN.disabled {
BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid;
PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px;
BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px;
BORDER-BOTTOM: #eee 1px solid
}
#table-aleph tr td{padding-left:8px;}
.table-second tr td{padding-left:8px;}
.sky-eye{width:100%;height:30px;background: #1E90FF;}
.topnav{text-align: center;}
.topnav a{color: white;text-align: center;}
.sku-control-zy li{height: 30px;font-size: 12px;line-height:30px ;}
.sku-control-zy2 li{height: 40px;width:178px;font-size: 12px;line-height:30px ;}
.sku-manage{width:100%;height:30px;color: white;}
.sku-control-zy li:hover{background: #1E90FF;}
.sku-control-zy2 li{width:100%;height: 26px;}
.sku-control-zy2 li:hover{background: #1E90FF;}
.sku-manage li:hover{background: #1E90FF;}

.editor{font-size:12px ;margin-left:204px;margin-top:20px;}
.jindong-global{margin-left:20px;margin-top:20px;}
.jindong-global input{width: 360px;height: 32px;border-radius: 5px;border:1px solid #a1a1a1;}
.jindong-global p{margin-top:25px;}
.jindong-global .jind-1{margin-left:5px;}
.jindong-global .jind-2{margin-left:18px;}
.jindong-global .jind-3{margin-left:19px;}
.jindong-global .jind-4{margin-left:52px;}
.jindong-global .jind-5{margin-left:38px;}
.cancel{margin-top:38px;margin-left:84px ;margin-bottom:15px ;}
.cancel .button1{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;margin-right:28px ;}
.cancel .button2{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;}

.contain-pingtai{float: left;width:80%;margin-top: 2%;margin-left: 2%;font-size: 12px;}
.please-input{width:200px;height:27px;border:1px solid #CCCCCC ;border-radius: 5px;margin-right:2%;}
.search-pingtai{width:50px;height:27px;border-radius: 5px;background:#FFFFFF ;border: 1px solid #DDDDDD;margin-right:2%;}
.create-pintai{width:50px;height:27px;line-height:27px;border-radius: 5px;background:#1E90FF ;border: 1px solid #DDDDDD;
margin-right:5%;color: white;text-align: center;display: inline-block;}
.contry-pingtai{margin-top:1%;margin-left:4%;}

#table-pingtai{font-size:12px;border:1px solid #cccccc;width:1100px;height:150px;margin-left: 10px;
margin-top: 10px;border-collapse:collapse;}
#table-pingtai tr{width:1100px;border:1px solid #cccccc;}
#table-pingtai td{height:30px;border:1px solid #cccccc;padding-left: 8px;}
.cancel .button3{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;margin-right:28px ;}
.cancel .button4{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;}
.btn-primary{font-size: 12px;}
a:hover {text-decoration: none;}
.cancel .button5{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;margin-right:28px ;}
.cancel .button6{width:85px;height:28px;background:#1E90FF ;color:white ;border: 1px solid #1E90FF;border-radius: 5px;}
.editor p{font-size: 16px;}
.information{margin-top:15px;margin-left:68px;}
.create-icon{margin-right: 10px;}
.editor-icon{margin-right: 10px;}
.pinlei-icon{margin-right: 10px;}
.control-icon{margin-right: 10px;}
.sky-eye{position：relative;}
.sku-control-zy{display: none;}

时间： 2024-11-05 11:24:43

三角旋转1的相关文章

iOS 动画Animation - 6 - 3 实战练习之复杂动画拆装

其实我们在看到的每一个复杂的动画都是有许多简单的动画巧妙的拼装出来的,在教给大家学会拼装一个动画,其实我更愿意教会大家如何去拆解一个动画.如果看到一个动画,会去把它拆解成一个个简单的动画,那么实现这个动画就轻而易举了. 先给大家看一张效果图: 动画分析 这个动画其实在实现的时候并不困难,可能很多人怕就怕在没有思路,下面我就将这个动画拆解. 1.先出来一个圆,圆形在水平和竖直方向上被挤压,呈椭圆形状的一个过程,最后恢复成圆形 2.圆形的左下角.右下角和顶部分别按顺序凸出一小部分 3.圆和凸出部分形

CSS垂直翻转/水平翻转提高web页面资源重用性——张鑫旭

一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } /*垂直翻转*/ .flipy

CSS垂直翻转/水平翻转提高web页面资源重用性

原文:www.zhangxiyu 一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; }

0061 CSS3 之 2D 转换 rotate

rotate 旋转 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转 rotate 语法.使用步骤: (1)给元素添加转换属性 transform (2)属性值为 rotate(角度), 如 transform:rotate(30deg) 顺时针方向旋转30度 /* 单位是:deg */ transform: rotate(度数) div{ transform: rotate(0deg); } 重点知识点 rotate 里面跟度数,单位是 deg 角度为正时,顺时针,角度为负时,逆时针 默

矢量旋转，分别以三角变换，矩阵变换实现，C#源码。

最近用到了图形旋转,花了不少时间查找材料,编码测试.而且还用到了20年前老师教给的三角函数,还有大学里面早已淡忘的矩阵运算. 呵呵,整理一下把,希望对大家有些帮助. 功能: 已知矢量OP,顺时针旋转α度,求P2点的坐标. 根据三角函数,我们可以很自然的写出: P2.X = O.X + (int)(Math.Cos(alpha) * r) ; P2.Y = O.Y + (int)(Math.Sin(alpha) * r) ;    //哦,代码的颜色怎么不变呢? 噢,因为我刚开始在博客园写博客,所

来自小年号的输出旋转上三角

nineteen.cpp

用CSS3做网页中的小三角，以及transition的用法

自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了,css3的部分也看过了,但是觉得讲得不太好,全部都是点到为止.无意中找到了传智播客的视频讲了一些css3的小技巧,今天就写一下用CSS3做网页中的小三角. 大致网上关于小三角的做法无非三种: 直接用背景图片,这个没什么好说的: 用块元素设置宽高都为0,三角的高用一条边框宽度,其他三条边框用dashe

CSS创建三角形（小三角）的几种方法

你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并制作一个三角形,在本文中,我将介绍: 点此查看实例展示 编码 图片 假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个BASE64字符串是最好的解决方案. 有用的工具(用于图片转换成BASE64编码): http://webcodertools.com/imagetobase

一个常见下拉菜单的样式：一体化小三角（纯css手写解决）

类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用border属性:2.利用正方形选择45度. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style> *{