css效果

news/2024/11/26 14:07:55/

css_0">css炫彩流光圆环效果

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 0;padding: 0;}body{width: 100%;height: 100vh;}.container{position: relative;width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #000;}.circle{display: flex;justify-content: center;align-items: center;position: absolute;width: 200px;height: 200px;border-radius: 50%;background-image: linear-gradient(0deg,rgb(47,102,255),rgb(153,64,255) 30%,rgb(238,55,255) 60%,rgb(255,0,76) 100%);animation: rotate 1s linear infinite;}.circle::before{content: "";position: absolute;width: 200px;height: 200px;border-radius: 50%;background-image: linear-gradient(0deg,rgb(47,102,255),rgb(153,64,255) 30%,rgb(238,55,255) 60%,rgb(255,0,76) 100%);filter: blur(35px);}.circle::after{content: "";position: absolute;width: 160px;height: 160px;border-radius: 50%;background: #000;}span{position: absolute;color: #fff;}@keyframes  rotate{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}</style></head><body><div class="container"><div class="circle"></div></div></body>
</html>

CSS视频播放3D立方体

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{background: #000;}.container{position: relative;width: 100%;height: 100vh;}.container .box{position: absolute;top: calc(50% - 200px );left: calc(50% - 200px );width: 400px;height: 400px;transform-style: preserve-3d;transform: rotateX(-20deg) rotateY(23deg) translate3d(0,0,-12px);}.container .box > div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform-style: preserve-3d;}.container .box > div span{position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;border: 1px solid rgba(0,0,0,1);background: #ccc;}.container .box > div span video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;filter: blur(0);}.container video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;filter: blur(20px);}.container .box > div span:nth-child(1){transform: rotateX(0deg) translate3d(0,0,200px);}.container .box > div span:nth-child(2){transform: rotateX(-90deg) translate3d(0,0,-200px);}.container .box > div span:nth-child(2) video{transform: rotateY(180deg);}.container .box > div span:nth-child(3){transform: rotateY(-90deg) translate3d(0,0,200px);}</style></head><body><div class="container"><span><video src="./video.mp4" autoplay="" muted="" loop=""></video></span><div class="box"><div><span><video src="./video.mp4" autoplay="" muted="" loop=""></video></span><span><video src="./video.mp4" autoplay="" muted="" loop=""></video></span><span><video src="./video.mp4" autoplay="" muted="" loop=""></video></span></div></div></div></body>
</html>

CSS水波纹效果

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>body{margin: 0;padding: 0;background: #3498db;}.container{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotateX(70deg);}.ripple{position: fixed;top: 0;transform: translateX(-50%);width: 20px;height: 20px;border-radius: 50%;animation: ripple 4s linear infinite;}.r2{animation-delay: 0.8s;}.r3{animation-delay: 1.6s;}.r4{animation-delay: 2.4s;}.r5{animation-delay: 3.2s;}.r6{animation-delay: 4s;}@keyframes ripple{from{border:4px solid #8e44ad;background: #9b59b670; }to{border: 0px solid #8E44AD;background: #9b59b670;width: 400px;height: 400px;top: 20px;opacity: 0;}}</style></head><body><div class="container"><span class="ripple r1"></span><span class="ripple r2"></span><span class="ripple r3"></span><span class="ripple r4"></span><span class="ripple r5"></span><span class="ripple r6"></span></div></body>
</html>

CSS面条加载效果

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;background: #2980b9;}.loading{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);height: 40px;display: flex;align-items: center;}.ogj{width: 6px;height: 40px;background: white;margin: 0 3px;border-radius: 10px;animation: loading 0.8s infinite;}.ogj:nth-child(2){animation-delay: 0.1s;}.ogj:nth-child(3){animation-delay: 0.2s;}.ogj:nth-child(4){animation-delay: 0.3s;}.ogj:nth-child(5){animation-delay: 0.4s;}.ogj:nth-child(6){animation-delay: 0.5s;}.ogj:nth-child(7){animation-delay: 0.6s;}.ogj:nth-child(8){animation-delay: 0.7s;}@keyframes loading{0%{heigth:0;}50%{height: 40px;}100%{height: 0;}}</style></head><body><div class="loading"><div class="ogj"></div><div class="ogj"></div><div class="ogj"></div><div class="ogj"></div><div class="ogj"></div><div class="ogj"></div><div class="ogj"></div><div class="ogj"></div></div></body>
</html>

用CSS写一本书

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 0;padding: 0;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: rgb(250,250,250);background-attachment: fixed;background-size: cover;}.book{position: relative;top: 0;width: 400px;height: 600px;background: #fff;transform: rotate(-37.5deg) skewX(10deg);box-shadow: -35px 35px 50px rgba(0,0,0,1);transition: 0.5s;}.book:hover{transform: rotate(-37.5deg) skewX(10deg) translate(20px, -20px);box-shadow: -50px 50px 100px rgba(0,0,0,1);}.book:before{content: '';width: 30px;height: 100%;background: url(https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1588900098&di=b41905c683262ede66a811bc539d8368&src=http://hbimg.b0.upaiyun.com/6fc64b52819c57b640f8d385c87f20ef740e728612a9e-hI3dqx_fw658);position: absolute;top: 0;left: 0;transform: skewY(-45deg) translate(-30px,-15px);box-shadow: inset -10px 0 20px rgba(0,0,0,0.2);}.book:after{content: '';width: 100%;height: 30px;background: #ccc;position: absolute;bottom: 0;left: 0;transform: skewX(-45deg) translate(15px,30px);}.book h2{position: absolute;bottom: 100px;left: 35px;font-size: 5em;line-height: 1em;color: #fff;}.book h2 span{background: url(https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1588900098&di=b41905c683262ede66a811bc539d8368&src=http://hbimg.b0.upaiyun.com/6fc64b52819c57b640f8d385c87f20ef740e728612a9e-hI3dqx_fw658);background-attachment: fixed;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.book .writer{position: absolute;bottom: 20px;right: 20px;color: #3262626;font-size: 0.6em;padding-top: 5px;font-weight: 500;border-top-left-radius: 1px soild #262626;}.book .writer i{font-weight: 700;}.book .cover{position: absolute;top: 0;left: 0;width: 100%;height: 70%;				background: url(https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1588900098&di=b41905c683262ede66a811bc539d8368&src=http://hbimg.b0.upaiyun.com/6fc64b52819c57b640f8d385c87f20ef740e728612a9e-hI3dqx_fw658);background-size: cover;}</style></head><body><div class="book"><div class="cover"></div><h2>Book</br><span>Mockup</span></h2><span class="writer">Designed By <i>Muhammad Irshad</i></span></div></body>
</html>

CSS彩条加载动画效果

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>body{margin: 0;padding: 0;background: #f1f1f1;}.loading{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(75deg);width: 15px;height: 15px;}.loading::before,.loading::after{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 15px;height: 15px;border-radius: 15px;animation: loading 1.5s infinite linear;}.loading::before{box-shadow: 15px 15px #e77f67, -15px -15px #778beb;}.loading::after{box-shadow: 15px 15px #f8a5c2, -15px -15px #f5cd79;transform: translate(-50%,-50%) rotate(90deg);}@keyframes loading{50%{height:45px;}}</style></head><body><div class="loading"></div></body>
</html>

CSS彩色动效加载条效果

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>body{margin: 0;padding: 0;background: #262626;}ul{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);margin: 0;padding: 0;display: flex;}ul li{list-style: none;width: 40px;height: 40px;background: #fff;border-radius: 50%;animation: animate 1.6s ease-in-out infinite;}@keyframes animate{0%, 40%, 100%{transform: scale(0.2);}20%{transform: scale(1);}}ul li:nth-child(1){animation-delay: -1.4s;background: #ffff00;box-shadow: 0 0 50px #FFFF00;}ul li:nth-child(2){animation-delay: -1.2s;background: #76ff03;box-shadow: 0 0 50px #76ff03;}ul li:nth-child(3){animation-delay: -1s;background: #f06292;box-shadow: 0 0 50px #f06292;}ul li:nth-child(4){animation-delay: -0.8s;background: #4fc3f7;box-shadow: 0 0 50px #4fc3f7;}ul li:nth-child(5){animation-delay: -0.6s;background: #ba68c8;box-shadow: 0 0 50px #ba68c8;}ul li:nth-child(6){animation-delay: -0.4s;background: #f57c00;box-shadow: 0 0 50px #f57c00;}ul li:nth-child(7){animation-delay: -0.2s;background: #673ab7;box-shadow: 0 0 50px #673ab7;}</style></head><body><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></body>
</html>

使用CSS3和Javascript单击时的按钮涟漪效果

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 0;padding: 0;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;flex-direction: column;background: #040d15;}a{position: relative;display: inline-block;padding: 12px 36px;margin: 10px 0;color: #fff;text-decoration: none;text-transform: uppercase;font-size: 18px;letter-spacing: 2px;border-radius: 40px;overflow: hidden;background: linear-gradient(90deg,#0162c8,#55e7fc);}	a:nth-child(2){background: linear-gradient(90deg,#755bea,#ff72c0);}span{position: absolute;background: #fff;transform: translate(-50%, -50%);pointer-events: none;border-radius: 50%;animation: animate 1s linear infinite;}@keyframes animate{0%{width: 0px;height: 0px;opacity: 0.5;}100%{width: 500px;height: 500px;opacity: 0;}}</style></head><body><a href="#">Button</a><a href="#">Button</a></body><script>const button = document.querySelectorAll('a');button.forEach(btn => {btn.addEventListener('click',function(e){let x = e.clientX - e.target.offsetLeft;let y = e.clientY - e.target.offsetTop;let ripples = document.createElement('span');ripples.style.left = x + 'px';ripples.style.top = y + 'px';this.appendChild(ripples);setTimeout(()=>{ripples.remove()},1000)})})</script>
</html>

使用Html和CSS动画效果悬停时发光的渐变按钮动画效果

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style>body{margin: 0;padding: 0;background: #000;}a{position: absolute;top: 50%;	left: 50%;transform: translate(-50%,-50%);width: 200px;height: 60px;text-align: center;line-height: 60px;color: #fff;font-size: 24px;text-transform: uppercase;text-decoration: none;font-family: sans-serif;box-sizing: border-box;background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);background-size: 400%;border-radius: 30px;}a:hover{animation:animate 8s linear infinite;}@keyframes animate{0%{background-position: 0%;}100%{background-position: 400%;}}a:before{content: '';position: absolute;top: -5px;left: -5px;right: -5px;bottom: -5px;z-index: -1;background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);background-size: 400%;border-radius: 40px;opacity: 0;transition: 0.5s;}a:hover:before{opacity: 1;filter: blur(20px);}</style><body><a href="#">Button</a></body>
</html>

CSS蛇边界创意按钮动画效果

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style>body{margin: 0;padding: 0;background: #0c002b;font-family: sans-serif;}a{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #1670f0;padding: 30px 60px;font-size: 30px;letter-spacing: 2px;text-transform: uppercase;text-decoration: none;box-shadow:  0 20px 50px rgba(0,0,0,.5);overflow: hidden;}a:before{content: '';position: absolute;top: 2px;left: 2px;bottom: 2px;width: 50%;background: rgba(255,255,255,0.05);}a span:nth-child(1){position: absolute;top: 0;left: 0;width: 100%;height: 2px;background: linear-gradient(to right, #0c002b, #1779ff);animation: animate1 2s linear infinite;}@keyframes animate1{0%{transform: translateX(-100%);}100%{transform: translateX(100%);}}a span:nth-child(2){position: absolute;top: 0;right: 0;width: 2px;height: 100%;background: linear-gradient(to bottom, #0c002b, #1779ff);animation: animate2 2s linear infinite;}@keyframes animate2{0%{transform: translateY(-100%);}100%{transform: translateY(100%);}}a span:nth-child(3){position: absolute;bottom: 0;right: 0;width: 100%;height: 2px;background: linear-gradient(to left, #0c002b, #1779ff);animation: animate3 2s linear infinite;}@keyframes animate3{0%{transform: translateX(100%);}100%{transform: translateX(-100%);}}a span:nth-child(4){position: absolute;top: 0;left: 0;width: 2px;height: 100%;background: linear-gradient(to top, #0c002b, #1779ff);animation: animate4 2s linear infinite;}@keyframes animate4{0%{transform: translateY(100%);}100%{transform: translateY(-100%);}}</style><body><a href="#"><span></span><span></span><span></span><span></span>button</a></body>
</html>

cssloading_849">css页面加载loading动画特效

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>加载中loading效果</title></head><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{width: 100%;height: 100vh;background: #222;display: flex;align-items: center;justify-content: center;}.container{display: flex;}.container .point{width: 2em;height: 2em;border-radius: 50%; background: #fff;margin: 1em;user-select: none;position: relative;}.container .point::before{position: absolute;content: '';width: 100%;height: 100%;background: inherit; border-radius: inherit; animation: wave 2.2s ease-out infinite;}@keyframes wave{50%,70% {transform: scale(2.5);}80%,100% {opacity: 0;}}.container .point:nth-child(1){background: #7ef9ff;}.container .point:nth-child(2){background: #89cff0;}.container .point:nth-child(3){background: #4682b4;}.container .point:nth-child(4){background: #0f52ba;}.container .point:nth-child(5){background: #000080;}.container .point:nth-child(1)::before{animation-delay: 0s ;}.container .point:nth-child(2)::before{animation-delay: 0.2s ;}.container .point:nth-child(3)::before{animation-delay: 0.4s ;}.container .point:nth-child(4)::before{animation-delay: 0.6s ;}.container .point:nth-child(5)::before{animation-delay: 0.8s ;}</style><body><div class="container"><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div><div class="point"></div></div></body>
</html>

http://www.ppmy.cn/news/1550076.html

相关文章

基于Angular+BootStrap+SpringBoot简单的购物网站

目录 一、项目结构图 二、目录结构解析 后端 (Spring Boot) 前端 (Angular) 三、技术栈 四、具体功能实现 五、数据库设计 六、后端实现 1. 设置Spring Boot项目 2. 数据库实体类 3. 创建Repository 4. 创建Service层 5. 创建Controller层 七、前端实现&#xff0…

sqlmap学习,打靶sqli-labs.(1-19)

前言&#xff1a;用于学习sqlmap的简单使用&#xff0c;使用sqli-labs靶场进行测试。 当然,在实战中,考虑的更多&#xff0c;例如如何隐藏自己(特征码),编码加解密、sqlmap抓包调试分析等... 不过那些都是后话&#xff0c;太遥远...基础NO.1&#xff01;&#xff01; 先贴上我…

【操作系统】第三章:内存管理

本篇笔记课程来源&#xff1a;王道计算机考研 操作系统 【操作系统】第三章&#xff1a;内存管理 一、内存管理的基本概念1. 基本概念2. 存储单元3. 内存地址4. 装入方式&#xff08;地址转换&#xff09;5. 链接方式 二、内存管理的作用1. 分配与回收2. 内存扩展3. 地址转换4.…

Mybatis PLUS查询对List使用OR模糊查询

Mybatis PLUS查询对List使用OR模糊查询 1、版本2、代码3、效果 1、版本 Mybatis PLUS版本&#xff1a;3.5.7 注意&#xff1a;版本3.1.2及以下是需要return的 因当前为高版本&#xff0c;代码中已将 return 注释。 2、代码 QueryWrapper<Object> queryWrapper new Que…

(免费送源码)计算机毕业设计原创定制:Java+JSP+HTML+JQUERY+AJAX+MySQL springboot计算机类专业考研学习网站管理系统

摘 要 大数据时代下&#xff0c;数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求&#xff0c;利用互联网服务于其他行业&#xff0c;促进生产&#xff0c;已经是成为一种势不可挡的趋势。在大学生在线计算机类专业考研学习网站管理的要求下&#xff0c;开发一…

02微服务系统与设计(D1_走出微服务误区:避免从单体到分布式单体)

目录 学习前言 一、回顾&#xff1a;从单体到微服务到 Function 二、分布式单体 分布式单体起因之一&#xff1a;通过共享库和网络客户端访问分布式能力 分布式单体起因之二&#xff1a;简单用远程调用替代进程内方法调用 分布式单体起因小结 三、引入非侵入式方案&#…

WorkPlusIM即时通讯平台:构建生态化的全方位办公解决方案

在数字化转型的浪潮中&#xff0c;企业的内部沟通与协作方式正在经历迅速而深刻的变革。传统的沟通工具频繁遭遇使用瓶颈&#xff0c;难以满足现代企业的动态需求。针对这一趋势&#xff0c;WorkPlusIM即时通讯平台应运而生&#xff0c;致力于为企业提供不仅限于即时通讯的全方…

进程间通信5:信号

引入 我们之前学习了信号量&#xff0c;信号量和信号可不是一个东西&#xff0c;不能混淆。 信号是什么以及一些基础概念 信号是一种让进程给其他进程发送异步消息的方式 信号是随时产生的&#xff0c;无法预测信号可以临时保存下来&#xff0c;之后再处理信号是异步发送的…