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)  */
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值