前言：
当前我们对“html图片全屏”可能比较讲究，各位老铁们都想要学习一些“html图片全屏”的相关文章。那么小编在网络上搜集了一些对于“html图片全屏””的相关内容，希望小伙伴们能喜欢，咱们一起来了解一下吧！实现效果：
视频加载中...
实现代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .box { width: 100%; height: 100%; position: relative; } .one { width: 100%; height: 100%; position: absolute; background: url(大乔.jpg) no-repeat; /* 将背景图像等比缩放到完全覆盖容器 */ background-size: cover; } .two { width: 100%; height: 100%; background: url(大乔-仙羽琴思.jpg) no-repeat; position: absolute; background-size: cover; } .numbers { width: 210px; height: 100px; position: absolute; /* 相对父元素宽度的一半 */ left: 50%; /* 相对元素自己宽度一半 */ /* transform: translate(-50%); */ /* transform: translateX(-50%); */ margin-left: -105px; bottom: 50px; /* 叠放次序 */ z-index: 5; } .numbers a { width: 100px; height: 100px; /* 圆角边框 */ border-radius: 50%; /* 指定对象为内联块元素 */ display: inline-block; /* 内容的水平对齐方式 */ text-align: center; line-height: 100px; background-color: #f8f672; } #one:target { z-index: 1; /* 调用动画集 */ animation: s_r 1s linear; } #two:target { z-index: 1; animation: scale 1s linear; } /* 定义动画集 */ @keyframes s_r { from { /* 缩放、旋转 */ transform: scale(0) rotateZ(0deg); } to { transform: scale(1) rotateZ(360deg); } } @keyframes scale { 0% { /* 缩放 */ transform: scale(0); } 100% { transform: scale(1); } } </style></head><body> <div class="box"> <div class="one" id="one"></div> <div class="two" id="two"></div> <div class="numbers"> <a href="#one">1</a> <a href="#two">2</a> </div> </div></body></html>素材图片：
美图分享-大乔
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html图片全屏
