当前位置:首页 > 网站应用 > 正文内容

css3实现加载动画,边框跑马灯

cjw1231年前 (2023-11-01)网站应用2150
<style>
body{/*让body所有元素正居中*/
	display:flex;
	justify-content:center;/*水平居中*/
	align-items: center;/*垂直居中*/
	height:100vh;/*不加高,无法垂直居中*/
}
div{
	position:relative;
	width:200px;
	height:200px;
	box-shadow:16px 14px 20px red;
	display:flex;
	justify-content:center;/*水平居中*/
	align-items: center;/*垂直居中*/	
	overflow:hidden;
}
div::before{/*伪元素*/
content:'';/*特性1,需要激活*/
background:conic-gradient(#fa0667 20deg,transparent 120deg);/*锥形渐变*/
width:150%;/*放大再用over-flow隐藏*/
height:150%;
position:absolute;
animation:rotate 2s linear infinite;/*linear匀速*/
}
div::after{/*伪元素*/
content:'www.cjw123.com';/*特性1,需要激活*/
display:flex;
justify-content:center;/*水平居中*/
align-items: center;/*垂直居中*/	
color:white;
width:190px;
height:190px;
background:black;
position:absolute;
}
@keyframes rotate{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(-360deg);
	}
}
</style>
<div></div>
<p>所有的要将元素放在正居中,均要用这三行代码</p>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://cjw123.com/blog/?id=28

标签: html
分享给朋友:

相关文章

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

js实现批量生成18位身份证号码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title&g...

js实现弹出层居中显示背景变灰效果

<HTML> <HEAD> <META http-equiv=content-type content="application/xhtml+xml; charset=gb2312" /> <...

彩色流转文字代码

<style>#nr { font-size: 15px; margin:  0; background:  -webkit-linear-gradient(left,#ffffff,#ff0000 6.2...

神经变形跷板

<html> <head>     <meta charset="utf-8">     <title>神经变形跷板</tit...

网站设置点击任何地方弹出新页面广告只弹出一次

1、js实现第一次访问站时点击任何地方都先弹出一个广告页:<script> document.onmousedown = function(){     var isOpenedAd  =&nb...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。