HTML+CSS基础入门开发，小方块缩小放大动画特效

家好，本篇文章分享小方块缩小放大动画特效，欢迎参考和指正。

效果图：

小方块缩小放大动画特效

HTML代码：

<div class="tui-demo-3"></div>

CSS代码：

<style type="text/css">
 .tui-demo-3 {
 width: 100px;
 height: 100px;
 background: #1E9FFF;
 margin: 50px auto;
 animation: tui-demo-3 2.0s infinite;
 }
 @keyframes tui-demo-3 {
 0% {
 transform: scale(0.3);
 }
 50% {
 transform: scale(1);
 }
 100% {
 transform: scale(0.3);
 }
 }
</style>

知识点：

animation：是CSS3的动画属性，这里把animation绑定到tui-demo-3元素上，并指定该动画需要2.0秒完成，infinite则表示无限次播放该动画。

@keyframes：该规则表示动画可以逐步从一个CSS样式改变为另一个CSS样式。这里0％是动画开头，100％是动画结束。

transform：该属性应用于2D元素或3D元素的转换，允许元素发生旋转，缩放，移动，倾斜等效果。scale定义2D缩放，可以配置缩放大小。

最后注意下浏览器兼容问题，-webkit-,-ms-或-moz-，有问题可以留言，大家一起学习HTML+CSS基础入门开发。

景

我们在浏览购物网站，遇到喜欢的商品，总想点击图片放大后看看详细内容，那么放大是怎么做的呢，写一个简单的例子，带大家了解一下。

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多种形式放大镜</title>
<!--hizoom css样式-->
<link rel="stylesheet" type="text/css" href="../css/hizoom/normalize.css" />
<link rel="stylesheet" type="text/css" href="../css/hizoom/htmleaf-demo.css">
<link rel='stylesheet' href='../css/hizoom/main.css'>
<link rel='stylesheet' href='../css/hizoom/hizoom.min.css'>
<!--jquery.zoom css样式-->
<link rel="stylesheet" type="text/css" href="../css/zoom/normalize.css" />
<link rel="stylesheet" type="text/css" href="../css/zoom/htmleaf-demo.css">
<style>
/*jquery.zoom必须样式，保证放大后的图片在原位置*/
.zoom{
display:inline-block;
position: relative;
}
.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
/*background:url(img/icon.png);*/
}
.zoom img {
display: block;
}
</style>
</head>
<body style="background-color: whitesmoke;text-align: center">
<!--hizoom 展示部分-->
<div style="margin-top: 5%;margin-left: 5%">
<div class='hizoom c2'>
<img src='../images/hizoom/hizoom-cs2.jpg'>
</div>
</div>
<!--jquery.zoom 展示部分-->
<div>
<div style="width: 900px;margin-left: 30%;margin-top: -350px">
<span class='zoom' id='zoom-ex1'>
<img src='/images/zoom/zoom-horse.jpg' width='400' height='320' alt='horse'/>
</span>
<span class='zoom' id='zoom-ex2'>
<img src='/images/zoom/zoom-nvpu.jpg' width='400' height='320' alt='nvpu'/>
</span>
<span class='zoom' id='zoom-ex3'>
<img src='/images/zoom/zoom-cat.jpg' width='400' height='320' alt='cat'/>
</span>
<span class='zoom' id='zoom-ex4'>
<img src='/images/zoom/zoom-shanhe.jpg' width='400' height='320' alt='shanhe'/>
</span>
</div>
</div>
<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='../js/hizoom/hizoom.min.js' type="text/javascript"></script>
<script src='../js/zoom/jquery.zoom.min.js'></script>
<script type="text/javascript">
/*hizoom插件*/

$('.c2').hiZoom({
width: 300,//放大镜容器的宽高（目前只支持正方形放大镜），会同时修改原始图片的展示大小
position: 'bottom',//被放大区域展示的位置
distance:10,//被放大区域和放大镜容器间的距离
background:'white',//放大镜背景色
opacity:0.7//放大镜透明度 0~1
});
/*jquery.zoom插件*/

$(function (){
$('#zoom-ex1').zoom();//鼠标移动上去即可放大
$('#zoom-ex2').zoom({ on:'grab' });//鼠标点击后不放手，移动鼠标
$('#zoom-ex3').zoom({ on:'click', duration:100});//鼠标点击后放手，可以移动，在点击恢复原状态
$('#zoom-ex4').zoom({ on:'toggle' });//点击指定位置放大
})
</script>
</body>
</html>

hizoom放大镜插件的可用配置参数如下：

属性	描述	可选值	默认值
width	放大镜容器的宽高	任何正数	400
position	被放大区域的位置	left\|right\|top\|bottom	right
background	放大镜背景色	合法CSS颜色值	#FFF
opacity	放大镜透明度	0~1（合法CSS值）	0.7
distance	被放大区域和放大镜容器间的距离	任何正数	20

jquery.zoom.js插件的可用配置参数有：

参数	默认值	描述
url	false	显示大图的url地址。如果没有提供，默认使用第一个img子元素的url地址。
on	'mouseover'	触发图片放大的事件。可用类型有：mouseover, grab, click, toggle。
duration	120	淡入淡出效果的持续时间。
target	false	要放大图片的父容器的选择器或DOM元素。
touch	true	是否允许移动触摸交互。
magnify	1	1表示图片放大为原尺寸的2倍。
callback	false	图片加载时的回调函数。
onZoomIn	false	图片放大时的回调函数。
onZoomOut	false	图片缩小时的回调函数。

你的赞和关注是对我最大的肯定，希望大家多多支持，谢谢大家。

明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。

一、为什么要学 SVG ?

SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失真。

与其他图像比较，SVG 的优势有以下几点：

SVG 可以被多个工具读取和修改。
SVG 与其他格式图片相比，尺寸更小，可压缩性强。
SVG 可任意伸缩。
SVG 图像可以随意地高质量打印。
SVG 图像可以添加文本和事件，还可搜索，适合做地图。
SVG 是纯粹的 XML，不是 HTML5。
SVG是W3C标准

二、SVG 形状元素

2.1、svg 标签

SVG 的代码都放到 svg 标签呢，SVG 中的标签都是闭合标签，与html中标签用法一致。svg的属性有：

有width和height，指定了svg的大小。

eg：画一条直线，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 设置的宽高没有带单位，此时默认是像素值，如果需要添加单位时，除了绝对单位，也可以设置相对单位。

viewBox 属性

使用语法：<svg viewBox=" x1,y1,width,height "></svg>

四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分，由上述四个参数决定。

使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代码可以直接嵌入到 html 页面中，也可以通过 html 的embed、object、iframe嵌入到html中。嵌入的时候嵌入的是 SVG 文件，SVG 文件必须使用 .svg 后缀。分别介绍各种方法如何使用？

2.2.1、embed 嵌入：

使用语法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路径，type 表示 embed 引入文件类型。

优点：所有浏览器都支持，并允许使用脚本。

缺点：不推荐 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用语法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路径，type 表示 object 引入文件类型。

优点：所有浏览器都支持，支持 html、html4 和 html5。

缺点：不允许使用脚本。

2.2.3、iframe 嵌入：

使用语法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路径，width、height、frameborder 设置的大小和边框。

优点：所有浏览器都支持，并允许使用脚本。

缺点：不推荐 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 标签直接插入 html 内容内，与其他标签用法一致。

2.2.5、连接到svg文件：

使用 a 标签，直接链接到 SVG 文件。

使用语法：<a href="line.svg">查看SVG</a>

三、SVG形状元素

3.1、线 - line

使用语法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line标签创建线条，(x1,y1)是起点，(x2,y2)是终点，stroke绘制黑线，stroke-width是线宽。

3.2、矩形 - rect

//使用语法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小设置
 x="50" y="50"  //可选 左上角位置，svg的左上角默认(0,0)
 rx="20" ry="50" //可选 设置圆角
 stroke-width="3" stroke="red" fill="pink" //绘制样式控制
></rect>
</svg>

上述参数 width、height是必填参数，x、y是可选参数，如不设置的时候，默认为(0,0)，也就是svg的左上角开始绘制。rx、ry是可选参数，不设置是矩形没有圆角。fill定义填充颜色。

3.3、圆形 - circle

// 使用语法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定义圆心 ，可选
  r="40" // 圆的半径
  stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色
</svg>

上述(cx,xy)定义圆心的位置，是可选参数，如果不设置默认圆心是（0,0）。r是必需参数，设置圆的半径。

3.4、椭圆 - ellipse

椭圆与圆相似，不同之处在于椭圆有不同的x和y半径，而圆两个半径是相同的。

// 使用语法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //设置椭圆的x、y方向的半径
  fill="purple" // 椭圆填充色
  cx="150" cy="150" //设置椭圆的圆心 ，可选参数
 ></ellipse>
</svg>

上述椭圆的两个rx、ry两个方向半径是必须参数，如果rx=ry就表示是圆形，（cx,cy）是椭圆的圆心，是可选参数，如果不设置，则默认圆心为（0,0）。

3.5、折线 - polyline

// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 绘制出一个默认填充黑色的三角形 -->
 <polyline 
  points=" //点的集合
   0 ,0, // 第一个点坐标
   100,100, // 第二个点坐标
   100,200 // 第三个点坐标
    " 
  stroke="green" 
 ></polyline>
<!-- 绘制一个台阶式的一条折线 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代码执行结果如图所示：

需要注意的是 points 中包含了多个点的坐标，但不是一个数组。

3.6、多边形 - polygon

polygon 标签用来创建不少于3个边的图形，多边形是闭合的，即所有线条连接起来。

// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多边形的第一点
   100,100,  //多边形的第二点
    0,100  //多边形的第三点
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon绘制的时候与折线有些类似，但是polygon会自动闭合，折线不会。

3.7、路径 - path

path 是SVG基本形状中最强大的一个，不仅能创建其他基本形状，还能创建更多其他形状，如贝塞尔曲线、2次曲线等。

点个关注，下篇更精彩！

在线咨询

上一篇：CSS设置背景模糊
下一篇：网站开发的步骤有哪些？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML+CSS基础入门开发，小方块缩小放大动画特效

景

效果

代码

一、为什么要学 SVG ?

二、SVG 形状元素

三、SVG形状元素

您的项目需求