<!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>
