纯CSS实现内容放大缩小效果
先搭架子
再实现第一个内容
填充更多内容
拆掉border,查看最终效果
html代码
<!-- 服务 -->
<div class="service">
<div class="service-title">
创新服务
</div>
<div class="service-container">
<div class="service-item">
<div class="service-item-common">
<div class="service-item-icon">
<img src="/Index/Index/image/innovate/yunjisuan.png" alt="">
</div>
<div class="service-item-title">
云计算平台
</div>
</div>
<div class="service-item-hover">
<div class="service-item-icon-hover">
<img src="/Index/Index/image/innovate/yunjisuan1.png" alt="">
</div>
<div class="service-item-title-hover">
云计算平台
</div>
<div class="service-item-content-hover">
<p>SaaS化的电商计算平台</p>
<p>提供标准化的服务接口与数据接口<p>
<p>电商基础服务产品化<p>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-common">
<div class="service-item-icon">
<img src="/Index/Index/image/innovate/yunshengtai.png" alt="">
</div>
<div class="service-item-title">
云生态平台
</div>
</div>
<div class="service-item-hover">
<div class="service-item-icon-hover">
<img src="/Index/Index/image/innovate/yunshengtai1.png" alt="">
</div>
<div class="service-item-title-hover">
云生态平台
</div>
<div class="service-item-content-hover">
<p>SaaS化的电子商务应用平台</p>
<p>面向不同体量级别的品牌客户<p>
<p>依照需求制定规划,精简流程<p>
<!-- <p>优化预算支出与业务能力<p>-->
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-common">
<div class="service-item-icon">
<img src="/Index/Index/image/innovate/danao.png" alt="">
</div>
<div class="service-item-title">
科技大脑
</div>
</div>
<div class="service-item-hover">
<div class="service-item-icon-hover">
<img src="/Index/Index/image/innovate/danao1.png" alt="">
</div>
<div class="service-item-title-hover">
科技大脑
</div>
<div class="service-item-content-hover">
<p>用AI技术解决电商场景问题,轻松实现提升</p>
<p>基于大数据和深度学习,识别图片、视频中的视觉内容<p>
<p>构建知识图谱,挖掘潜在商业机会<p>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-common">
<div class="service-item-icon">
<img src="/Index/Index/image/innovate/dashuju.png" alt="">
</div>
<div class="service-item-title">
大数据平台
</div>
</div>
<div class="service-item-hover">
<div class="service-item-icon-hover">
<img src="/Index/Index/image/innovate/dashuju1.png" alt="">
</div>
<div class="service-item-title-hover">
大数据平台
</div>
<div class="service-item-content-hover">
<p>以核心技术能力为依托,提供数据产品和分析服务</p>
<p>AI人工智能决策<p>
<!-- <p>与国内外知名学府深度合作智能工具<p>-->
<p>提升商业效率,开拓业务场景,优化用户体验<p>
</div>
</div>
</div>
</div>
</div>
css代码
.service {
height: 608px;
background-color: #373F5E;
.service-title {
font-size: 30px;
font-weight: bold;
color: #FFFFFF;
margin-top: 100px;
text-align: center;
}
.service-container {
width: 1200px;
//border:1px solid red;
margin:0 auto;
margin-top: 60px;
display: flex;
justify-content: center;
.service-item {
width: 248px;
height: 180px;
//border:1px solid blue;
margin-top: 60px;
transition: all 0.4s ease; /* 柔和过渡 */
background-color: #FFFFFF;
.service-item-icon {
display: flex;
justify-content: center;
margin-top: 56px;
}
.service-item-title {
font-size: 18px;
color: #222222;
text-align: center;
margin-top: 20px;
}
.service-item-hover {
display: none;
}
}
.service-item:hover {
//transform: scale(1.66, 1.66); /* 其他元素位移不会变动 */
width: 450px;
height: 300px;
margin-top: 0px;
.service-item-common {
display: none;
}
.service-item-hover {
display: block;
.service-item-icon-hover {
display: flex;
justify-content: center;
margin-top: 52px;
}
.service-item-title-hover {
font-size: 20px;
color: #222222;
font-weight: bold;
text-align: center;
margin-top: 20px;
}
.service-item-content-hover {
margin-top: 24px;
text-align: center;
line-height: 32px;
font-size: 14px;
}
}
}
.service-item:nth-child(n+2) {
margin-left: 2px;
}
}
}
这里巧妙的运用了hover属性,结合transition平滑过渡。不需要js,一样可以实现动态效果。
纯CSS实现内容放大缩小效果的更多相关文章
- css scale 元素放大缩小效果
<style> .trans-scale { width: 300px; height:300px; margin:100px auto; background:#99F; transit ...
- 纯CSS实现3D正方体动画效果
前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图
- 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader
最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...
- 纯CSS实现的风车转动效果特效演示
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.) 搜狐客户端 ...
- html 图片在一个div中放大缩小效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- 纯CSS实现轮播图效果,你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- 一个CSS+jQuery的放大缩小动画效果
日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...
随机推荐
- jvm系列四类加载与字节码技术
四.类加载与字节码技术 1.类文件结构 首先获得.class字节码文件 方法: 在文本文档里写入java代码(文件名与类名一致),将文件类型改为.java java终端中,执行javac X:...\ ...
- TypeScript中的private、protected
首先我们要清楚 private . protected 现阶段只是javascript中的保留字(Reserved words),而非关键字(Keywords ).因此TypeScript中的纯类型声 ...
- 【STM32】时钟
1. 在STM32中,有五个时钟源,为HSI.HSE.LSI.LSE.PLL: ① HSI是高速内部时钟,RC振荡器,频率为8MHz: ② HSE是高速外部时钟,可接石英/陶瓷谐振器,或者接外部时钟源 ...
- poj2923 Relocation
Description Emma and Eric are moving to their new house they bought after returning from their honey ...
- hdu5360 Hiking
Problem Description There are n soda conveniently labeled by 1,2,-,n. beta, their best friends, want ...
- js面向对象封装级联下拉菜单列表
本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素.点击文本框后,显示一级菜单.如果菜单中包含子菜单,菜单右侧会有指示箭头.点击菜单之后,会再显示下一级菜单,以此类推.当菜单下无子菜单时, ...
- DSC注册Agent失败- InternalServerError
问题 有大概5台Agent Server,注册的时候,发现2台可以成功,其他的不成功. 注册失败的错误日志如下: 初步尝试 首先,Pull Server已经平稳的运行了几年了,此次注册还有部分Agen ...
- Nacos学习与实战
1. 什么是Nacos 官网:https://nacos.io/zh-cn/index.html Nacos是阿里巴巴集团开源的项目,Nacos 致力于帮助您发现.配置和管理微服务. Nacos提供了 ...
- LINUX - 获取本地ip
Linux编程获取本机IP地址的几种方法 参考: https://blog.csdn.net/zhongmushu/article/details/89944990 https://www.cnblo ...
- kubernetes实战-交付dubbo服务到k8s集群(四)使用blue ocean流水线构建dubbo-demo-service
使用jenkins创建一个新的项目:dubbo-demo,选择流水线构建 勾选保存构建历史和指定项目为参数化构建项目: 添加构建参数:以下配置项,是王导根据多年生产经验总结出来的甩锅大法: 除了bas ...