flex

标 签:

1.盒子模型相关,box-sizing:

    content-box 普通的,默认的例子模型,padding,border属性时,盒子是朝外扩展的

    border-box 边框盒子模型,padding,border属性时,盒子是朝内扩展的

    calc(css公式函数)用来计算大小的,比如四个div宽度为25%,浮动成一行,加个border,或者padding会成二行,这个时候用

width:calc(25% - 2px)这样就可以了,但要注意的是头号两这得加空格,

    但一般这样不会用calc,可以设置盒子属性为 box-sizing:border-box,就好了

2.flex弹性布局; 在父级上加入属性 display:flex 就可以了,

   如果父级加了flex属性后,子级默认就是浮动的,float,clear 等属性就没有用了

   现在说说父级的属性

/** 定义当前的为flex弹性布局 **/
display:flex

/** 子元素横向排列方式 **/
justify-conent: center 居中 | 居左(默认) flex-start | 居右 flex-end | 两端对齐 space-between | 所有子元素margin相同 space-arund

/** 子元素纵向排列方式 **/
align-items:center 居中 | 从上到下(默认) flex-start | 从下到上 flex-end 

/** 子元素排列方向 **/
flex-direction:row 横向排列 |  横向反排 row-reverse | 纵向排列 column | 纵向反排 column-reverse

/** 子元素显示换行 **/
flex-wrap:no-wrap (默认)不换行 | wrap 换行

/** 排除简写 **/
flex-flow:<flex-direction> <flex-wrap>

 下面说说子元素属性

flex:n 表示平分父级宽度里占几份
align-self: 覆盖父级继承的 align-items 属性
flex-grow:1 定义子元素放大比例
order: 规定子元素顺序,越小越靠前


CSS / 评 论 (0) / 热度 (217℃) / 2019-04-21 / 阅读全文  / MaWei

css3立方体动画

标 签:


<!DOCTYPE html>
<html>
  <head>
    <title>09首页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/style.css" rel="stylesheet">
    <style type="text/css" media="screen">
    	/*****转动*******/
		.will_rotate{
			width: 150px;
			height: 150px;
			margin: 0 auto;	
			position: relative;
		}
		.rotate_parent, .rotate_parent li {
		    position: absolute;
		    display: block;
		}
		.rotate_parent{
		    position: absolute;
		    display: block;
		    width: 100%;
		    height: 100%;
		    padding: 0;
		    /*margin: -50px 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: willRotate 3s ease-in-out infinite 2s; 
		     animation: willRotate 3s ease-in-out infinite alternate; 
		     /*animation: name duration timing-function delay iteration-count direction;*/
			    /*name	规定需要绑定到选择器的 keyframe 名称。。*/
			   	/*duration	规定完成动画所花费的时间,以秒或毫秒计。*/
			  	/*timing-function	规定动画的速度曲线。*/
			 	/*delay	规定在动画开始之前的延迟。*/
				/*iteration-count	规定动画应该播放的次数。*/
				/*direction	规定是否应该轮流反向播放动画。*/
		    top: 20%;
		    /*left: 50%;*/
		}

		.rotate_parent .tip_back, .rotate_parent .tip_front, .rotate_parent .tip_left, .rotate_parent .tip_right, .rotate_parent .tip_top {
		    background: radial-gradient(transparent 30%,rgba(126,17,91,.2) 100%);
		}
		.rotate_parent li {
		    width: 100px;
		    height: 100px;
		     transition: -webkit-transform 1s ease-in-out; 
		     transition: transform 1s ease-in-out; 
		}
		.rotate_parent .tip_front {
		    -webkit-transform: translateZ(50px);
		     transform: translateZ(50px); 
		}
		.rotate_parent .tip_back {
		    -webkit-transform:translateZ(-50px);
		    transform:translateZ(-50px);
		}
		.rotate_parent .tip_right {
		    -webkit-transform: rotateY(90deg) translateZ(50px);
		    transform: rotateY(90deg) translateZ(50px);
		}
		.rotate_parent .tip_left {
		    -webkit-transform: rotateY(90deg) translateZ(-50px);
		    transform: rotateY(90deg) translateZ(-50px);
		}
		.rotate_parent .tip_top {
		    -webkit-transform: rotateX(90deg) translateZ(50px);
		    transform: rotateX(90deg) translateZ(50px);
		}
		.rotate_parent .tip_bottom{
		    -webkit-transform: rotateX(90deg) translateZ(-50px);
		    transform: rotateX(90deg) translateZ(-50px);
		}
		.rotate_parent .tip_floor {
		    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);
		}	
    </style>
  </head>
  <body>
		<div class="will_rotate">
			<ul class="rotate_parent">
				<li class="tip_front"></li>
				<li class="tip_back"></li>
				<li class="tip_right"></li>
				<li class="tip_left"></li>
				<li class="tip_top"></li>
				<li class="tip_bottom"></li>
				<li class="tip_floor"></li>
			</ul>
		</div>
	</body>
</html>


CSS / 评 论 (0) / 热度 (160℃) / 2017-10-30 / 阅读全文  / MaWei