实验：过渡与变形

最新推荐文章于 2020-04-14 22:03:36 发布
最新推荐文章于 2020-04-14 22:03:36 发布
阅读量187 收藏 3
点赞数
分类专栏： H5+CSS3 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fantasy_geek/article/details/105047555
版权

效果图：在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡与变形的综合应用</title>
	<style type="text/css">
		body{
			background-color: black;
		}
		.boxone,.boxtwo,.boxthree,.boxfour{
			width: 200px;
			height: 250px;
			text-align: center;
			color: white;
			float: left;
			margin: 50px 10px;
		}
		.boxone div,.boxtwo div,.boxthree div,.boxfour div{
			width: 150px;
			height: 150px;
			border: 7px solid white;
			overflow: hidden;
			margin: 20px auto;
			border-radius: 10px;
			transition: all 1s linear;
		}
		.boxone div{
			background-image: url(img/one.jpg);
		}
		.boxtwo div{
			background-image: url(img/two.jpg);
			background-size: 100% 120%;   /*先使背景图片完全覆盖盒子，设置初始大小*/
			background-repeat: no-repeat;
		}
		.boxthree div{
			background-image: url(img/three.jpg);
		}
		.boxfour div{
			background-image: url(img/four.jpg);
		}
		.boxone div:hover{
			border-radius:50%;
			box-shadow: 0 0 10px white;
		}
		.boxtwo div:hover{
			background-size: 200% 240%;/*放大2倍*/
			box-shadow: 0 0 10px white;
		}
		.boxthree div:hover{
			transform: rotate(360deg);
			box-shadow: 0 0 10px white;

		}
		.boxfour div:hover{
			filter:grayscale(1); /*滤镜属性*/
			box-shadow: 0 0 10px white;
		}
	</style>
</head>
<body>
	<div class="boxone">
		<span>SHAPE</span>
		<div></div>
	</div>
	<div class="boxtwo">
		<span>DISPLACEMENT</span>
		<div></div>
	</div>
	<div class="boxthree">
		<span>POSITION</span>
		<div></div>
	</div>
	<div class="boxfour">
		<span>COLOR</span>
		<div></div>
	</div>
</body>
</html>
任由天高
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实验报告-过度与变形的综合应用
m0_46444569的博客
03-30 152
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>过渡与变形的综合应用</title> <style type="text/css"> body{ margin: 0; padding: 0; ba...
morpher:在画布上变形图像
04-30
此外，项目可能还用到了时间序列动画，通过不断更新图像的变形状态，创建出平滑的过渡效果。 "binary_animal"可能是一个示例或者测试用的图像文件，用于演示"morpher"的功能。这个文件可能是一个二进制格式的图像，...
css动画、变形、过渡
Elaine20132014的博客
10-14 211
1.animation动画 定义和用法 animation 属性是一个简写属性，用于设置六个动画属性： animation-name 规定需要绑定到选择器的 keyframe 名称 animation-duration 规定完成动画所花费的时间，以秒或毫秒计 animation-timing-function 规定动画的速度曲线 animation-delay 规定在动画开始之前的延迟...
Css实现上下无限跳动动画
明知山
08-23 5368
来一张效果图 图中的三角形会一直上下跳动 .arrow { position: absolute; bottom: 15%; left: 50%; transform: translate(-50%, -50%); text-align: center; ...
过渡与变形的综合应用
whyshuaige的博客
03-26 199
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ background-color: black;//将背景的颜色设为黑色 } //使图片在一排 .bos...
face-morphing:实验研究
03-21
在“face-morphing:实验研究”这一主题中，我们主要关注的是人脸变形技术，这是一种在数字图像处理和计算机视觉领域广泛应用的技术。该技术通过融合两个人的面部特征，创建一个过渡效果，使得一个人的脸逐渐转变成另...
多媒体技术实验3：-动画制作.doc
10-12
实验的核心内容涉及到计算机动画的基本原理和制作流程，主要知识点包括过渡动画、交互性创建和声音处理。以下是这些知识点的详细解释： 1. **过渡动画**： - 过渡动画是动画制作的基础，通过设置关键帧来控制动画...
create-morphing-reveal-effect:创建变形显示效果
05-30
通过这个项目，你不仅能学习到变形显示效果的实现，还能加深对JavaScript与CSS3协同工作的理解。不断探索和实验，你会发现更多创新的可能性，为你的网页设计注入新的活力。记得享受编程的过程，祝你在编码旅程中玩得...
CssAnimationLaboratory:我的css3动画实验室
06-12
通过修改这些关键帧，我们可以实现复杂的运动路径、变形效果和颜色变换等。 在"CssAnimationLaboratory"中，可能包含了一系列示例，这些示例展示了如何利用`animation-name`、`animation-duration`、`animation-...
《响应式web设计》读书笔记（五）CSS3过渡、变形和动画
aigenglong0649的博客
06-10 163
平时在浏览网页的时候经常会看到诸如“CSS 3D效果”、“css3动画”之类的字眼，看过效果后觉得很神奇，但也一直没机会研究一下原理。因为真正项目中还没用到这些东西。但这些新的技术在不久的将来必定是要大放异彩的，这是标准的一部分呀，一定有步入正轨的那一天。趁着阅读《响应式web设计》这本书，来把这部分知识学习一下。 Javascript动画VS CSS动画 ...
GET和POST协议详解
fantasy_geek的博客
04-02 3416
一、GET请求报文分析： 技术分享图片 1、 请求行： a) GET（描述该请求采用了什么请求方法），HTTP协议中包含8种请求方法： GET 请求获取Request-URI 所标识的资源 POST 在Request-URI 所标识的资源后附加新的数据 HEAD 请求获取由Request-URI 所标识的资源的响应消息报头 PUT 请求服务器存储一个资源，并用Requ...
常用的CSS3选择器
fantasy_geek的博客
03-05 3219
常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。 伪选择器比较特殊，分为伪元素和伪类元素两种。 一、属性选择器 1.E[att^=value]属性选择器 E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配...
HTML5中常用的文本标签
fantasy_geek的博客
03-14 2916
HTML5中常用的文本标签 详解： 一、<wbr>标签 <wbr> 标签的定义 <wbr>标签的定义<wbr>标签是英文单词“Word Break Opportunity”的缩写，表示单词换行时机； <wbr>标签属于单标签，也叫空标签，只书写成<wbr>或<wbr/>皆可，但后者较为规范； <wbr&gt...
CSS3的filter(滤镜)属性详解
fantasy_geek的博客
03-20 1989
1、blur模糊 blur的效果顾名思义就是模糊，单位是px，例如：filter:blur(10px)效果如下，左为原图，右为使用blur的效果图，我非常怀疑今年朋友圈的红包照片微信团队就是这么干的： blur(10px) 当blur(100px)时可以看到图片几乎看不到了 blur(100px) 这个值必须为正值，为负值时没有任何效果，如blur(-100px)： blur(-100px) 2、...
表单H5新增属性和常用标签
fantasy_geek的博客
03-28 870
表单是网页上用来收集用户信息的区域，由文本域、复选框、单选框、菜单、文件址域、按钮等表单元素组成。 <form>标签用于创建一个表单，其基本语法如下所示： <form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form> 在上面的语法中，name属性用来区分一个网页中的多个表单；action属性用于...
图文展示网页设计
fantasy_geek的博客
03-20 805
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 圆角边框</title> <style> body { padding: 0; background-color: #F7F7F7; } ...
实验一 响应式网站
fantasy_geek的博客
04-14 749
<!DOCTYPE html> <html lang="en"> <head> <title>响应式绿色环保</title> <!-- 自定义主题文件 --> <meta name="viewport" content="width=device-width, initial-scale=1"&g...
CSS字体样式属性
fantasy_geek的博客
03-24 690
CSS的字体样式属性用于定义文本的字体系列、大小、风格等，CSS常用的字体样式属性如下表所示。 CSS对字体综合设置样式，语法如下： CSS3@font-face规则 -@font-face是CSS3的新特征，用于定义服务器字体。通过@font-face规则，开发者便可以使用户计算机未安装的字体。 -@font-face规则的语法格式如下所示。 yourWebFontName：自定义的字体名称...
数字电路实验电子版.doc
06-17
数字电路实验电子版.doc

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值