css3中一些常用的动画效果

最新推荐文章于 2022-03-23 11:44:54 发布
最新推荐文章于 2022-03-23 11:44:54 发布
阅读量432 收藏 2
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/echokkk/article/details/78562851
版权

1.动画效果一：鼠标放上去，后面的背景图放大到一定程度，下面的有个内容盒子，以一定的速度从下向上运动，并且盒子的背景颜色逐渐加深。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.big {
			width: 420px;
			height: 372px;
			overflow: hidden;
			position: relative;
			border: 1px solid #000;
		}
		.bigone {
			position: absolute;
			top: 0;
			left: 0;
		}
		.bigone .pic {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.bigone .pic img {
			width: 100%;
			height: 100%;
			transition: all 0.5s;
		}
		.big:hover img {
			transform: scale(1.5);
		}
		.bigone .dl {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 109px;
			background: rgba(0,0,0,0.4);
		}
		.bigone .dl p {
			font-size: 30px;
			color: #fff;
			padding: 20px;
		}
		.bigtwo {
			width: 100%;
			height: 260px;
			position: absolute;
			bottom: -120px;
			left: 0;
			background: rgba(0,0,255,0);
			transition: all 0.5s;
		}
		.bigtwo p {
			font-size: 18px;
			color: rgba(255,255,255,0);
			padding: 10px;
		}
		.big:hover .bigtwo {
			transform: translateY(-120px);
			background: rgba(0,0,255,0.7);
		}
		.big:hover p {
			color: rgba(255,255,255,1);
		}
	</style>
</head>
<body>
	<div class="big">
		<div class="bigone">
			<div class="pic">
				<img src="1.jpg" alt="">
			</div>
			<div class="dl">
				<p>这是一段话</p>
			</div>
		</div>
		<div class="bigtwo">
			<p>这是遮罩层</p>
		</div>
	</div>
</body>
</html>

效果二：鼠标放到盒子上有一个类似于开门的效果，并且下面的背景颜色和字体的颜色会有一个渐变的过程。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.big {
			width: 500px;
			height: 400px;
			position: relative;
			overflow: hidden;
		}
		.big:after,.big:before {
			content: "";
			display: block;
			width: 50%;
			height: 100%;
			background: rgba(0,0,0,0.4);
			position: absolute;
			top: 0;
			transition: all 1s;
		}
		.big:after {
			left: 0;
		}
		.big:before {
			right: 0;
		}
		a {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -100px;
			margin-top: -100px;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background: rgba(0,0,0,0.7);
			color: #fff;
			text-decoration: none;
			transition: all 1s;
		}
		.small {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		span {
			font-size: 16px;
			color: #fff;
			transition: all 1s;
		}
		p {
			font-size: 12px;
			color: #fff;
			text-align: center;
			transition: all 1s;
		}
		.big:hover:after {
			left: -50%;
		}
		.big:hover:before {
			right: -50%;
		}
		.big:hover a {
			background: yellow;
		}
		.big:hover span,.big:hover p {
			color: red;
		}
	</style>
</head>
<body>
	<div class="big">
		<a href="#">
			<div class="small">
				<span>这是一个盒子</span>
				<p>摄影</p>
			</div>
		</a>
	</div>
</body>
</html>


背着吉他的蝙蝠女侠
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3如何实现动画？常用的动画方法总结
m0_56991207的博客
12-19 2467
在css中创建简单的过渡效果可以从以下几个步骤来实现 （1）在默认样式中声明元素的初始状态样式 （2）声明过渡元素最终状态样式，比如悬浮状态 （3）在默认样式中通过添加过渡函数，添加一些不同的样式 1. 变形 2D变形：旋转变形、缩放变形、斜切变形、位移变形 // 旋转变形，顺时针角度为正，逆时针角度为负 transform：rotate(45deg)； // 自定义变换原点： transform-origin:0 0; //以左上角为中心点旋转 transform-origin:0 100px; //以左
CSS3实现跳动的动画效果
12-02
在CSS3中，我们可以利用各种新的属性和方法来创建丰富的动画效果。本示例中，我们将探讨如何通过CSS3实现一个跳动的动画效果。这个效果由两部分组成：元素的阴影部分（`::before`伪元素）和元素本身（`::after`伪...
CSS3 动画效果总结
web开发自学
12-30 671
CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、transition以及animation。 transform rotate 设置元素顺时针旋转的角度，用法是： transform: rotate(x); 参数x必须是以deg结尾的角度数或0，可为负数表示反向。 ...
CSS3常用动画效果
laipengfei19的博客
06-27 1184
一些CSS3的动画效果 我把CSS3常用的动画共享出来，方便自己也方便大家 代码片. <!DOCTYPE html> <html lang="zh-cn"><head> <meta charset="utf-8"> <title>animation_CSS参考手册</title> <style> div{width...
css3常用动画+动画库
懒猫慧慧
03-09 514
一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现。 查看演示： https://daneden.github.io/animate.css/  github地址：
CSS3常用动画
刚刚好
07-21 826
CSS3常用动画
发现两个有趣的CSS3动画效果
09-25
在本文中，我们将深入探讨两个有趣的CSS3动画效果：CSS3绘制机器猫和纯CSS3动画。这两个效果展示了CSS3的强大潜力，不仅能够创建出视觉上吸引人的元素，还能够实现动态交互，使得网页设计更加生动有趣。 首先，让...
css3线条波浪动画效果
12-13
在这款名为“css3线条波浪动画效果”的项目中，开发者利用CSS3的动画（animation）特性，结合PNG图像，创建了一个生动且吸引人的波浪线条动画效果。以下是对这个项目的详细解析： 首先，CSS3的动画功能允许我们为...
CSS3火警提示图标动画特效
07-24
【CSS3火警提示图标动画特效】是一种利用CSS3的强大功能来实现的视觉效果，它通过CSS3的animation属性创建了一种生动的火警图标，伴随着声波振动的动画，以此来模拟火警报警器的工作状态，提升用户体验，增强警示...
纯CSS3创意气泡动画特效
07-24
气泡动画通常涉及到圆形元素的创建和动画效果的设定。在CSS3中，我们可以使用`border-radius`属性将方形元素变为圆形，配合`width`和`height`属性设定相同值，即可得到完美的圆形气泡。然后，通过`position`属性（如...
常用的5种纯css3鼠标滑过图片动画效果
09-08
常用的5种纯css3鼠标滑过图片动画效果
css3动画集合
04-27
html5 css3 动画 html5 css3 动画 html5 css3 动画 html5 css3 动画
CSS3动画效果源代码27个合集.zip
09-02
软件介绍: 一共27个各式各样的CSS3动画效果源代码，内容如下：纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧效果纯CSS3模拟跳动的音乐音符效果多种css3滚动下拉动画加载效果css3颗粒全屏动画效果懒人原生纯CSS3鼠标悬停抖动效果css3点击动画效果css3模拟雷达波向外散发动画效果纯css3实现鼠标移入div图片后按钮飞入动画效果一个简单好看的纯CSS3翻书效果纯css3网页左上角扇形状导航效果适合图片列表排列(文字说明较多)的CSS3动画效果28个纯css3 加载loading动画特效轻量级CSS3立体式3D旋转动画效果简单易用的纯CSS3图片墙效果css3高度灵活的模拟扑克牌切换图片效果又一款纯CSS3立体式3D鼠标悬停效果又一款简单漂亮的CSS3图片悬停遮罩效果多款炫酷鼠标悬停图文动画效果css3放大镜动画效果纯CSS3制作飞舞的火箭动画多个CSS3实现的动画效果不错的星级评分效果纯HTML5 CSS3实现一棵自己跳舞的树纯CSS3模拟摩天轮旋转动画效果
常用css3动画
weixin_49295874的博客
03-23 221
/* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} .a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-boun
常用的css3动画(不定时更新)
S筱潇S四维Smile
03-03 334
平时项目中常用的animate.css即可满足需求 方便我平时使用，写几个常用： /* 放大缩小 */ .scalebigbig { animation: scalebigbig 3s infinite ease; } @keyframes scalebigbig { 0% { transform: scale(1); -webkit-transform: scale(1); } 50% { transform: scale(1.2); -webkit-transfo
animate.css 一些常用的CSS3动画效果
FuDesign2008的专栏
12-15 1068
转载自 http://www.qianduan.net/animate-css.html 项目主页：http://daneden.me/animate/ 自定义下载样式：http://daneden.me/animate/build/ git地址：https://github.com/daneden/animate.css
收集常用的CSS3动画效果
吴纯玲的博客
01-25 1389
无限旋转（2D旋转） 无限旋转（3D旋转）：只需要将以下代码rotate属性改为rotateY .rotate { animation: rotate 4s linear infinite; -moz-animation: rotate 4s linear infinite; /* Firefox */ -webkit-animation: rotate 4s linear...
css3常用动画示例
ICY___的博客
12-06 695
css3作为css的最新标准，支持了很多的新特性和动画样式，下面，我将从示例来介绍css3动画的独到之处。 基础知识准备 transition：动画的名称类型  动画的执行时间  动画的延迟  动画的执行方式；//简单的动画 animation: 已定义动画的名字 执行时间  动画的延迟  动画的执行方式  循环方式;  //自定义动画 动画的执行方式 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值