CSS3 制作的悬停缩放特效


Posted in HTML / CSS onApril 13, 2021

实现代码:

html

<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'>

<div align="center" class="fond">
<div style="width:1000px;">

<div class="style_prevu_kit" style="background-color:#cb2025;"></div>
<div class="style_prevu_kit" style="background-color:#f8b334;"></div>
<div class="style_prevu_kit" style="background-color:#97bf0d;"></div>
<div class="style_prevu_kit" style="background-color:#00a096;"></div>
<div class="style_prevu_kit" style="background-color:#93a6a8;"></div>


<div style=" padding:5px; color:#b5e6e3; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:20px;">jb <font style="font-weight:400;">51</font></div>
        <a href="http://www.wifeo.com/code" style="text-decoration:none;" target="_blank"><div style="  color:#b5e6e3; font-weight:300; font-size:20px; font-family:'Roboto';">三水点靠木</div></a>
  
</div>
</div>

css3

.fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;
 background-color:#00506b;}

.style_prevu_kit
{
    display:inline-block;
    border:0;
    width:196px;
    height:210px;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   

}
.style_prevu_kit:hover
{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}

以上就是CSS3 制作的悬停缩放特效的详细内容,更多关于CSS3 悬停缩放的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
CSS3 制作的书本翻页特效
浅谈移动端中的视口(viewport)的具体使用
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
CSS3 制作的彩虹按钮样式
CSS中em的正确打开方式详解
几款流行的HTML5 UI框架比较(小结)
css 中多种边框的实现小窍门
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
python实现学生管理系统
2018/01/11 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
安全大检查反思材料
2014/01/31 职场文书
预备党员表决心书
2014/03/11 职场文书
不同意离婚代理词
2015/05/23 职场文书
三八节祝酒词
2015/08/11 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python