![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
我有奇妙动画
神奇大叔
这个作者很懒,什么都没留下…
展开
-
svg 动态描边时间戳
思路:动态设置时间边框运动:文字不设置填充度,设置边框,将边框设置为虚线,动画中设置移动虚线实现多色:因为一个文字只能设置一种颜色,所以设置多个相同文字,每一个文字设置不同颜色,通过延迟各个动画开始的时间(相当于错位开始运动),达到边框多色显示stroke-dashoffset: xx; 完成边框运动;animation-delay:ns; 完成多个动画错位开始运动代码示例:css:*{ padding: 0; margin: 0;}html{ height: 100%;}原创 2020-05-13 16:36:03 · 417 阅读 · 1 评论 -
弹性运动公式
function startMove(dom对象,r1(初始位置/距离/大小),r2/(结束位置/距离/大小)) { var nowr=r1; var overr=r2; obj.speed=0; clearInterval(obj.timer); obj.timer=setInter...原创 2020-03-22 15:29:16 · 731 阅读 · 0 评论 -
图片爆炸特效
思路:将图片设置成背景,然后分割成若干片,根据背景图的位移,来设置每一片的背景,使得最终能拼接成该图片,分割后设置动态随机位移、旋转和透明度,并转换成3d视图。代码示例:html<html> <head> <meta charset="utf-8"> <title></title> <style> ...原创 2020-04-03 10:51:10 · 397 阅读 · 0 评论 -
环形变色进度条
思路:svg两个圆,一个为进度条底色,一个为进度条,使圆环内部填充颜色不可见,设置外部边框线为stroke-dasharray=‘0,xxx’和线宽; 即外边框虚线,且初始时,实线为0,虚线比实线大即可->传入百分比进度即二位整数,动态增加实线的长度,虚线长度一定要比圆环长度长,否则会出现多段实线->在改变实现长度的过程中,通过rgb的方式,将颜色的竖直和百分比绑定,字体颜色类似...原创 2020-03-23 17:50:13 · 332 阅读 · 0 评论 -
用java画的动态时钟
package shiyan2;import java.applet.Applet;import java.awt.Graphics;import java.util.Date;import java.util.Timer;import java.util.TimerTask;public class Clock extends Applet{ public void init(...原创 2020-03-29 11:48:28 · 1083 阅读 · 0 评论 -
五彩斑斓黑加动感光晕特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<...原创 2020-03-23 16:16:19 · 332 阅读 · 0 评论 -
css 光影掠过文字显现动画
思路: 整体背景为黑色,文字所在背景使用渐变色设置为黑白渐变,使用背景剪裁到文字上,然后控制背景size,移动背景位置,即可实现当背景为白色时,显现文字效果图:代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m原创 2022-03-01 14:20:52 · 600 阅读 · 0 评论 -
css 锥形渐变实现仪表盘
仪表盘的形状实现:都是圆,未渐变染色的区域都是白色,和背景白色相同,产生形状效果图:代码示例://背景白色body { background: #fff;}/* 最外围边框 */.bg { position: relative; margin: 50px auto; width: 400px; height: 400px; border-radius: 50%; background: conic-gradient(原创 2021-12-08 16:52:17 · 1394 阅读 · 1 评论 -
css 锥形渐变实现环形进度条
环形进度条:一个圆覆盖在设置了锥形渐变的圆上,然后将锥形进度条进行旋转或者更高锥形进度区域实现效果图:代码示例://轨道内的区域,meaningless.g-container { position: relative; width: 200px; height: 200px; margin: auto; border-radius: 50%; box-sizing: border-box; border: 6px solid #444;原创 2021-12-08 16:03:37 · 451 阅读 · 0 评论 -
css 锥形渐变实现三角探照灯效果
锥形渐变实现探照灯,通过元素覆盖在上面并设置透明度,实现取出探照灯的效果效果图:原理:代码示例:.conic { position: relative; z-index: 0; width: 400px; height: 300px; margin: 20px; border-radius: 10px; //隐藏探照灯其他区域 overflow: hidden; padding: 2rem; }//探照灯的原创 2021-12-08 15:47:32 · 383 阅读 · 0 评论 -
css 叠加实现多角星
五角星:三个三角形,根据不同位置和角度叠加生成六角星:两个三角形,相反方向叠加生成八角星:两个矩形,旋转叠加生成十二角星:三个矩形,旋转叠加生成代码示例:.star { margin: 50px 0; position: relative; width: 0; border-right: 100px solid transparent; border-bottom: 70px solid yellowgreen; border-left: 10原创 2021-11-30 16:05:13 · 330 阅读 · 0 评论 -
css 光影掠过文字效果
光影:通过渐变背景图产生文字上有光影:background-clip:text;属性效果图:文字上白色的光影是会移动的代码示例:html, body { width: 100%; height: 100%; background-image: radial-gradient(ellipse farthest-side at 40% 0%, #455A64 0%, #263238 60%, #1a2327 100%); display: flex;}p {原创 2021-11-29 17:28:33 · 888 阅读 · 0 评论 -
css径向渐变生成立体3D球
核心:设置多个颜色较近的颜色效果图:代码示例:div{ width:150px; height:150px; border-radius:50%; background:radial-gradient(circle at 35% 25%, #fff 0,#ccc 20%,#999 40%,#000 90%,#666 95%,#999 100%);}原创 2021-11-29 15:12:35 · 1043 阅读 · 0 评论 -
css渐变实现矩形均分八色
核心:每个渐变背景留出空白区域,给后面的渐变背景绘制效果图:代码示例:div{ width: 200px; height: 200px; background: linear-gradient(45deg,#f00 50%, transparent 50%) 0 0/50% 50%, /* 往右一半橙,一半透明 */ linear-gradient(90deg,#f90 50%, transparent 50%) 0 0/10原创 2021-11-29 14:51:10 · 531 阅读 · 0 评论 -
css剪切平面图片拼接成3D图片,以及控制视角进入图片内部达成VR效果
剪切图片: 例如:将平面图片变成正方体,则正方体前后左右四个面各自为图片的一部分 假设图片大小为:400*400; (1)设置3D环境 transform-style: preserve-3d; perspective(900px); 作用于元素的后代,而不是其元素本身 或transform:perspective(900px); 只对自身,每个子元素的透视点都相同 (2)获取每份剪切大小:图片宽度/份数 四个div宽度为100,分别作为图片的一部分 (3)进行剪切原创 2021-11-26 17:25:38 · 935 阅读 · 0 评论 -
css 背景水波纹、堆叠铺开效果
波纹: 多个div堆叠,使用同一张背景图片,通过动画延迟,逐个收缩展开,产生波浪的每个圈 通过展开后依次振幅减小,来模拟真实振幅,振幅通过设置背景图高宽大小,设置依次背景图的高宽差距减少即可透明波纹: 设置background-attachment:fixed; 个人理解:因为fixed背景图固定,所以只是伸缩的区别,否则就是背景会虽然内容变化,造成轮廓明显 不设置则为堆叠铺开的效果效果图:水波纹:堆叠铺开:...原创 2021-11-25 17:50:36 · 450 阅读 · 0 评论 -
css使用background-attachment: fixed实现背景滚动视差(即后一张图滚动时覆盖在前一张图的效果,而非在前一张图末尾滚动)
效果图:代码示例:$img1: 'http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg';$img2: 'http://up.enterdesk.com/edpic_source/21/00/00/210000f8e772d7fc0758e67ae4b48807.jpg';$img3: 'https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&au原创 2021-11-25 16:30:29 · 440 阅读 · 0 评论 -
css 实现一行文字伸缩展开、模糊到清晰的交融动画
伸缩展开:通过letter-spacing调整字间距即可实现文字的伸缩展开模糊到清晰交融:通过filter:contrast和filter:blur实现效果图:代码示例:html, body { height: 100%; width: 100%; background-color: black;}.container { width: 100%; height: 100%; position: relative; paddin原创 2021-11-24 16:38:20 · 678 阅读 · 0 评论 -
css background:attachment实现滚动出现分隔阴影
background-attachment: srcoll; 背景不随滚动变化background-attachment: local; 背景随容器滚动变化通过背景渐变色:实现不滚动时的背景色和滚动时的阴影渐变色滚动出现阴影: 未滚动时,不滚动的渐变色覆盖在阴影渐变色上,设置成background-attachment:local;使得滚动时背景色往上移,展现阴影 阴影渐变色设置成background-attachment: srcoll;原理图:代码示例:// 情形一:.g-on原创 2021-11-23 19:00:22 · 351 阅读 · 0 评论 -
css filter:blur实现毛玻璃效果
核心:让毛玻璃的元素层级低于放置在上面的元素效果图:代码示例:body { /* background: #000; */ /* background: linear-gradient(90deg, hsl(199, 98%, 50%), hsl(199, 98%, 38%)); */ /* background-color: #ebecf0; */ background-image: url(https://images.unsplash.com/photo-1440688807原创 2021-11-22 16:47:49 · 532 阅读 · 0 评论 -
css @property实现过渡(包括渐变色等)
@property允许开发者显式地定义他们的CSS自定义属性,允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承在一般css场景中,诸如背景色渐变等是无法过渡的,但使用@property后,可指定属性过渡,而非整个背景过渡,实现过渡效果(1)定义css自定义属性 css中: @property --property-name { 名称和css定义变量规则一致 syntax: '<color>'; 属性类型,必填 inherits: false;原创 2021-11-22 16:03:19 · 862 阅读 · 1 评论 -
css边框加载动画
在主元素基础上通过伪类再生成一个稍大的元素,并旋转90度并位移出去,主元素设置overflow:hidden,让伪元素旋转位移回原本位置,产生边框加载的效果效果图:原理图:代码示例:body { /* background: #000; */ /* background: linear-gradient(90deg, hsl(199, 98%, 50%), hsl(199, 98%, 38%)); */ /* background-color: #ebecf0; *原创 2021-11-18 18:12:27 · 623 阅读 · 0 评论 -
css实现波浪效果border-radius
波浪核心:让border-radius没到50%再滚动起来,再用其覆盖背景,背景设置overflow:hidden;代码示例:div { position: relative; align-items: center; min-height: 100vh; background-color: rgb(118, 218, 255); overflow: hidden;} div::before, div::after { //生成两个borde原创 2021-11-10 18:10:27 · 2037 阅读 · 0 评论 -
css 实现文字3D旋转近清晰远模糊
3D旋转:父元素设置透距perspective:160vmin,子元素设置3D模式transform-style: preserve-3d近清晰远模糊:通过filter:blur实现模糊,filter:contrast实现更清晰,通过animation-delay:-ns;从指定时间立即开始动画,通过时间差实现,近清晰,远模糊效果图:代码示例:body { perspective: 160vmin; overflow: hidden;}p { margin: aut原创 2021-11-09 17:53:51 · 990 阅读 · 0 评论 -
css clip-path和drop-shadow生成自定义图形、阴影
clip-path:能在不引入SVG的情况下,很好的使用SVG的一些属性,绘制各种图形drop-shadow():将内部元素投影生成阴影,而非box-shadow生成盒子阴影效果图:代码示例:.btn-wrap { margin: auto; filter: drop-shadow(2px 4px 3px rgba(50, 50, 0, 0.5));}.btn{ content: ""; width: 200px; height: 64px;原创 2021-11-08 17:26:23 · 2020 阅读 · 0 评论 -
css 实现火焰效果
代码示例:// pug 模版.g-container .g-fire - for (var j = 1; j <=40; j++) .g-dot$douCount: 40;$animationTime: 2;$delayTime: 3;@function randomNum($max, $min: 0) { @return ($min + random($max));}body { background: #...转载 2021-10-26 18:00:07 · 966 阅读 · 0 评论 -
css filter:blur和filter:contrast对比度能实现元素相交变得清晰并呈现水滴交融的效果
filter:blur会造成元素模糊filter:contrast设置对比度,能实现元素更亮|淡,当对模糊元素的父级设置contrast时,会实现模糊元素相交产生水滴交融且相交部分变清晰的效果效果图:代码示例:body { /* background: #000; */ /* background: linear-gradient(90deg, hsl(199, 98%, 50%), hsl(199, 98%, 38%)); */ /* background-color原创 2021-10-26 17:25:12 · 1295 阅读 · 0 评论 -
css伪类+动画进行方式实现长度变化的环形loading
只设置border两边和border-radius:50%实现半圆弧,然后通过定位伪类覆盖样式与背景相同色即可实现遮盖再旋转,根据animation的动画方式,实现长度变小 ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))(相对于匀速,开始时快,结束时候间慢,)。 ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))(相对于匀速,(开始和结束都慢)两头慢)。代码示例:div {原创 2021-10-19 17:29:45 · 609 阅读 · 0 评论 -
css伪元素实现加载...
借助动画操控伪元素的content,动画方式使用steps使得更符合视觉效果代码示例:<style>p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 6vw; line-height: 8vw;}p::after { content: ""; position: absolute;原创 2021-10-19 16:05:22 · 186 阅读 · 0 评论 -
css局部透明
方式一: div定位,然后通过border设置遮罩 优点:能指定遮罩覆盖区域 方式二: div定位,然后通过box-shadow设置遮罩 缺点:只能设置遮罩整体大小方式三: div定位,内部背景通过渐变色设置透明,然后外部通过border等设置遮罩 优点:当需要多个相同大小透明点在同一行|列时,能指定间距的遮罩...原创 2021-10-14 19:59:36 · 1569 阅读 · 1 评论 -
css伪类实现判断不同方向进入盒子效果
通过设置四个方向的内容盒子以及对应伪类,伪类分别在盒子边上放置底和边长度相等的透明三角形(如矩形选择45deg)判断方向:当hover三角形的时候,设置对应方向的内容进场解决同时hover多个三角形方向错乱的问题:当hover其中一个时,让透明三角形变成高宽和盒子等大的透明矩形,且层级最高,随着主内容进场,会一起位移,这样形成遮罩的效果,使得hover其中一个时,不会触发其他hover...原创 2021-10-14 10:45:26 · 201 阅读 · 0 评论 -
css阴影实现饭叉样式
通过两个伪类的样式和对应阴影偏移,覆盖在原元素上,达到对应的视觉效果代码示例: div { position: relative; width: 140px; height: 140px; margin-top: 100px; border-radius: 50%; background: #fff; }//叉柄 div::before { content: ""; position: absolute;原创 2021-10-13 18:16:48 · 74 阅读 · 0 评论 -
css阴影box-shadow和drop-shadow配合伪类实现抖音重叠、闪动、模糊动效
box-shado实现两曾重叠drop-shadow:会投影整个元素包括投影,此时拥有四层重叠将抖音图表拆解成三部分: 中间部分数值方块重叠 伪类:底下四分之三圆重叠,定位到合适位置 伪类:上方右边四分之一圆重叠,定位到合适位置闪动、模糊: 通过animation动画配合skewX、filter:blur实现分解实现:(1)中间部分 /* #fe2d52 红、#24f6f0 蓝 */ div { position: relative; widt原创 2021-10-13 15:35:39 · 847 阅读 · 0 评论 -
css阴影实现方块shuffle重组散列动画
box-shadow 的模糊半径和扩张半径都为 0 的时候,我们可以得到一个和元素大小一样的阴影box-shadow 是可以设置多层的,也就是多层阴影,而且可以进行过渡变换动画(补间动画)background-image: linear-gradient(),也就是渐变背景是不能进行补间动画的.shadow { position: relative; width: 250px; height: 250px; border: 1px solid #333; box-siz原创 2021-10-13 14:44:48 · 136 阅读 · 0 评论 -
css阴影实现输入框等键盘动效风
通过阴影外显和inset内显示,配合颜色、阴影大小、模糊级别实现视觉上的键盘按入弹起代码示例 input { border: 0; outline: 0; font-size: 16px; border-radius: 320px; padding: 16px; background-color: #ebecf0; text-shadow: 1px 1px 1px #fff; box-s原创 2021-10-13 14:32:33 · 231 阅读 · 0 评论 -
css条纹状文字阴影
通过线性渐变,控制背景为白色-透明-白色-透明,然后控制背景大小,让背景background-repeat:repeat重复,就能实现斑马条纹通过伪元素来实现时,因为伪元素的层级会高于原本元素,所以通过伪元素来展示文字,将条纹覆盖在原本文字上代码示例: div { font-family: Times New Roman, 'serif'; position: relative; font-size: 30px; width: 400px; text原创 2021-10-13 12:02:00 · 157 阅读 · 0 评论 -
css实现斑马线条纹
通过线性渐变,控制背景为白色-透明-白色-透明,然后控制背景大小,让背景background-repeat:repeat重复,就能实现斑马条纹代码示例:div { width: 400px; background-color: blue;}div::before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; backgroun原创 2021-10-13 11:52:22 · 2679 阅读 · 0 评论 -
css实现立体长方柱
位移到对应位置,进行skewY倾斜和scaleX缩放代码示例: body { /* background: #000; */ background: linear-gradient(90deg, hsl(199, 98%, 50%), hsl(199, 98%, 38%)); overflow: hidden; } div { position: relative; width: 30vmin; height: 30vmin;原创 2021-10-13 11:15:13 · 309 阅读 · 0 评论 -
css阴影实现文字氛围酒吧氦灯效果
基架:阴影氛围灯:添加多层模糊距离加大的阴影,实现笼罩效果,模糊距离越大中间的文字越淡越清晰可以通过filter: brightness(110%);增加文字亮度代码示例: .orange { color: #ff5722; } .orange:hover { animation: orange .5s ease-in-out backwards; } @keyframes orange { to { text-shadow: 0 0原创 2021-10-11 16:28:41 · 223 阅读 · 0 评论 -
css translateZ和preserve-3d、perspective形成3D重叠文字,且有滚动视差
形成3D滚动盒子: overflow: scroll; transform-style: preserve-3d; perspective: 10px; 3D重叠、滚动视差 先将多个相同文字定位,依次设置transform: translateZ(-npx)加大,即依次往里缩,形成重叠,滚动形成视差效果图:代码示例: html,body { /* background: #000; */ /* background: linear-gradien原创 2021-11-26 15:03:23 · 470 阅读 · 0 评论