多层浮动效果

最新推荐文章于 2021-03-21 12:15:44 发布
最新推荐文章于 2021-03-21 12:15:44 发布
阅读量144 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbs311709000127/article/details/103298794
版权 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	body{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.container{
		position: relative;
		width: 360px;
		height: 360px;
		margin: 150px;
		background: rgba(0,0,0,.1);
		transform: rotate(-30deg) skew(25deg) scale(.8);
		transition: 0.5s;
	}
	.container img{
		position: absolute;
		width: 100%;
		transition: 0.5s;
	}
	.container:hover img:nth-child(4){
		transform: translate(160px,-160px);
		opacity: 1;
	}
	.container:hover img:nth-child(3){
		transform: translate(120px,-120px);
		opacity: .8;
	}
	.container:hover img:nth-child(2){
		transform: translate(80px,-80px);
		opacity: .8;
	}
	.container:hover img:nth-child(1){
		transform: translate(40px,-40px);
		opacity: .8;
	}
</style>
<script type="text/javascript">
</script>
</head>
<body> 
	<div class="container">
		<img src="../作业2/img/666 (2).jpg" />
		<img src="../作业2/img/666 (2).jpg" />
		<img src="../作业2/img/666 (2).jpg" />
		<img src="../作业2/img/666 (2).jpg" />
	</div>
</body>
</html>

 

小青龙8085
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页设计浮动和定位小总结
qq_43527959的博客
05-13 3128
1、元素的浮动属性float (让多个div占在同一行内) 浮动属性作为CSS的重要属性，被频繁地应用在网页制作中。所谓元素的浮动是指设置了浮 动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。在CSS中， 通过float属性来定义浮动，其基本语法格式如下： 选择器{float:属性值;} { left : 元素向左浮动 right : 元素向右浮动 none : 元素不浮动（默认值） } 2、清除浮动 （ 可以让盒子平行存在 ） 为了
根据滚动条移动的多层浮动效果，实现页面广告效果。
01-06
这里的"多层浮动效果"可能是指有多个这样的广告层，每个层的浮动行为可能略有不同，比如位置、速度或者触发显示的滚动距离等。 综上所述，通过HTML定义广告元素，CSS进行样式和布局的设定，再结合JavaScript来实现...
最通俗易懂的浮动（float）布局原理
weixin_44456333的博客
03-21 6128
最通俗易懂的浮动（float）布局原理（图文解释） 声明：本文部分原理总结借鉴该大神。原地址为：https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 写在前面的话： 1、对于很多刚接触Css的朋友来说对float浮动布局有时候处于一个很模糊的概念 对于很多刚接触Css的朋友来说对float浮动布局有时候处于一个很模糊的概念 ...
使用浮动布局
weixin_45730641的博客
02-13 763
效果图
jquery变焦放大效果.rar_jquery变焦放大效果
09-23
这种预览通常是一个浮动的层，可以跟随鼠标移动，让用户能够查看图片的局部细节。以下是一些可能的变焦效果： 1. **平滑放大**：图像在放大时保持平滑过渡，不会出现像素化的现象。 2. **圆形放大**：放大镜效果以...
jquery + CSS3实现的三维文字浮动效果银行卡特效源码.zip
最新发布
11-05
该资源是一个基于jQuery和CSS3技术的特效源码，用于创建一种三维文字浮动效果的银行卡样式。这个特效可能被应用于网站设计，特别是金融或者支付相关的网页，以增加用户体验和视觉吸引力。下面将详细介绍jQuery和CSS3...
delphi 实现多个浮动透明窗口
03-01
在 Delphi 开发环境中，创建多个浮动透明窗口是一项常见的需求，尤其在设计用户界面时，如模拟迅雷的浮动窗口效果。本篇文章将详细讲解如何使用 Delphi 实现这一功能。 首先，我们要理解 Delphi 中窗口的基本概念。...
DIV多层嵌套margin-top的BUG问题
09-25
通过使用浮动、内边距或者调整元素的布局方式，可以有效地解决多层嵌套`margin-top`带来的问题，确保在多种浏览器下得到一致的显示效果。同时，这也提醒我们在进行前端开发时，应始终考虑浏览器兼容性，以提供更好的...
樱花特效
lbs311709000127的博客
12-02 3295
下面是代码，如果感觉有帮助的话留个赞吧。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>樱花雨</title> <script > /*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Found...
vue（访问子组件的方法或属性，$children,$refs）
lbs311709000127的博客
12-03 3247
$children:访问子组件。访问子组件的方法：this.$children[0].ontap()； 访问子组件的属性：this.$children[0].name $refs：访问某个特定的子组件，refs指向的是对象，默认值为空{}，使用前必须在组件上面给ref赋值<cpn ref="aaa"></cpn>， 使用this.$refs.aaa.name 运...
vue（修饰符once，prevent，stop，监听键盘按键（keyup，keydown））
lbs311709000127的博客
11-23 2716
直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </hea...
vue（高级函数：filter，map，reduce）
lbs311709000127的博客
11-25 2558
filter filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意：filter() 不会对空数组进行检测。 注意：filter() 不会改变原始数组。 语法 array.filter(function(currentValue,index,arr), thisValue) 详细网址：https://www.runoob.com/j...
vue（v-if，lable）
lbs311709000127的博客
11-23 1887
<label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。 这个保证点击“切换类型”之后输...
vue（组件和模板templa分离的两种写法）
lbs311709000127的博客
12-01 1445
由于把html语言写在组件里面很不方便，也不太好看所以将它们分开写。 运行结果 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> &lt...
VUE（删除功能）
lbs311709000127的博客
10-31 996
点击提交可增加li，点击li可删除当前li <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script...
vue（插槽slot的使用）
lbs311709000127的博客
12-03 851
<template>里面的代码 <template id="cpn"> <div> <h2>插槽的使用</h2> <slot name="left">左侧</slot> <slot name="middle">中间</slot> <slot name="right...
VUE（v-text,v-html,v-on:click(@click)的使用）
lbs311709000127的博客
10-31 580
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值