css 动画使用以及特殊样式实现

最新推荐文章于 2024-05-11 17:08:08 发布

推开世界的门

最新推荐文章于 2024-05-11 17:08:08 发布

阅读量339

点赞数

分类专栏：公司项目相关 css 文章标签： css 动画 css3

本文链接：https://blog.csdn.net/qq_38845858/article/details/120998235

版权

公司项目相关同时被 2 个专栏收录

84 篇文章 3 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

css动画

css动画比较

transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。

遇到的动画demo

过度 (用于和animation做对比)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
}

div:hover
{
	width:300px;
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>

</body>
</html>

呼吸灯 (放大缩小scale)

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}

#breath {
padding:10px;
position: absolute;
border: 1px solid black;
background-color: yellow;
	animation: breath 1.5s infinite;
}
@keyframes breath {
	0%, 100%{
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}
</style>
</head>

<body>

<div id="div1">
  <div id="breath">HELLO</div>
</div>

</body>
</html>

抽奖特效（窗口摆动，然后缩放，下滑，出奖品）

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform-origin: top center;
animation: magic-wand-fly 2s forwards;
}
@keyframes magic-wand-fly {
	0%{
		transform: scaleY(1) rotate(0deg) translate(0, 0);
	}
	5% {
		transform: rotate(5deg);
	}
	8% {
		transform: rotate(-6deg);
	}
	12% {
		transform: rotate(3deg);
	}
	15% {
		transform: rotate(0deg);
	}
	35% {
		transform: scaleY(1) rotate(0deg) translate(0, 0);
	}
	44%,50% {
		transform: scaleY(0.8) translate(0, 0);
	}
	70%, 100% {
		transform: scaleY(1) translate(0, 13rem);
	}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>

</body>
</html>

上下摆动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:magic-wand-fu-float 1s infinite;
}

@keyframes magic-wand-fu-float {
	0%{
		transform: translate(0, 0);	
	}
	50%{
		transform: translate(0, -.5rem);
	}
	100% {
		transform: translate(0, 0);
	}
}
</style>
</head>
<body>

<p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p>

<div></div>

</body>
</html>

文字无限滚动滚动

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:110px;
height:30px;
border:thin solid black;
overflow: scroll;

}
div p {
animation: pop-scroll 10s linear infinite;
}
@keyframes pop-scroll {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-10rem);
	}
}
}
</style>
</head>
<body>

<div><p style="width:140px">
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</p></div>

<p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p>
<p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p>

</body>
</html>

特别说明，关于兼容性

如果使用 prefixfree 或者 sass、less等编译则不需要自己写前缀了。
如果没有使用，则需要手动加兼容性前缀

注意加前缀

animation: mymove 1s forwa 
rds
-webkit-animation: mymove 1s forwards

@-weblit-keyframes
@keyframes mymove
{

from
{left:0px;}
to 
{left:200px;}
    
}

特殊css样式

锯齿状实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	body {
	background: #eee
	}
	div{
	position: relative;
    width: 500px;
    height: 90px;
    background: #red;
	}
	div::after {
	content: " ";
    display: block;
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 100%;
    height: 36px;
    background: -webkit-linear-gradient(#FFF 0%, transparent 0%), -webkit-linear-gradient(
135deg, #F2E7DA 33.33%, transparent 33.33%) 0 0%, transparent -webkit-linear-gradient(
45deg, #F2E7DA 33.33%, #FFF 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
		}
</style>
</head>

<body>
	<div></div>

</body>
</html>

在这里插入图片描述

倒三角

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	body {
	background: #eee
	}
	div {
	width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top-color: red;
		}
</style>
</head>

<body>
	<div></div>

</body>
</html>

在这里插入图片描述

后续遇到问题继续更新…

推开世界的门

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
css 动画使用以及特殊样式实现

css动画css动画比较transition的优点在于简单易用，但是它有几个很大的局限。（1）transition需要事件触发，所以没法在网页加载时自动发生。（2）transition是一次性的，不能重复发生，除非一再触发。（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。CSS Animation就是为了解决这些问题而提出的。遇到的动画demo过度 (用于和anim
复制链接

扫一扫

专栏目录