css进阶(三)

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

.lists {display: flex;justify-content: center;}

.box {width: 100px;height: 100px;transition: all 0.3s;}

.box ~ .box {margin-left: 15px;}

.box img {width: 100%;height: 100%;}

.box_1:hover {transform: translateY(-6px);}

.box_2:hover {transform: scale(1.03);}

.box_3{width: 100px;height: 100px;overflow:hidden;}

.box_3~.box_3{margin-left: 15px;}

.box_3 img{width: 100%;height: 100%;transition: all 0.5s;}

.box_3:hover img{transform: scale(1.1);}

.item{width: 200px;color: #333;text-decoration: none;border: 1px solid #eee;transition: all 0.5s;}

.item .item_pic{width: 200px;height: 200px;overflow: hidden;}

.item .item_pic img{width: 100%;height: 100%;transition: all 0.5s;}

.item_1:hover .item_pic img{transform: scale(1.1);}

.item_1:hover{box-shadow: 0 0 15px rgba(0,0,0,0.2);}

.item_content{padding: 20px 10px;}

.item_2:hover{/*-1或者-2最佳*/transform: translateY(-1px); box-shadow: 0 0 15px rgba(0,0,0,0.3);}

.box_4 {position:relative;z-index:1;display:inline-block;overflow:hidden;background:#3085a3;text-align:center;cursor:pointer}

.box_4 img {width:200px;height:200px;opacity:1;transition:opacity .35s,transform .35s;float:left;}

.box_4:hover img {opacity:.5;}

.box_4 h3 { margin-top:20%;transition:transform .35s;transform:translate3d(0,20px,0);opacity:0;color:#fff;font-size:16px;}

.box_4 p {margin:10px 0 0;padding:15px;border:1px solid #fff;opacity:0;transition:opacity .35s,transform .35s;transform:translate3d(0,20px,0) scale(1.1);color:#FFF;}

.box_4:hover h3 {transform:translate3d(0,0,0);opacity:1;}

.box_4:hover p {opacity:1;transform:translate3d(0,0,0) scale(1);}

.box_4_content {width:200px;height:200px;padding:15px;position:absolute;box-sizing: border-box;}

.list_1{width: 100%;display: flex;justify-content: center;margin-top: 100px;}

.item_3 {width: 300px;height: 300px;background-color: #99aeff;position: relative;cursor: pointer;transition: all 0.4s ease-out;box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);overflow: hidden;color: #fff;}

.item_3 img {height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 0;transition: all 0.4s ease-out;}

.item_3 .text {width: 100%;height: 100%;box-sizing: border-box;z-index: 99;position: absolute;padding: 30px;}

.item_3 h1 {text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);}

.item_3 h2 {margin-top: 20px;font-style: italic;transform: translateX(200px);}

.item_3 p {margin-top: 20px;line-height: 25px;transform: translateX(-200px);transition-delay: 0.2s;}

.animate-text {opacity: 0;transition: all 0.6s ease-in-out;}

.item_3:hover {box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.64);transform: scale(1.05);}

.item_3:hover img {opacity: 0.2;}

.item_3:hover .animate-text {transform: translateX(0);opacity: 1;}

.dots {position: absolute;bottom: 20px;right: 30px;margin: 0 auto;width: 30px;height: 30px;display: flex;flex-direction: column;align-items: center;justify-content: space-around;}

.dots span {width: 5px;height: 5px;background-color: #fff;border-radius: 50%;display: block;opacity: 0;transition: transform 0.4s ease-out, opacity 0.5s ease;transform: translateY(30px);}

.item_3:hover span {opacity: 1;transform: translateY(0px);}

.dots span:nth-child(1) {transition-delay: 0.05s;}

.dots span:nth-child(2) {transition-delay: 0.1s;}

.dots span:nth-child(3) {transition-delay: 0.15s;}

.item_4{display: flex;justify-content: center;align-items: center;}

</style>

<body>

</a>

</a>

</div>

</a>

</a>

</div>

</a>

</a>

</div>

</div>

<div class="title">Kitty的标题标题</div>

</div>

</a>

</div>

</div>

<div class="title">Kitty的标题标题</div>

</div>

</a>

</div>

<h3>Kitty的头像</h3>

<p>Kitty的名字</p>

</div>

<h2 class="animate-text">Kitty 的测试案例</h2>

<p class="animate-text">这里放内容简介，内容简介,这里放内容简介，内容简介,这里放内容简介，内容简介</p>

</div>

</div>

<!-- 1.隐藏滚动条或更改滚动条样式

2.文字超出隐藏并显示省略号

3.控制div内的元素自动换行

4.纯css画三角形

5.绝对定位元素居中（水平和垂直方向）

6.表格边框合并 -->

</body>

</html>