电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

通過CSS實現逼真水滴動效

瀏覽:149日期:2022-06-03 11:31:37

哈嘍哈嘍!CSS真的好好玩啊,哈哈,反正我是愛了,空閑寫著玩。畫畫不好的我樂了,下面就是一個用CSS3動畫完成的模仿水珠的動效,其中主要就是會使用CSS設置陰影效果以及@keyframes關鍵幀和一些選擇器的技術,快來學習吧?。?!🐬

實現效果:就很nice
你也通過一下網址進行訪問水滴點擊進入


靈感:看到了這張圖陰影高亮,這屬于美術吧,哈哈,我是小菜雞


這里強烈安利GitHub上一個大牛的開源:花式邊框半徑生成器利用這個可以使這個效果實現的事半功倍,好開始coding

1.html

很簡單,只需要一個盒子就OK了

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>水滴</title></head><body>    <div></div></body></html>

2.CSS

注釋已經寫在代碼中,這里主要學習一下偽元素選擇器的使用,box-shadow這個設置陰影的屬性,關鍵幀 @keyframes以及關鍵幀的使用 animation,和 border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;這個屬性的使用

		/*清除body的影響*/*{    margin: 0;    padding: 0;}/*設置背景顏色*/body{    background-color: rgba(40, 134, 241, 0.925);}/* 初始一下水,大小,彎曲,陰影*/.shui{    width: 400px;    height: 400px;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);    /* 測試用的邊框 */    /* border: 1px solid; */    box-sizing: border-box;    /* 設置彎曲 */    border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;    /* 設置box-shadow :水平方向陰影  垂直方向陰影  模糊距離  陰影尺寸  陰影顏色  內/外陰影(inset/outset(默認))     盒子陰影可以有多組值,之間用逗號隔開    水平陰影和垂直陰影必須寫,其余4個是可選的*/    box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0.05),     inset -10px -10px 15px rgba(255, 255, 254, 0.83);    /*使用關鍵幀  watermove  9s播放  勻速 無限循環*/    animation: watermove 9s linear infinite;}/* 偽元素選擇器:在^之后插入 */.shui::after{    content: "";    position: absolute;    width: 35px;    height: 35px;    background: rgba(255, 255, 255, 0.82);    border-radius: 50%;    left: 60px;    top: 80px;    /*使用關鍵幀  watermove  4s播放  勻速 無限循環*/    animation: watermove 4s linear infinite;}/* 偽元素選擇器:在當前盒子最前插入一個東西 */.shui::before{    content: "";    position: absolute;    width: 20px;    height: 20px;    background: rgba(255, 255, 255, 0.82);    border-radius: 50%;    left: 120px;    top: 55px;    /*使用關鍵幀  watermove  4s播放  勻速 無限循環*/    animation: watermove 4s linear infinite;}/* 關鍵幀 */@keyframes watermove{      20%{border-radius: 30% 70% 53% 47% / 28% 44% 56% 72%;    }       40%{border-radius: 30% 70% 39% 61% / 34% 39% 61% 66%;    }       60%{border-radius: 25% 75% 45% 55% / 40% 55% 45% 60%;    }       80%{border-radius: 28% 72% 31% 69% / 32% 39% 61% 68%;    }}

3.完整代碼

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>水滴</title>    <style>/*清除body的影響*/*{    margin: 0;    padding: 0;}/*設置背景顏色*/body{    background-color: rgba(40, 134, 241, 0.925);}/* 初始一下水,大小,彎曲,陰影*/.shui{    width: 400px;    height: 400px;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);    /* 測試用的邊框 */    /* border: 1px solid; */    box-sizing: border-box;    /* 設置彎曲 */    border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;    /* 設置box-shadow :水平方向陰影  垂直方向陰影  模糊距離  陰影尺寸  陰影顏色  內/外陰影(inset/outset(默認))     盒子陰影可以有多組值,之間用逗號隔開    水平陰影和垂直陰影必須寫,其余4個是可選的*/    box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0.05),     inset -10px -10px 15px rgba(255, 255, 254, 0.83);    /*使用關鍵幀  watermove  9s播放  勻速 無限循環*/    animation: watermove 9s linear infinite;}/* 偽元素選擇器:在^之后插入 */.shui::after{    content: "";    position: absolute;    width: 35px;    height: 35px;    background: rgba(255, 255, 255, 0.82);    border-radius: 50%;    left: 60px;    top: 80px;    /*使用關鍵幀  watermove  4s播放  勻速 無限循環*/    animation: watermove 4s linear infinite;}/* 偽元素選擇器:在當前盒子最前插入一個東西 */.shui::before{    content: "";    position: absolute;    width: 20px;    height: 20px;    background: rgba(255, 255, 255, 0.82);    border-radius: 50%;    left: 120px;    top: 55px;    /*使用關鍵幀  watermove  4s播放  勻速 無限循環*/    animation: watermove 4s linear infinite;}/* 關鍵幀 */@keyframes watermove{      20%{border-radius: 30% 70% 53% 47% / 28% 44% 56% 72%;    }       40%{border-radius: 30% 70% 39% 61% / 34% 39% 61% 66%;    }       60%{border-radius: 25% 75% 45% 55% / 40% 55% 45% 60%;    }       80%{border-radius: 28% 72% 31% 69% / 32% 39% 61% 68%;    }}    </style></head><body>    <div></div></body></html>

OK,簡簡單單,快快樂樂,歡迎交流探討,白白了你

到此這篇關于通過CSS實現逼真水滴動效的文章就介紹到這了,更多相關CSS實現水滴效果內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持!

標簽: CSS HTML
主站蜘蛛池模板: SRRC认证_电磁兼容_EMC测试整改_FCC认证_SDOC认证-深圳市环测威检测技术有限公司 | 脑钠肽-白介素4|白介素8试剂盒-研域(上海)化学试剂有限公司 | 新密高铝耐火砖,轻质保温砖价格,浇注料厂家直销-郑州荣盛窑炉耐火材料有限公司 | 土壤养分检测仪|土壤水分|土壤紧实度测定仪|土壤墒情监测系统-土壤仪器网 | 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 我爱古诗词_古诗词名句赏析学习平台 | 一路商机网-品牌招商加盟优选平台-加盟店排行榜平台 | 萃取箱-萃取槽-PVC萃取箱厂家-混合澄清槽- 杭州南方化工设备 | SDG吸附剂,SDG酸气吸附剂,干式酸性气体吸收剂生产厂家,超过20年生产使用经验。 - 富莱尔环保设备公司(原名天津市武清县环保设备厂) | 水篦子|雨篦子|镀锌格栅雨水篦子|不锈钢排水篦子|地下车库水箅子—安平县云航丝网制品厂 | 潍坊大集网-潍坊信息港-潍坊信息网| 欧洲MV日韩MV国产_人妻无码一区二区三区免费_少妇被 到高潮喷出白浆av_精品少妇自慰到喷水AV网站 | 帽子厂家_帽子工厂_帽子定做_义乌帽厂_帽厂_制帽厂 | 成都顶呱呱信息技术有限公司-贷款_个人贷款_银行贷款在线申请 - 成都贷款公司 | 汝成内控-行政事业单位内部控制管理服务商 | 浙江自考_浙江自学考试网| Honsberg流量计-Greisinger真空表-气压计-上海欧臻机电设备有限公司 | 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 热熔胶网膜|pes热熔网膜价格|eva热熔胶膜|热熔胶膜|tpu热熔胶膜厂家-苏州惠洋胶粘制品有限公司 | 培训一点通 - 合肥驾校 - 合肥新亚驾校 - 合肥八一驾校 | 扫地车厂家-山西洗地机-太原电动扫地车「大同朔州吕梁晋中忻州长治晋城洗地机」山西锦力环保科技有限公司 | 芝麻黑-芝麻黑石材厂家-永峰石业| 高温链条油|高温润滑脂|轴承润滑脂|机器人保养用油|干膜润滑剂-东莞卓越化学 | 沈阳液压泵_沈阳液压阀_沈阳液压站-沈阳海德太科液压设备有限公司 | 混合反应量热仪-高温高压量热仪-微机差热分析仪DTA|凯璞百科 | 头条搜索极速版下载安装免费新版,头条搜索极速版邀请码怎么填写? - 欧远全 | 铸铁平台,大理石平台专业生产厂家_河北-北重机械 | 婚博会2024时间表_婚博会门票领取_婚博会地址-婚博会官网 | 动力配电箱-不锈钢配电箱-高压开关柜-重庆宇轩机电设备有限公司 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | DWS物流设备_扫码称重量方一体机_快递包裹分拣机_广东高臻智能装备有限公司 | 英思科GTD-3000EX(美国英思科气体检测仪MX4MX6)百科-北京嘉华众信科技有限公司 | 天津仓库出租网-天津电商仓库-天津云仓一件代发-【博程云仓】 | 无菌实验室规划装修设计-一体化实验室承包-北京洁净净化工程建设施工-北京航天科恩实验室装备工程技术有限公司 | 超声波破碎仪-均质乳化机(供应杭州,上海,北京,广州,深圳,成都等地)-上海沪析实业有限公司 | 户外健身路径_小区健身器材_室外健身器材厂家_价格-浩然体育 | RFID电子标签厂家-上海尼太普电子有限公司 | 青海电动密集架_智能密集架_密集架价格-盛隆柜业青海档案密集架厂家 | 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 上海阳光泵业制造有限公司 -【官方网站】 | 创客匠人-让IP变现不走弯路| 电力测功机,电涡流测功机,磁粉制动器,南通远辰曳引机测试台 |