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

您的位置:首頁技術(shù)文章
文章詳情頁

通過CSS實(shí)現(xiàn)逼真水滴動效

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

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

實(shí)現(xiàn)效果:就很nice
你也通過一下網(wǎng)址進(jìn)行訪問水滴點(diǎn)擊進(jìn)入


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


這里強(qiáng)烈安利GitHub上一個大牛的開源:花式邊框半徑生成器利用這個可以使這個效果實(shí)現(xiàn)的事半功倍,好開始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

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

		/*清除body的影響*/*{    margin: 0;    padding: 0;}/*設(shè)置背景顏色*/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;    /* 設(shè)置彎曲 */    border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;    /* 設(shè)置box-shadow :水平方向陰影  垂直方向陰影  模糊距離  陰影尺寸  陰影顏色  內(nèi)/外陰影(inset/outset(默認(rèn)))     盒子陰影可以有多組值,之間用逗號隔開    水平陰影和垂直陰影必須寫,其余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);    /*使用關(guān)鍵幀  watermove  9s播放  勻速 無限循環(huán)*/    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;    /*使用關(guān)鍵幀  watermove  4s播放  勻速 無限循環(huán)*/    animation: watermove 4s linear infinite;}/* 偽元素選擇器:在當(dāng)前盒子最前插入一個東西 */.shui::before{    content: "";    position: absolute;    width: 20px;    height: 20px;    background: rgba(255, 255, 255, 0.82);    border-radius: 50%;    left: 120px;    top: 55px;    /*使用關(guān)鍵幀  watermove  4s播放  勻速 無限循環(huán)*/    animation: watermove 4s linear infinite;}/* 關(guān)鍵幀 */@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;}/*設(shè)置背景顏色*/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;    /* 設(shè)置彎曲 */    border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;    /* 設(shè)置box-shadow :水平方向陰影  垂直方向陰影  模糊距離  陰影尺寸  陰影顏色  內(nèi)/外陰影(inset/outset(默認(rèn)))     盒子陰影可以有多組值,之間用逗號隔開    水平陰影和垂直陰影必須寫,其余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);    /*使用關(guān)鍵幀  watermove  9s播放  勻速 無限循環(huán)*/    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;    /*使用關(guān)鍵幀  watermove  4s播放  勻速 無限循環(huán)*/    animation: watermove 4s linear infinite;}/* 偽元素選擇器:在當(dāng)前盒子最前插入一個東西 */.shui::before{    content: "";    position: absolute;    width: 20px;    height: 20px;    background: rgba(255, 255, 255, 0.82);    border-radius: 50%;    left: 120px;    top: 55px;    /*使用關(guān)鍵幀  watermove  4s播放  勻速 無限循環(huán)*/    animation: watermove 4s linear infinite;}/* 關(guān)鍵幀 */@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,簡簡單單,快快樂樂,歡迎交流探討,白白了你

到此這篇關(guān)于通過CSS實(shí)現(xiàn)逼真水滴動效的文章就介紹到這了,更多相關(guān)CSS實(shí)現(xiàn)水滴效果內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持!

標(biāo)簽: CSS HTML
主站蜘蛛池模板: 优考试_免费在线考试系统_培训考试系统_题库系统_组卷答题系统_匡优考试 | 广东之窗网| 搅拌磨|搅拌球磨机|循环磨|循环球磨机-无锡市少宏粉体科技有限公司 | BESWICK球阀,BESWICK接头,BURKERT膜片阀,美国SEL继电器-东莞市广联自动化科技有限公司 | 天津电机维修|水泵维修-天津晟佳机电设备有限公司 | 自动化展_机器人展_机床展_工业互联网展_广东佛山工博会 | 高压油管,液压接头,液压附件-烟台市正诚液压附件 | 播音主持培训-中影人教育播音主持学苑「官网」-中国艺考界的贵族学校 | 深圳货架厂_仓库货架公司_重型仓储货架_线棒货架批发-深圳市诺普泰仓储设备有限公司 | 德国EA可编程直流电源_电子负载,中国台湾固纬直流电源_交流电源-苏州展文电子科技有限公司 | 披萨石_披萨盘_电器家电隔热绵加工定制_佛山市南海区西樵南方综合保温材料厂 | 阿里巴巴诚信通温州、台州、宁波、嘉兴授权渠道商-浙江联欣科技提供阿里会员办理 | 口信网(kousing.com) - 行业资讯_行业展会_行业培训_行业资料 | 液压压力机,液压折弯机,液压剪板机,模锻液压机-鲁南新力机床有限公司 | 踏板力计,制动仪,非接触多功能速度仪,逆反射系数测试仪-创宇 | 铝合金脚手架厂家-专注高空作业平台-深圳腾达安全科技 | 沥青车辙成型机-车托式混凝土取芯机-混凝土塑料试模|鑫高仪器 | 超细粉碎机|超微气流磨|气流分级机|粉体改性设备|超微粉碎设备-山东埃尔派粉碎机厂家 | 精密模具-双色注塑模具加工-深圳铭洋宇通 | 上海网站建设-上海网站制作-上海网站设计-上海做网站公司-咏熠软件 | 刺绳_刀片刺网_刺丝滚笼_不锈钢刺绳生产厂家_安平县浩荣金属丝网制品有限公司-安平县浩荣金属丝网制品有限公司 | PU树脂_水性聚氨酯树脂_聚氨酯固化剂_聚氨酯树脂厂家_宝景化工 | 钛合金标准件-钛合金螺丝-钛管件-钛合金棒-钛合金板-钛合金锻件-宝鸡远航钛业有限公司 | 灌装封尾机_胶水灌装机_软管灌装封尾机_无锡和博自动化机械制造有限公司 | 云南成人高考_云南成考网| 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 湖南印刷厂|长沙印刷公司|画册印刷|挂历印刷|台历印刷|杂志印刷-乐成印刷 | 电磁铁_推拉电磁铁_机械手电磁吸盘电磁铁厂家-广州思德隆电子公司 | 高博医疗集团上海阿特蒙医院 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 圆窗水平仪|伊莉莎冈特elesa+ganter| 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库-首页-东莞市傲马网络科技有限公司 | 品牌设计_VI设计_电影海报设计_包装设计_LOGO设计-Bacross新越品牌顾问 | 运动木地板厂家,篮球场木地板品牌,体育场馆木地板安装 - 欧氏运动地板 | 广东佛电电器有限公司|防雷开关|故障电弧断路器|智能量测断路器 广东西屋电气有限公司-广东西屋电气有限公司 | 烟台螺纹,烟台H型钢,烟台钢材,烟台角钢-烟台市正丰金属材料有限公司 | 运动木地板厂家_体育木地板安装_篮球木地板选购_实木运动地板价格 | 生物制药洁净车间-GMP车间净化工程-食品净化厂房-杭州波涛净化设备工程有限公司 | 辐射色度计-字符亮度测试-反射式膜厚仪-苏州瑞格谱光电科技有限公司 | 连栋温室大棚建造厂家-智能玻璃温室-薄膜温室_青州市亿诚农业科技 | 扫地车厂家-山西洗地机-太原电动扫地车「大同朔州吕梁晋中忻州长治晋城洗地机」山西锦力环保科技有限公司 |