css3放大效果的代码（html5放大比例）

今天给各位分享css3放大效果的代码的知识，其中也会对html5放大比例进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、css3的常用变形方法有哪些?写出核心代码
• 2、如何利用CSS3制作3D效果文字具体实现样式
• 3、用css的 a:hover img 放大图片时怎么让放大后的图片 从原图片的中心放大
• 4、用CSS3编写:div旋转90度 0.5秒后变圆 0.5秒后放大2倍
• 5、如何用CSS实现鼠标经过 图片放大的效果
• 6、html+css3实现放大镜效果 （2021-08-25）

css3的常用变形方法有哪些?写出核心代码

css3中的变形

Chrome和safai需前缀加-webkit-，Foxfire需加前缀-moz-

1,旋转 rotate()

div{

width: 300px;

height: 300px;

transform:rotate(20deg);

}

2,扭曲 skew()

div {

width: 300px;

height: 300px;

transform:skew(45deg,-10deg);

}

3,缩放 scale()

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

也可以只缩放 x轴，或只缩放y轴。

div {

width: 200px;

height: 200px;

background: orange;

}

.wrapper div:hover {

opacity: .5;

transform: scale(0.8);

}

4,位移 translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。

或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，

而不影响在X、Y轴上的任何Web组件。

5，原点 transform-origin

CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。

但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素

原点不在元素的中心位置，以达到需要的原点位置。

div {

transform: skew(45deg);

transform-origin:top;

}

6,过渡

div {

width: 200px;

height: 200px;

background: red;

margin: 20px auto;

-webkit-transition-property: all;

transition-property: all; //指定过渡或动态模拟的css属性 （all是指所有）

-webkit-transition-duration:5s;

transition-duration:5s; //指定完成过渡的时间

-webkit-transition-timing-function: linear;

transition-timing-function: linear; //指定过渡的函数 linear/ease/ease-in/ease-out/ease-in-out/cubicbezier(n,n,n,n) n为0-1

-webkit-transition-delay: .18s;

transition-delay:.18s; //指定开始出现的延迟时间

}

div:hover {

width: 400px;

height:400px;

}

7，Keyframes被称为关键帧，css3中以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{...}”

@keyframes changecolor{

0%{

background: red;

}

20%{

background:blue;

}

40%{

background:orange;

}

60%{

background:green;

}

80%{

background:yellow;

}

100%{

background: red;

}

}

div {

width: 300px;

height: 200px;

}

div:hover {

animation: changecolor 5s ease-out .2s;

}

等价于

div:hover{

animation-name:changecolor;

animation-duration:5s;

animation-timing-function:ease-out;

animation-delay:1;

animation-iteration-count:infinite;//动画播放次数 整数。

animation-play-state:paused;//主要用来控制元素动画的播放状态。

animation-direction:alternate;//动画方向，normal每次循环向前，alternate偶次向前，奇数相反。

animation-fill-mode: both; //设置动画时间外属性none、forwards、backwords和both

}

如何利用CSS3制作3D效果文字具体实现样式

复制代码代码如下: .example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}译者注：X表示x轴上的位移，可为负值；Y表示y轴上的位移，可为负值；Blur表示投影的宽度，不能为负值；Color为投影的颜色。 堆叠多层CSS投影 虽然我们没有必要堆叠多层投影，但通过堆叠多层投影会有更好的3D效果 开始创建3D文字 你可能会选择比文字更深的颜色来作为投影的颜色，所以这个例子中我就用白色的文字，用深一点的灰色作为投影颜色，这个例子中我将H2的文字渲染3D效果，css代码如下： 复制代码代码如下:h2{text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, /* end of 2 level deep grey shadow */ 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444; /* end of 4 level deep dark shadow */}效果如下：好了，到这里你已经创建了基本的3D文字，然而，让我们进一步来实现鼠标滑过的文字放大效果，并用css的transision属性实现圆滑的淡入淡出效果。 首先用transform属性实现滑过字体放大 复制代码代码如下:h2:hover{/* CSS3 Transform Effect */ -webkit-transform: scale(1.2); /* Safari Chrome */ -moz-transform: scale(1.2); /* Firefox */ -o-transform: scale(1.2); /* Opera */}效果如下：然后利用transition属性实现淡入淡出效果 复制代码代码如下:h2{/* CSS3 Transition Effect */ -webkit-transition: all 0.12s ease-out; /* Safari Chrome */ -moz-transition: all 0.12s ease-out; /* Firefox */ -o-transition: all 0.12s ease-out; /* Opera */}到此，我们就用CSS3实现了3D效果的文字，并且在鼠标滑过是让字体放大，且有淡入淡出的效果，这一切是用纯CSS实现的哦。

用css的 a:hover img 放大图片时怎么让放大后的图片 从原图片的中心放大

用CSS3中的transfrom:scale{x,y}来放大，如下：

style

*{margin:0;padding:0;}

div{border:solid 1px #333;width:40px;height:40px;}

div img{width:40px;height:40px;transition:all 0.3s;}

div img:hover{transfrom:scale{2,2};}//从中心放大两部

/style

divimg src="图片地址" alt=""//div

扩展资料：

注意事项

transfrom是利用线性代数来存放一个控件(或许是图片)的具体信息.(由于可以通过transfrom直接操作控件.所以肯定直接或者间接的存储着点的信息和控件的大小等信息)

1、移动.左移右移或者上移下移:

CGAffineTransformMakeTranslation(X偏移量, Y偏移量);

CGAffineTransformTranslate(在某个transform的基础上-一般为自身, X偏移量, Y偏移量);

2、改变大小(形变):

CGAffineTransformMakeScale(宽缩放的倍数, 高缩放的倍数);

CGAffineTransformScale(在某个transform的基础上-一般为自身, 宽缩放的倍数, 高缩放的倍数);

用CSS3编写:div旋转90度 0.5秒后变圆 0.5秒后放大2倍

!DOCTYPE

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title无标题文档/title

style

body{

padding:0;

margin:0;

width:100%;

height:100%;

}

.demo{

width:100px;

height:100px;

background:#ff6600;

margin:100px auto;

transition:transform 0.5s, border-radius 1s, height 2.5s, width 2.5s;

-moz-transition:-moz-transform 0.5s, border-radius 1s, height 2.5s, width 2.5s ; /* Firefox 4 */

-webkit-transition:-webkit-transform 0.5s,border-radius 1s, height 2.5s, width 2.5s; /* Safari and Chrome */

-o-transition:-o-transform 0.5s, border-radius 1s, height 2.5s, width 2.5s; /* Opera */

}

div.demo:hover{

width:200px;

height:200px;

border-radius:200px;

-moz-border-radius:200px;

-webkit-border-radius:200px;

transform:rotate(90deg);

-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */

-moz-transform: rotate(90deg);/*Firefox 3.5+*/

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/

}

div.demo2

{

width:100px;

height:100px;

margin:200px auto;

background:red;

animation:myfirst 2s linear 2s infinite alternate;;

-moz-animation:myfirst 2s linear 2s infinite alternate;; /* Firefox */

-webkit-animation:myfirst 2s linear 2s infinite alternate;; /* Safari and Chrome */

-o-animation:myfirst 2s linear 2s infinite alternate;; /* Opera */

}

@keyframes myfirst

{

0% {background:red;}

50% {

transform:rotate(90deg);

-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */

-moz-transform: rotate(90deg);/*Firefox 3.5+*/

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/}

75% {

border-radius:100px;

-moz-border-radius:100px;

-webkit-border-radius:100px;}

100% {

width:200px;

height:200px;

border-radius:200px;

-moz-border-radius:200px;

-webkit-border-radius:200px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0% {background:red;}

50% {

transform:rotate(90deg);

-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */

-moz-transform: rotate(90deg);/*Firefox 3.5+*/

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/}

75% {

border-radius:100px;

-moz-border-radius:100px;

-webkit-border-radius:100px;}

100% {

width:200px;

height:200px;

border-radius:200px;

-moz-border-radius:200px;

-webkit-border-radius:200px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:red;}

50% {

transform:rotate(90deg);

-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */

-moz-transform: rotate(90deg);/*Firefox 3.5+*/

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/}

75% {

border-radius:100px;

-moz-border-radius:100px;

-webkit-border-radius:100px;}

100% {

width:200px;

height:200px;

border-radius:200px;

-moz-border-radius:200px;

-webkit-border-radius:200px;}

}

@-o-keyframes myfirst /* Opera */

{

0% {background:red;}

50% {

transform:rotate(90deg);

-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */

-moz-transform: rotate(90deg);/*Firefox 3.5+*/

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/}

75% {

border-radius:100px;

-moz-border-radius:100px;

-webkit-border-radius:100px;}

100% {

width:200px;

height:200px;

border-radius:200px;

-moz-border-radius:200px;

-webkit-border-radius:200px;}

}

/style

/head

body

div class="demo"/div

div class="demo2"/div

/body

/html

用了css3两种效果一种过渡demo 一种动画demo2

如何用CSS实现鼠标经过 图片放大的效果

源码如下

!DOCTYPE html    

html    

head    

 meta charset="UTF-8"    

 titleCSS3鼠标滑过图片放大特效DEMO演示/title    

 style    

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}    

/style    

   style    

@import url("");    

* {    

 margin: 0;    

 padding: 0;    

 box-sizing: border-box;    

}    

body {    

 font: 14px/1 Lato, sans-serif;    

 color: #555;    

 background: #eee;    

}    

.gallery {    

 width: 790px;    

 margin: 30px auto;    

 padding: 5px;    

 background: #333;    

}    

.gallery  div {    

 position: relative;    

 float: left;    

 padding: 5px;    

}    

.gallery  div  img {    

 width: 250px;    

 transition: .1s transform;    

 transform: translateZ(0);    

 /* hack */    

}    

.gallery  div:hover {    

 z-index: 1;    

}    

.gallery  div:hover  img {    

 transform: scale(1.5, 1.5);    

 transition: .3s transform;    

}    

.cf:before, .cf:after {    

 display: table;    

 content: "";    

 line-height: 0;    

}    

.cf:after {    

 clear: both;    

}    

h1 {    

 margin: 40px 0;    

 font-size: 24px;    

 text-align: center;    

 text-transform: uppercase;    

}    

footer {    

 margin: 80px 0;    

 text-align: center;    

}    

/style    

   script src="js/prefixfree.min.js"/script    

/head    

body    

div class="gallery cf"    

 div    

   img src="landscape-test-1_1x.jpg" /    

 /div    

 div    

   img src="iceberg_1x.jpg" /    

 /div    

 div    

   img src="igloo-800_1x.jpg" /    

 /div    

 div    

   img src="trees_1x.jpg" /    

 /div    

 div    

   img src="space_1x.jpg" /    

 /div    

 div    

   img src="render1_1x.jpg" /    

 /div    

/div    

div style="text-align:center;clear:both;"    

script src="/gg_bd_ad_720x90.js" type="text/javascript"/script    

script src="/follow.js" type="text/javascript"/script    

/div    

/body    

/html

html+css3实现放大镜效果 （2021-08-25）

    1、给body添加背景图，在body中添加一个父盒子（父盒子开启绝对定位），父盒子中再添加一个子盒子。

    2、给window添加鼠标移动事件，根据鼠标在浏览器中的坐标（clientX和clientY）修改父盒子的top和left，以达到移动镜面的效果。

    3、给子盒子添加背景图（和body背景图一致），在window的鼠标移动事件中修改子盒子的样式——background-position，改变子盒子中的背景图在盒子中的显示位置，使背景图的显示与body一致。

    4、再给子盒子添加缩放（transform:scale(2)），即可实现放大功能。

    1、由于背景图无法设置透明度，所以使用body的伪元素，给伪元素添加背景图和opacity属性。

    2、这时虽然给背景设置上了透明的，但却是发白的那种透明，要想变成暗沉的透明，只需要给body添加背景颜色就行。

    3、background-position的使用，由于是要将背景的选中位置移动到盒子的中心，所以使用的是负值。

!DOCTYPE html

html lang="en"

head

  meta charset="UTF-8"

  meta http-equiv="X-UA-Compatible" content="IE=edge"

  meta name="viewport" content="width=device-width, initial-scale=1.0"

  titleDocument/title

  style

    body {

      padding: 0;

      background-color: #000;

      margin: 0;

    }

    body::after{

      display: block;

      position: absolute;

      top: 0;

      left: 0;

      content: '';

      width: 100%;

      height: 100%;

      background-image: url('伊芙琳.jpg');

      background-position: 0px 0px;

      background-size: 100% auto;

      opacity: 0.1;

    }

    .magnifier {

      width: 300px;

      height: 300px;

      background-image: url('伊芙琳.jpg');

      background-size: 1730px auto;

      background-position: 0px 0px;

      transform: scale(2);

      margin: 0;

      position: relative;

      z-index: 100;

    }

    .main {

      width: 300px;

      height: 300px;

      border-radius: 50%;

      overflow: hidden;

      position: absolute;

    }

  /style

/head

body

  div class="main"

    div class="magnifier"/div

  /div

  script

    let flag = true

    let magnifier = document.getElementsByClassName('magnifier')[0]

    let main = document.getElementsByClassName('main')[0]

    let boxLeft = 0

    let boxTop = 0

    window.onmousemove = (event) = {

      if(!flag) return

      setTimeout( ()={

          flag = true

      },50)

      console.log(event.clientX, event.clientY);

      if(event.clientX  1590) {

        event.clientX = 1590 

      }

      boxLeft =  event.clientX  1590 ? '1440px' : event.clientX  150 ? event.clientX - 150 + 'px':'0px'

      boxTop = event.clientY  720 ? '575px' : event.clientY  150 ? event.clientY - 150 + 'px':'0px'

      main.style.left = boxLeft

      main.style.top = boxTop

      // magnifier.style.backgroundPosition = '830px 570px'

      magnifier.style.backgroundPosition = '-' + boxLeft + ' ' + '-' + boxTop

      flag = false

    }

  /script

/body

/html

css3放大效果的代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html5放大比例、css3放大效果的代码的信息别忘了在本站进行查找喔。