自写复选框
<input type="checkbox" id="l">
<label for="l">复选框</label>
<style>
input:checked+label{
color: red;
}
</style>
手风琴效果(展开图片)
手风琴效果
<body style="background-color: black;">
<div class="wrap">
<div class="box">
<div class="picBox">
<img src="img/手风琴效果/1.jpg">
<div class="mask">计算机</div>
<div class="mask">计算机</div>
</div>
<div class="picBox">
<img src="img/手风琴效果/2.jpg">
<div class="mask">家</div>
<div class="mask">家</div>
</div>
<div class="picBox">
<img src="img/手风琴效果/3.jpg">
<div class="mask">抽象</div>
<div class="mask">抽象</div>
</div>
<div class="picBox">
<img src="img/手风琴效果/4.jpg">
<div class="mask">车</div>
<div class="mask">车</div>
</div>
<div class="picBox">
<img src="img/手风琴效果/5.jpg">
<div class="mask">日出</div>
<div class="mask">日出</div>
</div>
</div>
</div>
</body>
<style>
.wrap{
/* 用于负责外框的 防止鼠标经过白框的时候的动图出现bug*/
width: 805px;height: 400px;
border: 5px solid white;
}
.box{
/* 用于装所有每部结构的 */
width: 805px;height: 400px;
}
.picBox{
width: 160px;
height: 400px;
border-right: 1px solid white;
position: relative;
overflow: hidden;
float: left;
}
/* .picBox中的img标签 */
.picBox img{
width: 500px;
height: 400px;
transition: 0.5s;
}
.mask{
width:100%;
height: 400px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
line-height: 400px;
transition: 0.5s;
}
/* 表示某个父类标签中的第二个后代标签是.mask 的.mask标签
(这个mask标签在它的父类标签中排第二个位置,前面还有个img标签)*/
.mask:nth-child(2){
position: absolute;
top: 0;
left: 0;
}
.mask:nth-child(3){
position: absolute;
bottom: 0;
left: 0;
}
/* 包含了两个选择器 */
.box:hover .picBox{
width: 75px;
}
/* 必须要有两个选择器,与上一个代码块一样,防止代码等级低被覆盖 */
.box .picBox:hover{
width: 500px;
}
.picBox:hover .mask:nth-child(2){
height: 60px;
line-height: 60px;
}
.picBox:hover .mask:nth-child(3){
height: 60px;
/* 必须控制行高,否则行高还是原来的行高,文字的位置就不会 */
line-height: 60px;
}
</style>
双重阴影按钮
双重阴影按钮
<div class="box">
双重阴影
</div>
<style>
.box{
width: 200px;
height: 60px;
color: white;
background-color: red;
margin: 100px auto;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 60px;
transition: 0.5s;
cursor: pointer;
}
/* 鼠标经过 */
.box:hover{
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5),0 0 40px rgba(0, 0, 0, 0.5) inset ;
}
/* 鼠标按下时(激活) */
.box:active{
box-shadow: 0 0 0px rgba(0, 0, 0, 0.5),0 0 40px rgba(0, 0, 0, 0.5) inset ;
margin-top: 110px;
}
</style>
图片上下滚动
图片上下滚动
<div class="box">
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
</div>
<style>
.box{
width: 216px;
height: 60px;
background-color: rgb(255, 255, 255);
}
.bg{
width: 54px;
height: 42px;
/* border: black 1px solid; */
background-repeat: no-repeat;
background-position: center 0;
float: left;
margin-top: 10px;
transition: 0.5s;
}
.bg:nth-child(1){
background-image: url("img/图片上下滚动/bg_01.png");
}
.bg:nth-child(2){
background-image: url("img/图片上下滚动/bg_02-03.png");
}
.bg:nth-child(3){
background-image: url("img/图片上下滚动/bg_02-04.png");
}
.bg:nth-child(4){
background-image: url("img/图片上下滚动/bg_02.png");
}
.bg:nth-child(1):hover{
background-position: center -42px;
}
.bg:nth-child(2):hover{
background-position: center -42px;
}
.bg:nth-child(3):hover{
background-position: center -42px;
}
.bg:nth-child(4):hover{
background-position: center -42px;
}
</style>
图片翻转效果
图片翻转效果
<div class="box">
<div class="picBox">
<div class="font">
<img src="img\01.jpg" alt="">
<div class="text">春</div>
</div>
<div class="pic">生机勃勃</div>
</div>
<div class="picBox">
<div class="font">
<img src="img\02.jpg" alt="">
<div class="text">夏</div>
</div>
<div class="pic">阳光明媚</div>
</div>
<div class="picBox">
<div class="font">
<img src="img\03.jpg" alt="">
<div class="text">秋</div>
</div>
<div class="pic">硕果累累</div>
</div>
<div class="picBox">
<div class="font">
<img src="img\04.jpg" alt="">
<div class="text">冬</div>
</div>
<div class="pic">白雪皑皑</div>
</div>
</div>
<style>
.box {
width: 840px;
height: 300px;
/* border: olive 1px solid; */
}
.picBox {
width: 210px;
height: 300px;
/* background-color: olive; */
float: left;
position: relative;
perspective: 800px;
}
.font {
width: 200px;
height: 300px;
position: absolute;
left: 5px;
top: 0;
z-index: 2;
/* 步骤2 */
/* 过渡 */
transition: 1s;
/* 设置翻转以后的背面不可见 */
backface-visibility: hidden;
}
.picBox img {
width: 200px;
height: 300px;
border-radius: 20px;
}
.text {
width: 36px;
height: 36px;
color: white;
font-size: 30px;
font-family: 楷体;
position: absolute;
left: 34px;
top: 34px;
}
.pic {
width: 200px;
height: 300px;
background-color: black;
border-radius: 20px;
color: white;
text-align: center;
line-height: 300px;
font-size: 30px;
font-family: 楷体;
font-weight: bold;
position: absolute;
left: 5px;
top: 0;
/* 步骤2 */
/* 先做出翻转效果 */
transform: rotateY(180deg);
/* 过渡 */
transition: 1s;
/* 设置翻转以后的背面不可见 */
backface-visibility: hidden;
}
.picBox:hover .font{
/* 步骤2 */
/* 翻转效果 */
transform: rotateY(-180deg);
}
.picBox:hover .pic{
/* 步骤2 */
/* 翻转效果 */
transform: rotateY(0deg);
}
/* 步骤2 */
.picBox:nth-child(1) .pic{
color: yellowgreen;
}
/* 步骤2 */
.picBox:nth-child(2) .pic{
color: rgb(231, 0, 0);
}
/* 步骤2 */
.picBox:nth-child(3) .pic{
color: rgb(255, 230, 0);
}
/* 步骤2 */
.picBox:nth-child(4) .pic{
color: rgb(255, 255, 255);
}
</style>
雨刷效果
雨刷效果
<div class="picBox">
<img src="img\10.jpg" alt="">
<div class="mask"></div>
<div class="text">Come Back</div>
<div class="mask1"></div>
</div>
<style>
body{
background-color: #e9dcdc;
}
.picBox{
width: 480px;height: 360px;
margin: 50px auto;
position: relative;
}
.mask{
width: 480px;height: 360px;
background-color: rgba(0, 0, 244, 0.3);
position: absolute;
left: 0;top: 0;
opacity: 0;
transition: 0.5s;
}
.text{
color: white;
font-size: 30px;
position: absolute;
left: 50px;
top: 30px;
opacity: 0;
transition: 0.5s;
}
.mask1{
width: 480px;height: 360px;
position: absolute;
top: 0;left: 0;
/* 雨刷效果 transparent:透明度
linear-gradient(渐变方向,一边渐变透明度,一边渐变色,另一边渐变色,另 一边渐变透明度)
*/
background: linear-gradient(to right top,transparent 40%,rgba(255,255,255,0.5) 40% ,rgba(255,255,255,0.5) 50% ,transparent 50%);
background-repeat: no-repeat;
background-size: 200% 200%;
background-position: 410px -250px;
transition: 0.5s;
}
.picBox:hover .mask1{
background-position: -480px 0px;
}
.picBox:hover .text{
opacity: 1;
}
.picBox:hover .mask{
opacity: 1;
}
</style>
字体光束
字体光束
<div class="box">
前途似海,来日方长。
</div>
<style>
body {
background-color: #000000;
}
.box {
height: 300px;
width: 1000px;
background-color: aquamarine;
margin: 50px auto;
color: rgba(255, 255, 255,0.5);
font-size: 100px;
font-family: 楷体;
text-align: center;
line-height: 300px;
/* 背景光束 */
background: linear-gradient(to right top, transparent 35%, #ffffff 48%, #ffffff 53%, transparent 65%);
background-size: 300px 300px;
background-repeat: no-repeat;
/* 步骤2 */
/* 设置背景在整个框里的位置 */
background-position: 0px 0px;
/* 将背景裁剪到文字 */
-webkit-background-clip: text;
/* 调用动画 */
animation: move 1.5s infinite;
}
/* 步骤2 */
/* 设置动画 */
@keyframes move{
0%{background-position: -180px 0;}
100%{background-position: 800px 0;}
}
</style>
背景渐变
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</body>
<style>
.box{
float: left;
width: 300px;
height: 200px;
margin: 30px 30px ;
}
.box:nth-child(1){
background:repeating-linear-gradient(#e08127 0px,#e08127 50px,#00abed 50px,#00abed 100px) ;
}
.box:nth-child(2){
background:repeating-linear-gradient(to right,#e08127 0px,#e08127 50px,#00abed 50px,#00abed 100px) ;
}
.box:nth-child(3){
background:repeating-linear-gradient(to left bottom,#e08127 0px,#e08127 50px,#00abed 50px,#00abed 100px) ;
}
.box:nth-child(4){
background:linear-gradient(to left bottom,#e08127 0,#e08127 50%,#00abed 50% ,#00abed 100%) ;
}
.box:nth-child(5){
background:linear-gradient(to left bottom,#e08127 0,#e08127 50%,#00abed 50% ,#00abed 100%) ;
background-size: 50px 50px;
}
.box:nth-child(6){
background:linear-gradient(to right,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%) ,linear-gradient(to bottom,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%);
}
.box:nth-child(7){
background:linear-gradient(to right,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%) ,linear-gradient(to bottom,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%);
background-size: 50px 50px;
}
</style>
字体图标(圆角)
字体图标
<body>
<ul class="text">
<li> <span class="icon"></span>Home</li>
<li><span class="icon"></span>About Me</li>
<li><span class="icon"></span>work</li>
<li><span class="icon"></span>photography</li>
<li><span class="icon"></span>contact</li>
</ul>
</body>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #29a79b;
}
.icon{
position: relative;
float: left;
margin-bottom: 20px;
display: block;
height: 95px;
width: 80px;
height: 80px;
border: 1px solid white;
border-radius: 50%;
}
li:nth-child(1) .icon{
background:#fff no-repeat center center;
}
li:nth-child(2) .icon{
background:#fff url("img/字体图标-圆角练习02.png") no-repeat center center;
}
li:nth-child(3) .icon{
background:#fff url("img/字体图标-圆角练习03.png") no-repeat center center;
}
li:nth-child(4) .icon{
background:#fff url("img/字体图标-圆角练习04.png") no-repeat center center;
}
li:nth-child(5) .icon{
background:#fff url("img/字体图标-圆角练习05.png") no-repeat center center;
}
.text{
margin-top: 200px;
}
.text li{
float: left;
padding:0 40px;
width: 85px;
text-align: center;
font-weight: bold;
color: #0c6766;
}
.icon::after{
content: "";
float: left;
border-style: solid solid none solid;
border-width: 15px 12px 0 12px;
border-color: rgb(255, 255, 255) transparent transparent transparent;
/* content: url("img/小三角.jpg");*/
position: absolute;
bottom: -14px;
left: 50%;
margin-left: -12px;
}
li:hover{
color: white;
transition: 1s;
}
/* ********** 1 ********** */
li:nth-child(1) .icon{
transform: rotate(90deg);
transform-origin:center bottom;
opacity: 0;
transition: 1s;
}
li:nth-child(1):hover .icon{
transform: rotate(0deg);
opacity: 1;
}
/* ********** 2 ********** */
li:nth-child(2) .icon{
transform-origin:center bottom;
transform: scale(0);
opacity: 0;
transition: 1s;
}
li:nth-child(2):hover .icon{
transform: scale(1);
opacity: 1;
}
/* ********** 3 ********** */
li:nth-child(3) .icon{
transform: scalex(-1);
opacity: 0;
transition: 1s;
}
li:nth-child(3):hover .icon{
transform: scalex(1);
opacity: 1;
}
/* ********** 4 ********** */
li:nth-child(4) .icon{
transform: translateY(10px);
transform-origin:center bottom;
opacity: 0;
transition: 1s;
}
li:nth-child(4):hover .icon{
transform: translateY(0);
opacity: 1;
}
/* ********** 5 ********** */
li:nth-child(5) .icon{
transform: translateY(-10px);
transform-origin:center bottom;
opacity: 0;
transition: 1s;
}
li:nth-child(5):hover .icon{
transform: translateY(0px);
opacity: 1;
}
</style>
弹性盒()
居中对齐
<div class="box">
<img src="./image/胡杨林-切片01.jpg" alt="">
<img src="./image/胡杨林-切片01.jpg" alt="">
<img src="./image/胡杨林-切片01.jpg" alt="">
</div>
<style>
.box{
margin: 50px auto;
width: 400px;
height: 400px;
border: 2px solid #bbbbbb;
/* 1、弹性盒设置 */
display: flex;
justify-content: center; // /* 居中排列 */
align-items: center;
/* 2、弹性盒设置 */
display: flex;
justify-content: space-between; // /* 均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点。 */
align-items: center;
/* 3、弹性盒设置 */
display: flex;
justify-content: space-evenly; // /* 均匀排列每个元素,每个元素之间的间隔相等。 */
align-items: center;
/* 4、弹性盒设置 */
display: flex;
justify-content: space-around; // /* 均匀排列每个元素,每个元素周围分配相同的空间。 */
align-items: center;
}
img{
width: 100px;
height: 100px;
}
</style>
对角线
<div class="box">
<img src="./image/胡杨林-切片01.jpg" alt="">
<img src="./image/胡杨林-切片01.jpg" alt="">
<img src="./image/胡杨林-切片01.jpg" alt="">
</div>
<style>
.box{
margin: 50px auto;
width: 400px;
height: 400px;
border: 2px solid #bbbbbb;
/* 1、弹性盒设置 */
display: flex;
justify-content: space-around;
/* 2、弹性盒设置 */
display: flex;
justify-content: space-between;
}
img{
width: 100px;
height: 100px;
}
img:nth-child(1){
align-self: flex-start;
}
img:nth-child(2){
align-self: center;
}
img:nth-child(3){
align-self: flex-end;
}
</style>