• 实现卡片在鼠标经过有旋转和放大效果(1+X Web前端开发初级 例题)

    文章目录

    📄题目要求

    🧩说明

    🧩效果图

    🧩补充：题目文件结构

    💻HTML代码

    💻CSS代码

    🎯实现效果

    📰完整答案

    📄题目要求

    • 阅读下列说明、效果图，进行静态网页开发，填写（1）至（13）代码。

    🧩说明

    • 现接到思极商务有限公司官网页面开发的项目，根据业务需求，需要将业务列表页面的每一个业务以卡片形式展示；同时为提升用户体验，要求实现每个卡片在鼠标经过有旋转和放大效果。

    • 项目名称为goods，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含style.css文件；img文件夹包含icon-img.jpg、icon-img2.jpg、icon-img3.jpg图片。

    • 请使用html+css3完成以下效果，并在对应代码处将空缺代码补全。

    🧩效果图

    鼠标经过前

    鼠标经过后

    🧩补充：题目文件结构

    💻HTML代码

    1. html>
    2. <html>
    3. <head>
    4. 	<title>第二题title>
    5. 	<meta charset="utf-8">
    6. 	
    7. 	
    8. 	<link rel="stylesheet" type="text/css" href="css/style.css">
    9. head>
    10. <body>
    11. <div class="box">
    12. 	<div class="con">
    13. 		<ul class="clear">
    14. 			<li>
    15. 				<img src="img/icon-img.jpg">
    16. 				<p>优化速度p>
    17. 				<span>更多span>
    18. 			li>
    19. 			<li>
    20. 				<img src="img/icon-img2.jpg">
    21. 				<p>营销分析p>
    22. 				<span>更多span>
    23. 			li>
    24. 			<li>
    25. 				
    26. 				
    27. 				
    28. 				<img  src="img/icon-img3.jpg">
    29. 				<p>SEO和导入链接p>
    30. 				<span>更多span>
    31. 			li>
    32. 		ul>
    33. 	div>
    34. div>
    35. body>
    36. html>

    💻CSS代码

    1. body,
    2. h1,
    3. h2,
    4. h3,
    5. h4,
    6. h5,
    7. h6,
    8. p,
    9. ul,
    10. ol,
    11. dl,
    12. dd {
    13. 	margin: 0;
    14. 	padding: 0;
    15. }
    16.  
    17. ul {
    18. 	list-style: none;
    19. }
    20.  
    21. img {
    22. 	display: block;
    23. }
    24.  
    25. .clear:after {
    26. 	content: "";
    27. 	display: block;
    28. 	clear: both;
    29. }
    30.  
    31. .box {
    32. 	background-color: #ccc;
    33. }
    34.  
    35. .box .con {
    36. 	width: 1200px;
    37. 	margin: 30px auto;
    38. 	padding: 50px 0;
    39. }
    40.  
    41. .box .con ul li {
    42. 	float: left;
    43. 	background-color: #fff;
    44. 	width: 380px;
    45. 	/* （4）（5）（6）（7）设置li边框为圆角15px，文字对齐方式为居中。 */
    46. 	/* （4）     ：  （5）      ; */
    47. 	/* （6）   ：   （7）      ; */
    48. 	border-radius: 15px;
    49. 	text-align: center;
    50. 	overflow: hidden;
    51. }
    52.  
    53. .box .con ul li:nth-child(2) {
    54. 	margin: 0 30px;
    55.  
    56. }
    57.  
    58. .box .con ul li img {
    59. 	margin: 50px auto 0;
    60. 	/* （8）此处设置图片的过渡效果为0.8秒 */
    61. 	/* （8）     ：0.8s; */
    62. 	transition: .8s;
    63. }
    64.  
    65. .box .con ul li p {
    66. 	/* （9）（10）设置内边距上下为0，左右为15px */
    67. 	/* （9）     ：  （10）      ; */
    68. 	padding: 0px 15px 0px 15px;
    69. 	line-height: 140px;
    70. 	border-bottom: 1px solid #ddd;
    71. 	font-weight: 600;
    72. 	color: #555;
    73. }
    74.  
    75. .box .con ul li span {
    76. 	display: block;
    77. 	width: 100%;
    78. 	height: 60px;
    79. 	line-height: 60px;
    80. 	/* （11）此处设置文字的过渡效果为0.8秒 */
    81. 	/* （11）     ：0.8s; */
    82. 	transition: .8s;
    83. }
    84.  
    85. .box .con ul li:hover img {
    86. 	/* （12）（13）用CSS3的实现鼠标经过图片旋转360度，放大1.3倍，离开再旋转还原。 */
    87. 	/* （12）     ：    （13）    ; */
    88. 	transform: rotate(360deg) scale(1.3);
    89. }
    90.  
    91. .box .con ul li:hover span {
    92. 	background-color: #f7c324;
    93. 	font-weight: 600;
    94. }

    🎯实现效果

    📰完整答案

    试题二（26分）

    【问题】（26分）

    （1）css/style.css  或者 ./css/style.css 
    （2）img
    （3）p
    （4）border-radius
    （5）15px
    （6）text-align
    （7）center
    （8）transition
    （9）padding
    （10）0 15px  或者 0px 15px  或者 0 15px 0 15px  或者 0px 15px 0px 15px
    （11）transition
    （12）transform
    （13）rotate(360deg)  scale(1.3) 或者scale(1.3)  rotate(360deg)
    （每空2分，共26分）

    🎯点赞收藏，防止迷路🔥 

  • 相关阅读:
    ELK日志监控平台（三）---kibana数据可视化
    400电话怎么办理(申请开通)
    事件解析树Drain3使用方法和解释
    神经网络处理器设计原理,神经网络控制系统设计
    Java学习笔记6.3.1 文件操作 - File类
    基于微信小程序的音乐播放器设计与实现(源码+lw+部署文档+讲解等)
    【算法面试必刷Java版十四】链表的奇偶重排
    Java:设计模式七大原则整理
    2024前端笔试题记录
    共享盘的文件删除后能找回吗
  • 原文地址：https://blog.csdn.net/weixin_53231455/article/details/127710542