CSS特效专栏
文章平均质量分 95
专门收集CSS特效的专栏。CSS特效就是视觉差。并非原创 只是用来然后方便自己使用专门设置的专栏
诗水人间
要想走的更远,就需要思考更深层次的问题。冷静、智慧、深沉是我所向往的
展开
-
酷炫的能量线条canvas特效
js// UTILconst PI = Math.PI, TWO_PI = Math.PI * 2;const Util = {};Util.timeStamp = function() { return window.performance.now();};Util.random = function(min, max) { return min + Math.random() * (max - min);};Util.map = function(a, b, c, d, .原创 2020-07-20 15:57:49 · 161802 阅读 · 0 评论 -
粒子网格特效
js 粒子特效原创 2020-07-20 15:39:03 · 136774 阅读 · 2 评论 -
CSS炫酷圆形导航菜单特效
cssbody { background-color: #262626}.demo { padding: 2em 0; transform: translate3d(0, 0, 0);}.navbar { width: 150px; height: 150px; line-height: 150px; border-radius: 50%; background: #fff; margin: 70px auto; p.原创 2020-07-20 15:26:09 · 125447 阅读 · 0 评论 -
css3 3D立方体流星动画特效
css代码*{ padding:0; margin: 0;}html{ background:linear-gradient(#032861 0%,#000000 80%); height: 100%; width: 100%; overflow: hidden;}/*满天星*/.wall{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: h.原创 2020-07-20 14:45:50 · 120993 阅读 · 1 评论 -
科技线条空间3D特效
css代码body { margin: 0; overflow: hidden; background-color: hsl(0, 0%, 8%); // background-color: rgb(20, 20, 20);}.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;}html代码<script> window.canvasOptions =原创 2020-07-20 14:35:04 · 120728 阅读 · 0 评论 -
酷炫3D液体网状波浪动画特效
css代码html, body { margin: 0;}canvas { display: block;}js<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r118/three.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js".原创 2020-07-20 14:29:26 · 130786 阅读 · 0 评论 -
烟花爆炸特效
css代码请直接下载 urlhtml<div class="camera -x"> <div class="camera -y"> <div class="camera -z"> <div class="fireworks"> <div class="line"> <div class="spark"> <div class="fire"&g.原创 2020-07-20 14:02:01 · 142909 阅读 · 0 评论 -
全屏的微粒子3D动画特效
cssbody { margin: 0; overflow: hidden;}#canvas { background:radial-gradient(circle farthest-corner at center top, #071021, #19324a);}需要引入:three.min.js另外js代码window.addEventListener("load", init);function init() { let rot = 0; // .原创 2020-07-20 13:51:42 · 134506 阅读 · 3 评论 -
河面上的月亮倒影动画特效
css代码* { margin: 0; padding: 0;}canvas#canvas { display: block; background: #360033; background: -webkit-linear-gradient(to bottom, #0b8793, #360033); background: linear-gradient(to bottom, #0b8793, #360033); }js代码(function () { 'use.原创 2020-07-20 13:44:37 · 120245 阅读 · 0 评论 -
3D倾斜图片列表布局特效
css代码.images-leaning { box-sizing: border-box; width: 100%; min-width: 800px; margin: 10em auto 0; min-height: 330px; position: relative; background-repeat: no-repeat; background-image: linear-gradient(352deg, transparent 45.2%, #bbb 45.5.原创 2020-07-20 13:30:20 · 116609 阅读 · 0 评论 -
点赞喜欢爱心气泡特效
CSS样式body { background-color: rgba(255, 137, 164, 0.2); background-size: cover; background-repeat: no-repeat;}.liker { position: absolute; top: 0%; left: 50%; transform: translate(-50%, 0%);}.liker span { position: absolute; font-f.原创 2020-07-20 13:23:12 · 141121 阅读 · 0 评论 -
CSS动画,风车案例
风车案例案例:关键代码:transform: rotate(120deg); 旋转120度。transition:2s; 旋转120度花2秒完成。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padd原创 2020-06-20 01:22:55 · 163822 阅读 · 0 评论 -
CSS聚光灯特效
<h1 data-spotlight="CodingStartup!">CodingStartup</h1>html { font-size: 15px;}body { background-color: #222; display: flex; justify-content: center; align-items: center; min-height: 100vh;}h1 { color: #333; font-family:转载 2020-06-24 22:59:54 · 141141 阅读 · 0 评论 -
iPhone SE 产品网页之 A13 晶片动画特效
html部分<section id="chip-section"> <video src="https://www.apple.com/105/media/us/iphone-se/2020/90024c0f-285a-4bf5-af04-2c38de97b06e/anim/arcade-loop/large.mp4" muted playsinline autoplay loop></video> <h1> iPhone 11 Pro ca转载 2020-06-25 01:00:12 · 132926 阅读 · 0 评论 -
CSS翻牌效果
html代码<div class="card-container"> <div class="cover"> COVER </div> <div class="back"> BACK </div></div><div class="card-container"> <div class="cover"> COVER </div> <di转载 2020-06-25 00:54:34 · 156344 阅读 · 0 评论 -
vuejs实现倒计时特效
<div id="app" @click="animate"> <div id="countdown"> <svg :width="size" :height="size"> <circle fill="transparent" :stroke-width="stroke" stroke="#270B58"转载 2020-06-25 01:20:44 · 120061 阅读 · 0 评论