AIAXC资源网是全网免费网络资源分享平台

  • 首页
  • HTML
  • CSS3线性渐变-html代码教学素材

CSS3线性渐变-html代码教学素材

AIAXC 2018-12-1 13:43 HTML

效果图:

GIF.gif


<div class="box">
</div>
<div class="inner">
</div>

<style>
 .box {
	width:300px;
	height:300px;
	margin:50px auto;
	background-image:linear-gradient(
                    /*45deg,*/
                    yellow,yellow 35%,red  35%,red 65%,blue 65%,blue 100%
                )
}
.inner {
	width:1000px;
	height:100px;
	margin:50px auto;
	background-image:linear-gradient(
                135deg,blue 0%,blue 25%,red  25%,red 50%,blue 50%,blue 75%,red 75%,red 100%
            );
	background-size:60px 60px;
	animation:run 1s linear infinite;
}
@keyframes run {
	0% {
	}100% {
	background-position:120px 0;
}
}
</style>

可以直接调用到你网站需要的地方

AIAXC资源网-版权声明

1  除非特别注明,文章均为【AIAXC在线网】转载时请注明来源

百度已收录[点击提交]

2  本文标题:【CSS3线性渐变-html代码教学素材】
3  本文衔接:https://www.aiaxc.cn/post-1840.html  
温馨提示评论广告骗子居多,切勿私下进行交易,近期多人被骗拉黑!

发表评论:

尊敬的用户您好,请登录帐号后再来发布评论吧!