做网站cookie传值,哪个网站可以做全网推广,徐州哪里做网站,成都大丰网站建设目录 渐隐渐显曲线抛物线气泡框水波纹悬浮漂浮长按控制进度条圆弧圆形进度条引导蒙层随机物品掉落渐变边框光晕按钮下压反馈头像#xff08;圆形半透明阴影#xff09; 常见 CSS 效果实现总结。
渐隐渐显
!DOCTYPE html
html
style… 目录 渐隐渐显曲线抛物线气泡框水波纹悬浮漂浮长按控制进度条圆弧圆形进度条引导蒙层随机物品掉落渐变边框光晕按钮下压反馈头像圆形半透明阴影 常见 CSS 效果实现总结。
渐隐渐显
!DOCTYPE html
html
stylebody {background-color: black;color: #fff;}.click_links {font-size: 44px;animation: a_link_enter 3s linear infinite;}keyframes a_link_enter {0% {opacity: 0;}30% {opacity: 1;}70% {opacity: 1;}100% {opacity: 0;}}
/stylebodyspan classclick_links请点击进入/span
/body/html曲线抛物线
!DOCTYPE html
htmlheadmeta charsetutf-8style.outer-div {width: 100px;height: 100px;padding: 10px;background-color: #fff;}.inner-div {height: 100%;background-color: yellow;}.outer-div:hover {transform: translateX(100px);transition: transform 2s linear;}.outer-div:hover.inner-div {transform: translateY(100px);transition: transform 2s cubic-bezier(.55, 0, .85, .36);}/style
/headbodydiv classouter-divdiv classinner-divHello/div/div
/body/html更多关于抛物线的解释阅读 WHAT - CSS Animationtion 动画系列二
气泡框
!DOCTYPE html
html
stylebody {background-color: red;}.wrapper {width: 300px;height: 200px;margin-top: 100px;position: relative;border: 2px solid #cccccc;border-radius: 15px;background: rgba(0, 0, 0, 0.5);}.wrapper:before {content: ;width: 0;height: 0;border: 20px solid transparent;border-bottom-color: #cccccc;position: absolute;top: 0;right: 20%;margin-top: -40px;}.wrapper:after {content: ;width: 0;height: 0;border: 18px solid transparent;border-bottom-color: #FFFFFF;position: absolute;top: 0;right: 21%;margin-top: -36px;}
/stylebody!-- 方案一 --!-- https://blog.csdn.net/LLL_liuhui/article/details/80916265 --!-- 有边框的三角形、空心三角形叠加两层div 外层作为边框 --!-- div border方案 --div classwrapper/div!-- svg方案 --divsvg xmlnshttp://www.w3.org/2000/svg width181 height69 viewBox0 0 181 69 fillnonepathdM37.4416 41.7506L23.125 66.6287V42V41.5H22.625H7C3.41015 41.5 0.5 38.5899 0.5 35V7C0.5 3.41015 3.41015 0.5 7 0.5H174C177.59 0.5 180.5 3.41015 180.5 7V35C180.5 38.5899 177.59 41.5 174 41.5H90.5H37.875H37.5859L37.4416 41.7506Zfillblack fill-opacity0.5 strokewhite //svgsvg xmlnshttp://www.w3.org/2000/svg width181 height61 viewBox0 0 181 61 fillnoneg filterurl(#filter0_b_1345_620)pathdM0 7C0 3.13401 3.13401 0 7 0H174C177.866 0 181 3.13401 181 7V35C181 38.866 177.866 42 174 42H90.5H57.875L35.625 60.5L42.625 42H7C3.13401 42 0 38.866 0 35V7Zfillblack fill-opacity0.2 /pathdM57.875 41.5H57.6943L57.5553 41.6155L36.764 58.9027L43.0926 42.1769L43.3488 41.5H42.625H7C3.41015 41.5 0.5 38.5899 0.5 35V7C0.5 3.41015 3.41015 0.5 7 0.5H174C177.59 0.5 180.5 3.41015 180.5 7V35C180.5 38.5899 177.59 41.5 174 41.5H90.5H57.875Zstrokewhite //gdefsfilter idfilter0_b_1345_620 x-10 y-10 width201 height80.5 filterUnitsuserSpaceOnUsecolor-interpolation-filterssRGBfeFlood flood-opacity0 resultBackgroundImageFix /feGaussianBlur inBackgroundImage stdDeviation5 /feComposite in2SourceAlpha operatorin resulteffect1_backgroundBlur_1345_620 /feBlend modenormal inSourceGraphic in2effect1_backgroundBlur_1345_620 resultshape //filter/defs/svg/div
/body/html水波纹
!DOCTYPE html
html
stylebody {background-color: red;}.wrapper {width: 300px;height: 200px;margin-top: 100px;position: relative;border: 2px solid #cccccc;border-radius: 15px;background: rgba(0, 0, 0, 0.5);}.wrapper:before {content: ;width: 0;height: 0;border: 20px solid transparent;border-bottom-color: #cccccc;position: absolute;top: 0;right: 20%;margin-top: -40px;}.wrapper:after {content: ;width: 0;height: 0;border: 18px solid transparent;border-bottom-color: #FFFFFF;position: absolute;top: 0;right: 21%;margin-top: -36px;}
/stylebody!-- 方案一 --!-- https://blog.csdn.net/LLL_liuhui/article/details/80916265 --!-- 有边框的三角形、空心三角形叠加两层div 外层作为边框 --!-- div border方案 --div classwrapper/div!-- svg方案 --divsvg xmlnshttp://www.w3.org/2000/svg width181 height69 viewBox0 0 181 69 fillnonepathdM37.4416 41.7506L23.125 66.6287V42V41.5H22.625H7C3.41015 41.5 0.5 38.5899 0.5 35V7C0.5 3.41015 3.41015 0.5 7 0.5H174C177.59 0.5 180.5 3.41015 180.5 7V35C180.5 38.5899 177.59 41.5 174 41.5H90.5H37.875H37.5859L37.4416 41.7506Zfillblack fill-opacity0.5 strokewhite //svgsvg xmlnshttp://www.w3.org/2000/svg width181 height61 viewBox0 0 181 61 fillnoneg filterurl(#filter0_b_1345_620)pathdM0 7C0 3.13401 3.13401 0 7 0H174C177.866 0 181 3.13401 181 7V35C181 38.866 177.866 42 174 42H90.5H57.875L35.625 60.5L42.625 42H7C3.13401 42 0 38.866 0 35V7Zfillblack fill-opacity0.2 /pathdM57.875 41.5H57.6943L57.5553 41.6155L36.764 58.9027L43.0926 42.1769L43.3488 41.5H42.625H7C3.41015 41.5 0.5 38.5899 0.5 35V7C0.5 3.41015 3.41015 0.5 7 0.5H174C177.59 0.5 180.5 3.41015 180.5 7V35C180.5 38.5899 177.59 41.5 174 41.5H90.5H57.875Zstrokewhite //gdefsfilter idfilter0_b_1345_620 x-10 y-10 width201 height80.5 filterUnitsuserSpaceOnUsecolor-interpolation-filterssRGBfeFlood flood-opacity0 resultBackgroundImageFix /feGaussianBlur inBackgroundImage stdDeviation5 /feComposite in2SourceAlpha operatorin resulteffect1_backgroundBlur_1345_620 /feBlend modenormal inSourceGraphic in2effect1_backgroundBlur_1345_620 resultshape //filter/defs/svg/div
/body/html悬浮漂浮
!DOCTYPE html
html langendiv classitemActivity3Whale/div
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style.itemActivity3Whale {position: absolute;top: 120px;left: 14px;width: 56px;height: 72px;background-image: url(../../assets/images/footballTour/footballtour-activity3-whale.png);background-repeat: no-repeat;background-size: 100% 100%;animation: a_whale_suspended 3s linear both infinite;}keyframes a_whale_suspended {0% {transform: scale(1, 1) translate(0, 0px);}20% {transform: scale(1.10, 0.94) translate(0, 0px);}40% {transform: scale(0.92, 1.08) translate(0, -10px);}60% {transform: scale(1.05, 0.98) translate(0, 0px);}80% {transform: scale(0.98, 1.02) translate(0, -6px);}100% {transform: scale(1, 1) translate(0, 0px);}}
/stylebody/body/html长按控制进度条
!DOCTYPE html
html
stylebody {background-color: gray;margin: 0px;}#circle {transition: all .1s;stroke-dasharray: 314, 314;stroke-dashoffset: 314;}#triangle {transition: all .1s;position: absolute;top: 30px;left: 95px;transform-origin: 5px 70px;}.triangleAni {animation: a_whale_suspended 2s linear both infinite;}keyframes a_whale_suspended {0% {transform: scale(1, 1) translate(0, 0px);}50% {transform: scale(1, 1) translate(0, -2px);}100% {transform: scale(1, 1) translate(0, 0px);}}
/stylebody!-- div idcircleButtonsvg width200 height200 viewBox0 0 200 200circle idcircleBg transformrotate(-90 100 100) cx100 cy100 r50 fillnone stroke-width10strokegray /circle idcircle stroke-linecapround transformrotate(-90 100 100) cx100 cy100 r50 fillnonestroke-width10 strokegreen /circle cx100 cy100 r45 fill#040404 /text x100 y100 fill#6b778c text-anchormiddle dominant-baselinecentraltspan idpercent0/tspan%/text/svg/div --div idcircleButtonsvg width200 height200 viewBox0 0 200 200circle idcircleBg transformrotate(-90 100 100) cx100 cy100 r50 fillnone stroke-width10strokergba(255, 255, 255, 0.4) /circle idcircle transformrotate(-90 100 100) stroke-linecapround cx100 cy100 r50 fillnonestroke-width10 stroke#FFC700 /circle cx100 cy100 r45 fill#FFF //svgsvg idtriangle classtriangleAni width10 height10polygon idtriangleSelf points0 0, 10 0, 5 10, 0 0 fill#FFC700 //svg/div/bodyscript// 更推荐使用path绘制圆形// https://www.joubn.com/blog/js/2017-09-26-svg-path-arclet circle document.getElementById(circle)// let percent document.getElementById(percent)let triangle document.getElementById(triangle)let triangleSelf document.getElementById(triangleSelf)let init 314let v initlet rotate 360function getPercent(num) {// let percent Math.round(((init - num) / init) * 100)let percent (((init - num) / init)).toFixed(2)return percent}function getRotate(v) {let percent getPercent(v)triangle.style.transform rotate(${rotate * percent}deg)const percents percent * 100if (percents 70 percents 90) {circle.style.stroke redtriangleSelf.style.fill red} else {circle.style.stroke #FFC700triangleSelf.style.fill #FFC700}}function add() {console.log(2222);v v - 3if (v 0) {if (timer) {clearInterval(timer)timer null}v 0}getRotate(v)// percent.innerHTML getPercent(v)circle.style[stroke-dashoffset] v}function minus(reset) {if (reset) {v 314} else {v v 10if (v 314) {v 314}}// percent.innerHTML getPercent(v)console.log(v);circle.style[stroke-dashoffset] v}let progressBtn document.getElementById(circleButton)let timer;// handle presses through the mouse cursorprogressBtn.addEventListener(mousedown, toggleActive);progressBtn.addEventListener(mouseup, removeActive);function toggleActive() {if (timer) {return}console.log(1111);triangle.classList.remove(triangleAni)timer setInterval(() {add();}, 16);}function removeActive() {// console.log(minus);// if (timer) {// clearInterval(timer)// timer null// minus(true)// }if (timer) {clearInterval(timer)timer null}}
/script/html圆弧圆形进度条
!DOCTYPE html
html langenheadmeta charsetUTF-8titleHTML5中的SVG属性实现圆形进度条效果/title
/headbodysvg width300 height300 version1.1 xmlnshttp://www.w3.org/2000/svgpath idring fillnone stroke#fd30ae stroke-width10px //svgscriptvar path document.getElementById(ring);var r 100;var progress 0.5;//将path平移到我们需要的坐标位置ring.setAttribute(transform, translate( 150 , 150 ));// 计算当前的进度对应的角度值var degrees progress * 360;// 计算当前角度对应的弧度值var rad degrees * (Math.PI / 180);//极坐标转换成直角坐标var x (Math.sin(rad) * r).toFixed(2);var y -(Math.cos(rad) * r).toFixed(2);//大于180度时候画大角度弧小于180度的画小角度弧(deg 180) ? 1 : 0var lenghty window.Number(degrees 180);//path 属性var descriptions [M, 0, -r, A, r, r, 0, lenghty, 1, x, y];// 给path 设置属性path.setAttribute(d, descriptions.join( ));/script
/body/html引导蒙层
!DOCTYPE html
html
stylebody {}/* z-index方案 *//* .mask {position: absolute;top: 0;width: 100%;height: 100vh;background-color: rgba(0, 0, 0, .2);}.click_links {width: 100px;height: 100px;background-color: antiquewhite;margin-bottom: 10px;}.show {position: relative;z-index: 100;} *//* 动态opacity方案 *//* .wrap {display: flex;flex-wrap: wrap;width: 150px;}.z {width: 50px;height: 50px;transition: all 1s;}.z1 {background: blue;}.z2 {background: black;}.z3 {background: yellow;}.z4 {background: red;}.z5 {background: green;}.z6 {background: orange;} *//* canvas xor方案 */.content {padding: 10px;}#mask {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 900;}
/stylebody!-- z-index方案 --!-- 该方案最简单 --!-- div classclick_links请点击进入/divdiv classclick_links请点击进入/divdiv classclick_links请点击进入/divdiv classclick_links请点击进入/divdiv idclickme classclick_links show请点击进入/divdiv classclick_links请点击进入/divdiv classclick_links请点击进入/divdiv classclick_links请点击进入/divdiv idmaskdiv classmask/divscriptconst div document.getElementById(clickme);const mask document.getElementById(maskdiv)div.addEventListener(click, () {mask.className })/script --!-- 动态opacity方案 类似于骨架屏 --!-- div classwrapdiv classz z1/divdiv classz z2/divdiv classz z3/divdiv classz z4/divdiv idz5div classz z5/divdiv classz z6/div/divscriptlet arry Array.from(document.querySelectorAll(.z));let index -1;let direct 1;arry.forEach((d, i) {(i ! 4) (d.style.opacity 0.5)});const div document.getElementById(z5div);div.addEventListener(click, () {arry.forEach((d, i) {(i ! 4) (d.style.opacity 1)});})/script --!-- canvas xor方案 --!-- 该方案最为灵活 --!-- 思路1. 新增一个canvas绘制两次图形2. 第一次绘制全屏半透明阴影3. 第二次使用 xor 绘制一个和需要高亮的元素位置和尺寸完全重合的区域。因为 xor 会透明所以可以让下层元素完全显示出来--div classcontent one我是第一个div我是第一个div/divdiv classcontent two我是第二个div我是第二个div/divdiv classcontent three我是第三个div我是第三个div/divdiv classcontent four我是第四个div我是第四个div/divcanvas idmask/canvasscriptfunction mask(cls) {// 获取需要高亮的元素的位置和尺寸信息let targetNode document.querySelector(.${cls});let pos targetNode.getBoundingClientRect();// 设置canvas尺寸let canvas document.getElementById(mask);let width window.innerWidth;let height window.innerHeight;canvas.setAttribute(width, width);canvas.setAttribute(height, height);// 绘制canvasvar ctx canvas.getContext(2d);ctx.globalCompositeOperation source-over;ctx.fillStyle rgba(0, 0, 0, 0.5);ctx.fillRect(0, 0, width, height);ctx.fill();ctx.fillStyle white;ctx.globalCompositeOperation xor;ctx.fillRect(pos.left, pos.top, pos.width, pos.height);ctx.fill();}let array [one, two, three, four];let i 0;setInterval(() {mask(array[i]);i;if (i 4) i 0;}, 1000)/script!-- border透明度方案 --!-- 一个div有四个边框如果我们把边框都设置成半透明然后中间的区域设置成全透明就可以实现区域引导蒙层了然后再把边框设置成超过屏幕的大小就是全景引导蒙层了 --!-- box-shadow 阴影的尺寸透明度方案 --!-- 与上面一个方案类似 box-shadow: 10px 10px 5px 100px rgba(0,0,0,.5); --!-- box-shadow 的阴影距离切勿盲目设置过大经过测试这个值如果过大比如4000px在部分手机上阴影无法显示出来。设置为2000px为佳。 --!-- 页面节点复制方案 --!-- 该方案类似于dialog将要显示的内容放到dialog中底层页面节点被蒙层挡住。只是在这里我们可以把需要高亮的元素复制到dialog内容里并设置同等位置和尺寸 --/body/html随机物品掉落
!DOCTYPE html
htmlheadmeta charsetutf-8style.rain_area {width: 100px;height: 100px;}.drop {display: inline-block;width: 5px;height: 5px;border-radius: 50%;background-color: black;}.drop1 {animation: a_drop_1 1s 0.6s linear both infinite;}.drop2 {animation: a_drop_1 0.8s 0.9s linear both infinite;}.drop3 {animation: a_drop_1 1.1s 1s linear both infinite;}.drop4 {animation: a_drop_1 1.1s 0.9s linear both infinite;}keyframes a_drop_1 {0% {opacity: 0;transform: translate(0, 0);scale: (1, 1);}20% {opacity: 1;transform: translate(0, 30px);scale: (1, 2);}45% {opacity: 1;transform: translate(0, 79px);scale: (1, 2);}50% {opacity: 1;transform: translate(0, 81px);scale: (1, 1);}75% {opacity: 0.6;transform: translate(0, 96px);scale: (1, 1);}100% {opacity: 0;transform: translate(0, 116px);scale: (1, 1);}}/style
/headbody!-- 关键除非时间是各个元素时间的最小公倍数否则不会回归到初始状态从而产生随即感 --div classrain_areadiv classdrop drop1/divdiv classdrop drop2/divdiv classdrop drop3/divdiv classdrop drop4/div/div
/body/html渐变边框
!DOCTYPE html
html
style.border-box {border: 4px solid transparent;border-radius: 16px;position: relative;background-color: #222;background-clip: padding-box;/*important*/}.border-box::before {content: ;position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: -1;margin: -4px;border-radius: inherit;/*important*/background: linear-gradient(to right, #8F41E9, #578AEF);}
/stylebodydiv classborder-boxdiv classcontentLorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quossaepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,accusamus tempora./div/div
/body/html光晕
!DOCTYPE html
html
stylebody {background-color: black;}div {width: 407px;height: 407px;background: radial-gradient(50% 50% at 50% 50%, #2B50D7 0%, rgba(43, 80, 215, 0) 100%);filter: blur(40px);}
/stylebodydiv/div
/body/html按钮下压反馈
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.splash-section__button {display: flex;align-items: center;justify-content: center;height: 44px;border-radius: 30px;background-color: #3b8beb;color: #ffffff;font-weight: 600;font-size: 16px;width: 240px;border: none;}.splash-section__button:active {background-color: #1b6bcb;transform: translate(0, 2px);}/style
/headbodybutton classsplash-section__buttonCreate a Free Profile/button/div
/body/html头像圆形半透明阴影
!DOCTYPE html
html
style.outer {width: 100px;height: 100px;border-radius: 50%;background-color: rgb(156, 140, 140);position: relative;text-align: center;overflow: hidden;}.shadow {background: rgba(0, 0, 0, 0.73);position: absolute;width: 100px;height: 25px;bottom: 0;color: white;}
/stylebodydiv classouterdiv classshadowhtml test/div/div
/body/html
