css样式2

整理一些自己写过的css样式，记录。

1. css翻牌效果

html部分：

<div class="card_rotate">
		<div class="card card1">
			<img class="font" src="images/card6.png">
			<img class="back" src="images/card6-back.png">
		</div>
		<div class="card back2">
			<img class="font" src="images/card7.png">
			<img class="back" src="images/card7-back.png">
		</div>
	</div>

css部分：

		.card_rotate {
			width: 1000px;
			margin: 0 auto;
			background: #bebebe;
		}
		.card {
			float: left;
			width: 200px;
			height: 380px;
			position: relative;
		}
		.card .font,
		.card .back {
			backface-visibility: hidden;
			-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
			-moz-backface-visibility:hidden; 	/* Firefox */
			-ms-backface-visibility:hidden; 	/* Internet Explorer */
			transition: transform .5s;
			position: absolute;
		}
		.card .font {
			transform: rotateX(0deg);
		}
		.card .back {
			transform: rotateX(-180deg);
		}
		.card:hover .font {
			transform: rotateX(180deg);
		}
		.card:hover .back {
			transform: rotateX(0deg);
		}
		.card {
			margin-right: 15px;
		}

这个效果里css: backface-visibility: hidden || visible; 是重点，意思是背面不可见 || 背面可见 。 transform 也要写浏览器兼容代码，此处省略。

2.手风琴 效果
css样式部分：

		ul{width: 1480px; height:460px; margin:0px; padding:0px; overflow: hidden;}		
		li{width: 120px;list-style: none;float: left; transition: all 1s;}
		li img{width: 1000px;}			
		li:hover{width: 1000px;}
		ul:hover li:not(:hover){width: 120px;}

html分布：

		<ul>
			<li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
			<li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
			<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
			<li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
			<li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
		</ul>

重点在于：

li:hover {width: 1000px;} /*鼠标悬停在li上时，li的width变为1000px */
ul:hover li:not(:hover){width: 120px;} /*鼠标没有处于悬停的li的width 为 120px*/

3.渐变背景色

/* 1. 线性渐变 */
div{
	background-image: linear-gradient(left || to right, #ff0000, #0000ff); 
}
/*括号里第一位置为，渐变的方向 left指从左边开始，或者 to right 往右边渐变。
后边的变量添加渐变的颜色 可添加多个颜色。

/* 2. 径向 圆形 || 椭圆形渐变 */
div{
	background-image: radial-gradient(circle || ellipse, #ff0000, #0000ff); 
}
/*
radial-gradient为径向渐变  circle为圆形，ellipse为椭圆形，也可以为一个角度90deg,45deg。
*/
/* 2. 径向 圆形 || 椭圆形渐变 */
background-image: radial-gradient(circle at top right, #ff0000, #0000ff);
/*
圆心可控制位置 circle at top right ,单个位置用top 即可 复合位置 top right中间用空格空开
*/
div{
	background-image: linear-gradient(left || to right, #ff0000 10%, #0000ff 20% ,#00ff00 100%); 
}
/*
色彩可控制范围，在色彩后空格加上 色彩范围，可百分比，可像素值
*/

4.阴影

.box{
	box-shadow: 40px 50px 100px rgba(0,0,0, 0.5); 
	/* x轴方向的偏移（40px向右） y轴方向的偏移（50px向下） 模糊的大小（100px） 颜色：red || #f0f0f0 	 rgba(0,0,0, 0.7)  */
}