CSS3渐变、变形、过渡和动画

最新推荐文章于 2023-07-22 18:44:43 发布

CopperDong

最新推荐文章于 2023-07-22 18:44:43 发布

阅读量1.5k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/QFire/article/details/83242810

版权

前端专栏收录该内容

71 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8"/>
	<title>shi</title>
	<style type="text/css" media="screen">
		div {
			width: 400px;
			height: 150px;
			border: 1px solid #666;
			line-height: 150px;
			text-align: center;
			font-weight: 900;
			font-size: 30px;
			color: #fff;
			margin: 10px auto;
		}
		.toTop {
			background-image:linear-gradient(to top, orange, green);	
		}
		.toTop-deg {
			background-image:linear-gradient(0deg, orange, green);	
		}
		.toTop-deg2 {
			background-image:linear-gradient(360deg, orange, green);	
		}
		.toTop-deg3 {
			background-image:linear-gradient(-360deg, orange, green);	
		}
	</style>
</head>
<body>
	<div class="toTop">使用关键词：top</div>
	<div class="toTop-deg">使用角度：0 deg</div>
	<div class="toTop-deg2">使用角度：360deg</div>
	<div class="toTop-deg3">使用角度：-360deg</div>
</body>
</html>

变形

结合CSS3的transition和动画的keyframe产生一些动画效果

CSS3变形中具有X/Y可用的函数：translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()

CSS3 2D变形函数包括：translate()、scale()、rolate()和skew()。

CSS3 3D变形函数包括：rotateX()、rotateY()、rotate3D()、translateZ()、translate3d()、scaleZ()和scale3d()。

transform属性指一组转换函数，transform-orgin属性制定元素的中心点在哪，新增加了第三个数transform-orign-z，控制元素三维空间中心点。transform-style的值设置为preserve-3d，建立一个3D渲染环境。

过渡

如鼠标悬浮时，颜色在一定的时间内，从一个颜色过渡到另一个颜色，给用户更好、更细腻的体验。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8"/>
	<title>shi</title>
	<style type="text/css" media="screen">
		.transition {
			background: #8ec63f;
			width: 100px;
			height: 100px;
			border-radius: .5em;
			transition-property: background height, width;
			transition-duration: 1s,1s,1s;
			transition-timing-function: linear,linear,linear;
			transition-delay: 1s,0s,1s;
		}
		.transition:hover {
			background: #f7941d;
			width: 300px;
			height: 50px;
		}
	</style>
</head>
<body>
	<div class="transition"></div>
</body>
</html>

动画

CSS3的animation属性通过关键帧控制动画的每一步，实现更为复杂的动画效果。通过改变元素的属性值来实现动画效果的。

关键帧@keyframes具有自己的语法规则。

CopperDong

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS3渐变、变形、过渡和动画

&lt;!DOCTYPE HTML&gt;&lt;html lang="en-US"&gt;&lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;title&gt;shi&lt;/title&gt; &lt;style type="text/css" media="screen&quo
复制链接

扫一扫

专栏目录