html+css制作的个人主页,5个页面,有动态视频背景-鼠标移入图片放大旋转

前言

请添加图片描述

在网站设计中,纯粹HTML格式的网页通常被称为“静态网页”,静态网页是标准的HTML文件,它的文件扩展名是.htm、.html,可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。静态网页是网站建设的基础,早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言,是指没有后台数据库、不含程序和不可交互的网页。静态网页相对更新起来比较麻烦,适用于一般更新较少的展示型网站。容易误解的是静态页面都是htm这类页面,实际上静态也不是完全静态,他也可以出现各种动态的效果,如GIF格式的动画、FLASH、滚动字幕等。


文件目录

一般静态网页的文件由images、css、js以及若干html文件组成,如下图:
在这里插入图片描述

页面截图展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

源码下载

下载

作者🌏:htmlsj

  • 9
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用CSS3的transform属性和transition属性来实现图片放大和缓慢过渡效果,同时使用伪元素和背景图来实现鼠标移入图片变成放大镜的效果。 HTML代码: ``` <div class="image-container"> <img src="image.jpg" alt="Image"> <div class="magnifier"></div> </div> ``` CSS代码: ``` .image-container { position: relative; display: inline-block; overflow: hidden; } .image-container img { display: block; width: 100%; height: auto; transition: transform 0.3s ease-out; } .image-container:hover img { transform: scale(1.1); } .image-container .magnifier { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background-image: url('magnifier.png'); background-size: cover; opacity: 0; transition: opacity 0.3s ease-out; } .image-container:hover .magnifier { opacity: 1; } .image-container .magnifier:before { content: ""; position: absolute; top: -50px; left: -50px; width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 50%; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-out, visibility 0s linear 0.3s; } .image-container:hover .magnifier:before { opacity: 1; visibility: visible; transition: opacity 0.3s ease-out, visibility 0s linear 0s; } ``` 解释: 1. `image-container`是图片容器,设置`position: relative`让伪元素和放大镜在其中定位,设置`overflow: hidden`让图片超出容器部分隐藏。 2. `image-container img`是图片,设置`transition: transform 0.3s ease-out`让其在放大时有缓慢的过渡效果,设置`transform: scale(1.1)`让其在鼠标移入放大。 3. `image-container:hover img`是图片鼠标移入状态,设置`transform: scale(1.1)`让其放大。 4. `image-container .magnifier`是放大镜,设置`position: absolute`让其在容器内定位,设置`opacity: 0`让其初始时不可见,设置`transition: opacity 0.3s ease-out`让其在出现时有缓慢的过渡效果。 5. `image-container:hover .magnifier`是放大镜的鼠标移入状态,设置`opacity: 1`让其出现。 6. `image-container .magnifier:before`是放大镜的伪元素,设置`content: ""`让其成为一个空元素,设置`position: absolute`让其在容器内定位,设置`opacity: 0`和`visibility: hidden`让其初始时不可见,设置`transition: opacity 0.3s ease-out, visibility 0s linear 0.3s`让其在出现时有缓慢的过渡效果,同时避免出现闪烁现象。 7. `image-container:hover .magnifier:before`是放大镜伪元素的鼠标移入状态,设置`opacity: 1`和`visibility: visible`让其出现,同时设置`transition: opacity 0.3s ease-out, visibility 0s linear 0s`让其在出现时有缓慢的过渡效果,同时避免出现闪烁现象。 注意:上述代码中的放大图片放大背景图需要自己准备。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值