css中的动画，渐变和clip属性方法

最新推荐文章于 2024-08-02 18:32:53 发布

Gypsophila 、

最新推荐文章于 2024-08-02 18:32:53 发布

阅读量168

点赞数

文章标签： css

本文链接：https://blog.csdn.net/O_326326/article/details/108723358

版权

1.动画
	@keyframes:规定动画
	简写属性：animation：player 10s ease  0s  normal  running
	案例：
<!DOCTYPE HTML>
<html>
	<head>
		<title>动画</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			@keyframes player{
				0%{background-image:url(./img/3.jpg);}
				25%{background-image:url(./img/4.jpg);}
				50%{background-image:url(./img/5.jpg);}
				100%{background-image:url(./img/6.jpg);}
			}
			div.c1{
				width:400px;
				height:300px;
				border:1px solid red;
				background-image:url(./img/2.jpg);
				background-size:100% 100%;
				background-repeat:no-repeat;
				animation:player 10s ease 0s 1 normal running;
			}
		</style>
	</head>
	<body>
		<h1>动画</h1>
		<div class="c1"></div>
	</body>
</html>6
2.线性渐变：
	向下/向上/向右/向左/对角方向
	语法：background：linear-grodient(direction：,color-top/~)；
	径向渐变：由它们的中心定义；
	语法：background：radial-gradient（center，shape，size，start-color···）；
3.clip：
	eg:  img{
			position:absolute;
			clip:rect(100px,60px,200px,70px);
		}
	white-space:nowrop;  强制在一行显示
	text-overflow：ellipse； 超出部分省略号显示，超出内容省略号显示
	overf：hidden；超出部分隐藏
	案例：
<!DOCTYPE HTML>
<html>
	<head>
		<title>clip</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			img{
				position:absolute;
				clip:rect(100px,60px,200px,70px);
			}
		</style>
	</head>
	<body>
		<h1>clip</h1>
		<img src="./img/1.jpg"/>
	</body>
</html>

Gypsophila 、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的动画，渐变和clip属性方法

1.动画 @keyframes:规定动画简写属性：animation：player 10s ease 0s normal running 案例：<!DOCTYPE HTML><html> <head> <title>动画</title> <meta charset="utf-8"/> <style type="text/css"> @keyframes player{ 0%{ba
复制链接

扫一扫