当前位置：首页 > news >正文

前端开发常用案例（一）

news 文章来源：https://blog.csdn.net/qq_46199553/article/details/129055990 2024/11/6 0:40:11

前端开发常用案例

- 1.实现三角形
- 百度热榜样式
- 分页效果
- 小米商城
- 自动轮播图效果
- 二级下拉菜单效果
- 时间轴效果展示
- 音乐排行榜效果
- 鼠标移入文字加载动画
- 鼠标悬停缩放效果

1.实现三角形

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 0;height: 0;border-top: 10px solid black;border-left: 10px solid transparent ;border-right: 10px solid transparent;border-bottom: 10px solid transparent;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

百度热榜样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body,h3,ul{margin: 0px;padding: 0px;}.news{width: 360px;margin: 50px auto 0px;border: 1px solid #dddddd;padding: 15px;}.news h3{font-size: 20px;margin-bottom: 20px;}.news ul{list-style: none;}.news ul li{border-bottom: 1px dotted #ddd;height: 35px;line-height: 35px;font-size: 15px;color: #333;}.news ul li a{color: #333;text-decoration: none;}.news ul li a:hover{color: red;}.news ul li a span{margin-right: 10px;font-weight: bold;}.col1{color: red;}.col2{color: #ff5c55;}.col3{color: #ffa552;}</style>
</head>
<body>
<div class="news"><h3>百度新闻热榜</h3><ul><li><a href=""><span class="col1">1</span>元宵晚会</a></li><li><a href=""><span class="col2">2</span>美国</a></li><li><a href=""><span class="col3">3</span>中国航天</a></li><li><a href=""><span class="col4">4</span>飞船</a></li><li><a href=""><span class="col5">5</span>外星人是不是存在</a></li><li><a href=""><span class="col6">6</span>hello我让开始</a></li><li><a href=""><span class="col7">7</span>按时吃三</a></li><li><a href=""><span class="col8">8</span>规范的撒监管科</a></li></ul>
</div>
</body>
</html>

/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

对于"text-indent:2em;"属性，只能加在块状元素上面，内联元素是不起作用的。

在这里插入图片描述

1.使用HTML:target=“_blank”，在新的页面中打开链接，形成父子界面的关系。
_blank – 在新窗口中打开链接
_parent – 在父窗体中打开链接
_self – 在当前窗体打开链接,此为默认值
_top – 在当前窗体打开链接，并替换当前的整个窗体(框架页)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{background-image: linear-gradient(to right,#fbd787,#c6ffdd);margin: 0;}.menu{width: 300px;background-color: rgba(255,255,255,0.6);margin: 50px auto 0px;}ul{list-style: none;margin: 0;padding: 0;}a{text-decoration: none;}.menu ul{}.menu ul li{height: 42px;line-height: 42px;}.menu ul li a{display: block;text-indent: 2em;color: #000;background: url("images/right1.png") no-repeat 255px 15px;background-size: 10px;}.menu ul li a:hover{background-color: #ff6700;color: white;background-image: url("images/right2.png");}</style>
</head>
<body>
<div class="menu"><ul><li><a href="" target="_blank">手机</a></li><li><a href="" target="_blank">电视</a></li><li><a href="" target="_blank">笔记本 平板</a></li><li><a href="" target="_blank">家电</a></li><li><a href="" target="_blank">出行 穿戴</a></li><li><a href="" target="_blank">智能 路由器</a></li><li><a href="" target="_blank">电源 配件</a></li><li><a href="" target="_blank">健康 儿童</a></li><li><a href="" target="_blank">耳机 音箱</a></li><li><a href="" target="_blank">生活 箱包</a></li></ul>
</div>
</body>
</html>

使用font-size:0解决设置inline-block引起的空白间隙问题
在进行页面布局的时候为了页面代码所谓整洁刻度，往往会设置缩进或是换行，但是元素display为inline-block或是inline时，行内元素虽然没有设置 margin值，这些换行或是缩进。还是会出现空白间隙。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body,p,h3{margin: 0;}a{text-decoration: none;display: block;}.product{width: 268px;margin: 50px auto 0;border: 1px solid #dddddd;text-align: center;}.product p.describe{color: #845f3f;font-size: 16px;}.product-text{height: 100px;background-color: #f8f8f8;margin-top: 20px;padding: 5px;}/* 去除图片空隙 */.product .product-text .product-mark{font-size: 0;}.product .product-text h3{font-size: 20px;font-width: 400;color: #000;}.product .product-text p {color: #a92112;font-size: 20px;margin-top: 5px;}</style>
</head>
<body><div class="product"><a href="" target="_blank"><img src="images/kettle.png" alt="电水壶" width="195px"><p class="describe">快速煮水，放心使用</p><div class="product-text"><div class="product-mark"><img src="images/live.png" alt="直播中" height="20"><img src="images/odds.png" alt="特惠" height="20"><img src="images/30day.png" alt="30天保价" height="20"><img src="images/server.png" alt="售后免邮" height="20"></div><h3>云米电水壶</h3><p>￥59</p></div></a></div>
</body>
</html>

在这里插入图片描述
看别人的代码看到过font-size:0这个设置，不明白为何这样操作，后来研究一下才明白：这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下：

<div class="box"><div>1</div><div>2</div><div>3</div>
</div>

.box{width: 90px;height: 60px;border: 1px solid #ccc;
}
.box div{display: inline-block;box-sizing: border-box;font-size: 14px;width: 30px;border: 1px solid ;
}

在这里插入图片描述

分页效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.page{width: 100%;background-color: azure;text-align: center;font-size: 0;padding: 20px 0;}.page a,.page span{border: 1px solid #dddddd;background-color: #ffffff;display: inline-block;height: 30px;text-decoration: none;line-height: 30px;color: #333;padding: 0 10px;font-size: 14px;margin: 0 2px;}.page span{background-color: red;color: white;}</style>
</head>
<body>
<div class="page"><a href=" ">&lt;</a><span>1</span><a href=" ">2</a><a href=" ">3</a><a href=" ">4</a><a href=" ">5</a><a href=" ">...</a><a href=" ">100</a><a href=" ">&gt;</a>
</div>
</body>
</html>

在这里插入图片描述
font-size:0

注意 vertical-align 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。

小米商城

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>小米商城右侧悬浮菜单</title><link rel="stylesheet" href="iconfont/iconfont.css"><style type="text/css">body {background-color: #ddd;height: 2000px;margin: 0;padding: 0;}ul,p {margin: 0;padding: 0;list-style: none;}a {text-decoration: none;}.sidebar {width: 85px;/* height: 500px; *//* background-color: white; */position: fixed;/* 固定定位，相对于浏览器移动*/right: 20px;bottom: 100px;}.sidebar ul {/* border: 1px solid red; */}.sidebar ul li {border-bottom: 1px solid #ddd;width: 85px;height: 85px;background-color: white;position: relative;}.sidebar ul li:last-child {margin-top: 20px;}.sidebar ul li span {width: 85px;height: 50px;/* background-color: aquamarine; */display: block;font-size: 28px;color: #666;text-align: center;line-height: 50px;}.sidebar ul li p {font-size: 14px;text-align: center;color: #666;}.sidebar ul li:hover span,.sidebar ul li:hover p {color: hotpink;}.sidebar ul li .wxin {width: 100px;height: 100px;background: #fff;position: absolute;top: 0;left: -130px;padding: 15px;display: none;}.sidebar ul li:hover .wxin {display: block;}</style>
</head>
<body>
<div class="sidebar"><ul><li><a href=""><span class="iconfont icon-shouji"></span><p>手机APP</p></a><div class="wxin"><img src="images/wx.png" alt="" width="100"></div></li><li><a href=""><span class="iconfont icon-gerenzhongxin"></span><p>个人中心</p></a></li><li><a href=""><span class="iconfont icon-shouhouwuyou"></span><p>售后服务</p></a></li><li><a href=""><span class="iconfont icon-kefu"></span><p>人工客服</p></a></li><li><a href=""><span class="iconfont icon-gouwuchekong"></span><p>购物车</p></a></li><li><span class="iconfont icon-fanhuidingbu"></span><p>回顶部</p></li></ul>
</div>
</body>
</html>

在这里插入图片描述

自动轮播图效果

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>自动轮播图效果</title><link rel="stylesheet" href="iconfont/iconfont.css"><style type="text/css">body ul{margin: 0;padding: 0;}ul{list-style: none;}.banner{width: 1000px;height: 466px;margin: 50px auto 0;background-color: aqua;position: relative;overflow: hidden;}.banner ul {/* border: 2px solid red; */width: 10000px;position: absolute;left: 0;top: 0;}.banner ul li {/* border: 2px solid #000; */width: 1000px;height: 466px;float: left;}.banner .prev,.banner .next {width: 41px;height: 69px;/* border: 2px solid red; */position: absolute;top: 50%;margin-top: -35px;background: url('images/icon-slides.png');}.banner .prev {left: 0;background-position:-83px 0;}.banner .next {right: 0;background-position:-125px 0;}.banner .prev:hover {background-position: 0 0;}.banner .next:hover {background-position: -42px 0;}.banner .button{width: 100%;height: 50px;background-color: rgba(0, 0, 0, 0.5);position: absolute;bottom: 0;left: 0;font-size: 0;/* 去除圆点之间的间隙 */text-align: center;line-height: 50px;}.banner .button span{width: 10px;height: 10px;background-color: white;display: inline-block;border-radius: 50%;margin: 0 3px;vertical-align: middle;}.button span.current{background-color: hotpink;}</style>
</head>
<body><div class="banner"><ul><li><img src="images/slide-1.png" alt=""></li><li><img src="images/slide-2.png" alt=""></li><li><img src="images/slide-3.png" alt=""></li><li><img src="images/slide-4.png" alt=""></li><li><img src="images/slide-5.png" alt=""></li></ul><div class="prev"></div><div class="next"></div><div class="button"><span class="current"></span><span></span><span></span><span></span><span></span></div></div>
</body>
</html>

在这里插入图片描述

二级下拉菜单效果

在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>自动轮播图效果</title><link rel="stylesheet" href="iconfont/iconfont.css"><style type="text/css">body,ul{margin: 0;padding: 0;}ul{list-style: none;}a{text-decoration: none;}.clearfix::after {/* 清除ul标签的塌陷问题 */content: '';display: block;clear: both;}.menu{width: 100%;height: 60px;background-color: #fd6a88;}.menu .menu-con{width: 1000px;height: 60px;margin: 0 auto;}.menu .menu-con ul li{height: 60px;float: left;position: relative;}.menu .menu-con ul li a {display: block;height: 60px;color: white;padding: 0 40px;line-height: 60px;text-align: center;}.menu .menu-con ul li:hover {/* 如果此处悬停改为a标签,顶部悬浮效果会消失 */background-color: #ee4d75;}.menu .menu-con ul li div {width: 200px;/* height: 400px; */background-color: #fd6a88;position: absolute;left: 50%;margin-left: -100px;top: 60px;display: none;}.menu .menu-con ul li div a {height: 40px;line-height: 40px;padding: 0;font-size: 14px;}.menu .menu-con ul li div a:hover {background-color: #ee4d75;}.menu .menu-con ul li:hover div{display: block;}</style>
</head>
<body><div class="menu"><div class="menu-con"><ul class="clearfix"><li><a href="#">小米手机</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li><li><a href="#">Redmi小米</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li><li><a href="#">电视</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li><li><a href="#">笔记本</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li><li><a href="#">平板</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li><li><a href="#">路由器</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li></ul></div>
</div>
</body>
</html>

时间轴效果展示

在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>自动轮播图效果</title><link rel="stylesheet" href="iconfont/iconfont.css"><style type="text/css">body{margin: 0;padding: 0;background-image: linear-gradient(to right,#fdf1d8,#b2bcf9);}body,ul,li{margin: 0;padding: 0;}ul{list-style: none;}a{text-decoration: none;}.clearfix::after{/* 清除浮动 ，解决塌陷问题*/content: '';display: block;clear: both;}.time-axis{width: 804px;margin: 50px auto 0;}.time-axis .left{width: 400px;float: left;border-right: 4px solid #b1bbf9;position: relative;}.time-axis .right{width: 400px;float: right;border-left: 4px solid #b1bbf9;position: relative;}.time-axis .dot{width: 10px;height: 10px;background-color: #ffffff;display: block;border-radius: 100%;border: 2px solid #b1bbf9;position: absolute;top: 50%;margin-top: -7px;}.time-axis .left .dot{right: -9px;}.time-axis .right .dot{left: -9px;}.time-axis .jiantou{width: 32px;height: 32px;/* border: 1px solid red; */display: block;position: absolute;top: 50%;margin-top: -18px;}.time-axis .left .jiantou{background: url('images/r-jiantou.png');right: 0;}.time-axis .right .jiantou{background: url('images/l-jiantou.png');left: 0;}.time-axis .con{background-color: #ffffff;padding: 15px;border-radius: 10px;text-align: center;}.time-axis .left .con{margin-right: 22px;}.time-axis .right .con{margin-left: 22px;}.time-axis .con h3{font-weight: 400;}.time-axis .con h3 span{font-size: 38px;font-family: Arial;color: #b1bbf9;font-weight: 800;}</style>
</head>
<body>
<div class="time-axis clearfix"><div class="left"><span class="dot"></span><span class="jiantou"></span><div class="con"><h3><span>“</span> 春季腹泻要当心，益生菌要这样... <span>”</span></h3><img src="images/axis01.jpg" alt="" width="300"></div></div><div class="right"><span class="dot"></span><span class="jiantou"></span><div class="con"><h3><span>“</span> 春季腹泻要当心，益生菌要这样... <span>”</span></h3></div></div><div class="left"><span class="dot"></span><span class="jiantou"></span><div class="con"><h3><span>“</span> 春季腹泻要当心，益生菌要这样... <span>”</span></h3></div></div><div class="right"><span class="dot"></span><span class="jiantou"></span><div class="con"><h3><span>“</span> 春季腹泻要当心，益生菌要这样... <span>”</span></h3><img src="images/axis02.jpg" alt="" width="300"></div></div>
</div>
</body>
</html>

border-spacing 属性设置相邻单元格的边框间的距离（仅用于"边框分离"模式）。

为表格设置合并边框模型：table
{border-collapse:collapse;
}

音乐排行榜效果

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>音乐排行榜效果</title><style type="text/css">body {margin: 0;padding: 0;}a{text-decoration: none;}.music-top {width: 800px;/* height: 700px; *//* border: 2px solid red; */margin: 50px auto 0;}table {width: 100%;/* border: 2px solid #000; */border-spacing: 0;border-collapse: collapse;}table tr th {/* border: 1px solid red; */height: 80px;}table tr td {/* border: 1px solid red; */height: 80px;}.col1 {/* background-color: red;*/width: 60px;}.col2 {/* background-color: aqua; */width: 80px;}.col3 {/* background-color: #000*/wid}.col4 {/* background-color: yellow;*/width: 120px;}.col5 {/* background-color: bisque; */width: 60px;}/* 表格奇数行 */table tr:nth-of-type(odd) {background-color: white;}/* 表格偶数行 */table tr:nth-of-type(even) {background-color: #f7f7f7;}table tr th {background-color: #31c272;color: #fff;font-size: 16px;font-weight: 400;text-align: left;}table tr td:nth-child(1) {font-size: 24px;color: #333;text-align: center;}table tr td:nth-child(1) span {color: #ff4222;}table tr td:nth-child(2) {font-size: 12px;color: #999;}table tr td:nth-child(2) img {display: block;margin-left: 10px;}table tr td:nth-child(4),table tr td:nth-child(5) {font-size: 14px;color: #999;}.con {height: 70px;/* border: 2px solid red; */position: relative;}.con .txt {height: 70px;/* width: 300px; *//* background-color: aquamarine; */position: absolute;left: 90px;top: 0;right: 0;/* 处理文字超出部分 */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 70px;}.con .txt a{color: #333;}.con .txt span {color: #999;}.con .button {width: 140px;height: 36px;/* border: 2px solid blue; */position: absolute;right: 0;top: 17px;display: none;}.con .button i {width: 36px;height: 36px;/* border: 1px solid red; */display: inline-block;background-image: url('images/icon-music.png');}.con .button i.play {}.con .button i.add {background-position: 0 -80px;}.con .button i.word {background-position: 0 -40px;}.con .button i.play:hover {background-position: -40px 0;}.con .button i.add:hover {background-position: -40px -80px;}.con .button i.word:hover {background-position: -40px -40px;}table tr:hover .con .button {display: block;}table tr:hover .con .txt {right: 180px;}</style>
</head>
<body>
<div class="music-top"><table><colgroup><col span="1" class="col1"><col span="1" class="col2"><col span="1" class="col3"><col span="1" class="col4"><col span="1" class="col5"></colgroup><tr><th></th><th>排行</th><th>歌曲</th><th>歌手</th><th>时长</th></tr><tr><td><span>1</span></td><td><img src="images/up-jiantou.png" alt="">158%</td><td><div class="con"><img src="images/music-img1.webp" alt="" height="70"><div class="txt">爱丫爱丫<span>《爱情是从告白开始的》电视剧插曲</span></div><div class="button"><i class="play"></i><i class="add"></i><i class="word"></i></div></div></td><td>BY2</td><td>03:51</td></tr><tr><td><span>2</span></td><td><img src="images/up-jiantou.png" alt="">128%</td><td><div class="con"><img src="images/music-img2.webp" alt="" height="70"><div class="txt">春泥(女版)<span></span></div><div class="button"><i class="play"></i><i class="add"></i><i class="word"></i></div></div></td><td>旺仔小乔</td><td>03:03</td></tr><tr><td><span>3</span></td><td><img src="images/up-jiantou.png" alt="">118%</td><td><div class="con"><img src="images/music-img3.webp" alt="" height="70"><div class="txt">孤勇者(Live)<span>《英雄联盟：双城》</span></div><div class="button"><i class="play"></i><i class="add"></i><i class="word"></i></div></div></td><td>永彬Ryan.B</td><td>03:14</td></tr><tr><td><span>4</span></td><td><img src="images/up-jiantou.png" alt="">108%</td><td><div class="con"><a href=""><img src="images/music-img4.webp" alt="" height="70"></a><div class="txt"><a href="">爱丫爱丫<span>《爱情是从告白开始的》电视剧插曲</span></a></div><div class="button"><i class="play"></i><i class="add"></i><i class="word"></i></div></div></td><td>张韶涵/信</td><td>04:30</td></tr></table>
</div>
</body>
</html>

在这里插入图片描述

鼠标移入文字加载动画

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>鼠标移入文字加载动画</title><style type="text/css">body{margin: 0;padding: 0;}/* 清除浮动 */.clearfix::after{content: '';display: block;clear: both;}.box {width: 1200px;/* height: 370px; *//* background-color: red; */margin: 50px auto;}.box .item{width: 280px;height: 370px;/* border: 1px solid blue; *//* background-color: blue; */float: left;margin: 0 10px;position: relative;overflow: hidden;}/* 遮罩层 */.item-mask{width: 280px;height: 370px;background-color: rgba(0, 0, 0, 0);position: absolute;top: 0;left: 0;transition: background-color ease 2s;/* 动画过渡效果 */}.item:hover .item-mask{background-color: rgba(0, 0, 0, 0.5);}.item .item-title{/* border: 1px solid aqua; */position: absolute;top:-50px;left: 20px;color: white;transition: top ease .5s;}.item:hover .item-title{top: 250px;}.item .item-singer{/* border: 1px solid blue; */position: absolute;top: 290px;left: 0px;color: #fff;font-size: 14px;transform: translateX(-100%);/* 刚好向左移动自身的宽度 */transition: all ease .5s;}.item:hover .item-singer{transform: translateX(25px);/* 右移25px */}.item .item-info{/* border: 1px solid aqua; */position: absolute;/* top: 320px; */left: 20px;right: 20px;font-size: 14px;color:white;top: 370px;transition: top ease .5s;}.item:hover .item-info{top: 320px;}</style>
</head>
<body>
<div class="box clearfix"><div class="item"><img src="images/hover1.jpg" alt="" width="280"><div class="item-mask"></div><div class="item-title">《听闻远方的你》</div><div class="item-singer">演唱：刘艺雯</div><div class="item-info">我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢</div></div><div class="item"><img src="images/hover2.jpg" alt="" width="280"><div class="item-mask"></div><div class="item-title">《听闻远方的你》</div><div class="item-singer">演唱：刘艺雯</div><div class="item-info">我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢</div></div><div class="item"><img src="images/hover3.jpg" alt="" width="280"><div class="item-mask"></div><div class="item-title">《听闻远方的你》</div><div class="item-singer">演唱：刘艺雯</div><div class="item-info">我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢</div></div><div class="item"><img src="images/hover4.jpg" alt="" width="280"><div class="item-mask"></div><div class="item-title">《听闻远方的你》</div><div class="item-singer">演唱：刘艺雯</div><div class="item-info">我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢</div></div>
</div>
</body>
</html>

在这里插入图片描述

鼠标悬停缩放效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>鼠标悬停缩放效果</title><style type="text/css">body {margin: 0;padding: 0;}.clearfix {content: '';display: block;clear: both;}.flower {width: 960px;/* height: 300px; *//* border: 2px solid red; */margin: 100px auto 0;}.flower .item {width: 300px;height: 300px;background-color: aqua;float: left;margin: 0 10px;overflow: hidden;position: relative;}.item img {transition: transform ease .5s;}.item:hover img {transform: scale(1.2);}.item .item-mask {width: 300px;height: 300px;background-color: rgba(0, 0, 0, 0);position: absolute;top: 0;left: 0;transition: all ease .5s;/* 怪异盒模型处理遮罩层偏移问题 也可通过定位解决 */box-sizing: border-box;/* 水平 垂直 阴影羽化 阴影大小 阴影颜色 */box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.5);}.item:hover .item-mask {transform: scale(0.8);background-color: rgba(0, 0, 0, 0.5);border: 5px solid #fff;}.item .title {/* border: 1px solid red; */position: absolute;top: 80px;left: 40px;right: 40px;text-align: center;font-size: 18px;/* font-weight: 700; */color: #fff;transform: scale(1.2);opacity: 0;transition: all ease .5s;}.item:hover .title {transform: scale(1);opacity: 1;}.item .item-info {/* border: 1px solid blue; */position: absolute;top: 110px;left: 40px;right: 40px;color: #fff;font-size: 14px;transform: scale(1.2);opacity: 0;transition: all ease .5s;}.item:hover .item-info {transform: scale(1);opacity: 1;}</style></head><body><div class="flower clearfix"><div class="item"><img src="images/scale1.jpg" alt="" width="300"><div class="item-mask"></div><div class="title">金凤蝶</div><div class="item-info">金凤蝶，Papilio machaon Linnaeus，又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶，属鳞翅目，凤蝶科。因其体态华贵，花色艳丽而得名。有“能飞的花朵”、“昆虫美术家”的雅号。</div></div><div class="item"><img src="images/scale2.jpg" alt="" width="300"><div class="item-mask"></div><div class="title">金凤蝶</div><div class="item-info">金凤蝶，Papilio machaon Linnaeus，又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶，属鳞翅目，凤蝶科。因其体态华贵，花色艳丽而得名。有“能飞的花朵”、“昆虫美术家”的雅号。</div></div><div class="item"><img src="images/scale3.jpg" alt="" width="300"><div class="item-mask"></div><div class="title">金凤蝶</div><div class="item-info">金凤蝶，Papilio machaon Linnaeus，又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶，属鳞翅目，凤蝶科。因其体态华贵，花色艳丽而得名。有“能飞的花朵”、“昆虫美术家”的雅号。</div></div></div></body>
</html>

在这里插入图片描述

transform-origin属性取值为“关键字”
关键字百分比说明
top left 0 0 左上
top center 50% 0 靠上居中
top right 100% 0 右上
left center 0 50% 靠左居中
center center 50% 50% 正中
right center 100% 50% 靠右居中
bottom left 0 100% 左下
bottom center 50% 100% 靠下居中
bottom right 100% 100% 右下

网盘地址

前端开发常用案例

1.实现三角形

百度热榜样式

分页效果

小米商城

自动轮播图效果

二级下拉菜单效果

时间轴效果展示

音乐排行榜效果

鼠标移入文字加载动画

鼠标悬停缩放效果

相关文章：