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

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

cjw1231年前 (2023-11-01)网站应用2130
<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实现第一次访问站时点击任何地方都先弹出一个广告页

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t...

zblogphp二级目录建站,伪静态规则怎么写

如果你的 Z-BlogPHP 站点安装在二级目录中,需要使用伪静态技术来优化站点的 URL,并提升搜索引擎蜘蛛的抓取效率。下面是一个 nginx 的伪静态规则示例:# 子目录规则要排在前边; location /sub/ {    &n...

文字特效代码:超酷文字快速展示

<!--要完成此效果需要三个步骤 第一步:把如下代码加入到<head>区域中--> <style> .let{ color:white; font-family:Verdana; font-weight:bold; width:500; filte...

发表评论

访客

看不清,换一张

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