过渡与变形的综合应用

最新推荐文章于 2021-05-07 19:21:24 发布
最新推荐文章于 2021-05-07 19:21:24 发布
阅读量137 收藏
点赞数
分类专栏： H5实验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44753550/article/details/105118963
版权

代码：

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="new_file.css"/>
	</head>
	<body>
		<figure>
			<figcaption>大海</figcaption>
			<div class="a1" >
				<img src="img/大海.png" height="200px" width="200px">
			</div>
		</figure>
		<figure>
			<figcaption>花田</figcaption>
			<div>
				<img class="a2" src="img/花田.png" height="200px" width="200px">
			</div>
		</figure>
		<figure>
			<figcaption>汽车</figcaption>
			<div class="a3">
				<img src="img/汽车.png" height="200px" width="200px">
			</div>
		</figure>
		<figure>
			<figcaption>邮轮</figcaption>
			<div>
				<img class="a4" src="img/邮轮.png" height="200px" width="200px">
			</div>
		</figure>
	</body>
</html>

CSS

	body{
			background-color:#222222;
		}
		figure{
			float: left;
			text-align: center;
			color:white;
		}
		div{
			margin-top: 20px;
			height: 200px;
			width: 200px;
			overflow: hidden;
			border: white solid 8px;
			border-radius: 10px;
			transition: all 0.5s ease;
		}
		.a1{
			transition: all 0.5s ease;
		}
		.a1:hover{
			border-radius: 150px;
		}
		.a2{
			display: block;
			transition: all 0.5s ease;
		}
		.a2:hover{
			height: 300px;
			width: 300px;
		}
		.a3{
			transition: all 0.5s ease;
		}
		.a3:hover{
			transform:rotate(20deg);
		}
		.a4{
			transition: all 1s ease;
			}
		.a4:hover{
			opacity: 0.5;
		}
		div:hover{
			box-shadow: 10px 10px 50px #aaaaaa;
		}

效果：

初始效果：
初始效果
圆角边框：
在这里插入图片描述
图片放大：
在这里插入图片描述
图片旋转：
在这里插入图片描述
亮度变暗：
在这里插入图片描述

解析：

在第一个效果中，就是改变了边框的border-raduis属性，而且设置了一个过渡效果。

.a1{
		transition: all 0.5s ease;
	}
.a1:hover{
		border-radius: 150px;
	}
爱～做梦的～猪
关注
专栏目录
实验报告—过渡与变形的综合应用
Dreammin的博客
03-23 781
实验目的： 理解transition属性、2D变形的使用；熟练运用transition、transform属性实现过渡及变形效果。 实验结果： 1、分析布局 首先最外层box来装内容。 其中每个pic盒子表示一个小组合，pic中包括文字word和边框b以及边框内的img。 代码如下： <body> <div class="Box"> <div class...
css过渡。变形与动画
qq_44698180的博客
06-23 258
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。语法规则：选择器{ transition:property duration timing-function delay}transition属性显示简单的动画效果 transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性 transition属性的常用子属性主要包括：property：规定应用过渡的CSS属性的名称 duration：定义过渡效果花费的时间 timing-fu
animation以及transition的综合运用
Wkq55555的博客
08-31 153
Css动画：animation： name:定义动画的名称，和后面的@keyframes一起使用(关键帧)，而关键帧里面可以设置from,to,百分比等等。 而且一般在外层设置动画的相关属性，如name,duration,iteration-count,timing-function,alternate-reverse.在外层设置相对定位，里层设置绝对定位。 一般来说会设置三层di...
CSS3过渡和变形综合应用——不同图片效果
Shmily_ox的博客
03-26 871
CSS3过渡和变形的综合应用 在前面的文章我们了解了CSS3的过渡属性和变形属性，今天利用这两个属性的来实现不同的图片效 果，一起来看看吧！ 要求： （1）当鼠标移上第一-张图像时，产生直角边框过渡为圆角边框的效果。 （2） 当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果。 （3） 当鼠标移上第三张图像时，产生图片旋转的过渡效果。 （4）当鼠标移上第四张图像时，产生图片透明度逐渐变暗的过渡效果...
HTML5：transition属性、transform属性实现过渡及变形效果
DollyCat的博客
09-12 2706
实现效果; 1.当鼠标移到第一幅图片上面产生了边框过渡为圆角边框的效果，阴影效果。 2.当鼠标移到第二幅图片上面产生了逐渐放大的过渡的效果，阴影效果。 3.当鼠标移到第三幅图片上面产生了旋转的过渡的效果，阴影效果。 4.当鼠标移到第四幅图片上面产生了透明度逐渐变暗的的过渡的效果，阴影效果。 主要使用标记transform、box-shadow和filter实现效果。 变圆 旋转 放大和阴影效果的图片没截图。直接看最终代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XH
【CSS】过渡、变形、动画
南栀的博客
05-07 1198
过渡、变形、动画
实验报告-过度与变形的综合应用
m0_46444569的博客
03-30 168
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>过渡与变形的综合应用</title> <style type="text/css"> body{ margin: 0; padding: 0; ba...
CSS3动画（过渡、2D变形、3D变形）
技术无止境，人生仍探索。
05-04 3250
1.过渡transition 1)说明： 作用在进行变化的元素上，有四个属性值：property(目标属性),duration(过渡时长), curve(运动曲线),delay(开始时间) 创建一个空div，为它设置样式： div{ width:100px; height:100px; background-color:lightblue; margin:200px a...
过度与变形的综合应用（实验报告）
spring0258的博客
04-16 144
过渡与变形的综合应用 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200416185002199.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0...
初学HTML——过渡与变形综合应用
lxl513513的博客
03-26 1116
一.基本要求 1.当鼠标移上第一张图像时，产生直角边框过渡为圆角边框 2.当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果 3.当鼠标移上第三张图像时，产生图片旋转的过渡效果 4.当鼠标移上第四张图像时，产生图片透明度逐渐变暗 5.当鼠标移上四张图像的任一图像时，都伴随着盒子阴影效果 二.代码部分 <!DOCTYPE html> <html> <head> ...
css 过渡效果与变形
qq_38830589的博客
08-28 185
CSS transitions提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。 CSS transition 可以决定哪些属性发生动画效果（明确地列出这些属性），何时开始（设置 delay），持续多久（设置 duration）以及如何动画（定义 timing function）。
变形实例
ztt0918的博客
05-13 216
html> html lang="en"> head> meta charset="UTF-8"> title>title> style> div{ border: 1px solid red; width: 158px; height: 183px; overf
CSS3过渡、变形和动画
dreamjl的专栏
07-30 3651
原文-——Responsive Web Design with HTML5 and CSS3 1.什么是CSS3过渡以及如何使用它 我们在给超链接设置样式时，一般都会设置一个悬停状态（hover）的效果，这种方法能明显地提醒用户他的鼠标指向的是一个超链接。虽然对越来越多的触摸屏设备没太大用处，但无论如何，这种方法对网站和用户之间的交互是非常简单实用的。 通常，使用CSS时悬停状态就是
AS SSD Benchmark
最新发布
11-11
硬盘测试工具
com.harmonyos4.exception.ScalabilityLimitationException.md
11-11
鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案
HTML5 SVG幻灯片平滑变形过渡特效实现
综上所述，HTML5 SVG预览图变形切换幻灯片特效涉及到的技术点包括HTML5、SVG、CSS3以及JavaScript，通过这些技术的综合应用，实现了幻灯片切换的平滑过渡动画，给用户带来更加丰富多彩的视觉体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值