animation\Gradiens

最新推荐文章于 2024-05-08 07:28:03 发布

wanghl1978

最新推荐文章于 2024-05-08 07:28:03 发布

阅读量71

点赞数

分类专栏： Html+Css+Js 文章标签： html 前端

本文链接：https://blog.csdn.net/nininna/article/details/126789906

版权

Html+Css+Js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、animation

2、Gradiens

放一下Css一些属性的简单例子~

1、animation

实现效果：

代码实现：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animation</title>
	<style type="text/css">
	<!--
		.demo{
    width: 300px;
    height:300px;
	position: relative;
    background-color: pink;
    animation-name: test;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-play-state: running;
    animation-fill-mode: none;
}
		.test-t{
			width: 300px;
            height:300px;
	        position: relative;
			margin: auto;
			background: url("h5.jpeg") no-repeat;
			border-radius: 150px;
			animation: run 6s linear 0s infinite;
		}
/* 关于keyframes关键帧的内容稍后介绍     */
@keyframes test{
    0%{background-color: lightblue;}
    30%{background-color: lightgreen;}
    60%{background-color: lightgray;}
    100%{background-color: black;}
}
		@keyframes run{
			from{transform: rotate(0deg);}
			to{transform: rotate(360deg);}
		}

		-->
		</style>
</head>

<body>
	<div class="demo">
	</div>
	<div class="test-t"></div>
</body>
</html>

2、Gradiens

实现效果：

代码实现：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
	
		.div1{width: 300px;height: 300px; background-image: linear-gradient(#e66465, #9198e5);}
		.div2{width: 300px;height: 300px; background-image: linear-gradient(to right, red , yellow);}
		.div5{width: 300px;height: 300px; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))}
		.div3{width: 300px;height: 300px;background-image: linear-gradient(to bottom right, #e66465, #9198e5);}
		.div4{width: 300px;height: 300px;background-image: linear-gradient(-90deg, white, yellow)}
	
	</style>

</head>

<body>
	<div class="div1">从上到下的线性渐变</div>
	<br>
	<div class="div2">从左到右的线性渐变</div>
	<br>
	<div class="div3">从左上角开始（到右下角）的线性渐变</div>
	<br>
	<div class="div4">带有指定的角度的线性渐变</div>
	<br>
	<div class="div5">从左到右的线性渐变，带有透明度</div>
</body>
</html>