整理一些自己写过的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) */
}