女朋友都喜歡的css特效：手機充電 _前置

今天就一起來看看一個十分炫酷的特效：手機充電，整體特效可在最下方看到
前置知識：
要想完成這個特效，就必須要知道一些前置的屬性，簡單介紹一下吧：
: 動畫屬性，可連貫的書寫，也可分開書寫(前面加上-)，如：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
其中：name 需要調用 @ 來自定義名稱，可設置 0% ～ 100% 時的樣子
：用于元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。
: 濾鏡屬性，可以讓事物變得模糊
充電小球
我們先弄一個小球，讓他從最底下，像上面移動，以此循環，在給小球設置其間隔時間即可
.contrast {span{animation: moveUp ease-in-out infinite;animation-duration: 4s;animation-delay: 2s;}}@keyframes moveUp {0% {bottom: 0;}100% {bottom: calc(100% - 265px);}}
底坐
底座我們隨便設置下就行，可以通過 -屬性兩個角弄下
但我們發現如果這是這么彈出就會顯得非常單調，感覺小球與底座并沒有關聯一般，這時后就需要一個效果：融合
融合效果
通過這個屬性就能實現。在父元素添加：: ()，子元素添加:blur() 就可以輕松實現

文章插圖

文章插圖
這里將底座和小球都添加上，同時創建多個小球，在改動下小球的位置css規則定義濾鏡圖文詳解，間隔時間css規則定義濾鏡圖文詳解，速度就行了
.contrast{filter: contrast(15) hue-rotate(0);span{filter: blur(5px);}.button{filter: blur(5px);} }
來看看效果:
環
首先我們需要做個正方形，并在中間弄個圓出來，中間的圓把背景色弄的跟整體的北京市就可以了，像這樣：
之后我們在通過 -來改變下框的圓角，再加入上的效果，讓其變得模糊，并且可以與小球形成融合效果，像這樣：
最后通過設置一個動畫，讓其旋轉起來就行了：

.circle {box-sizing: border-box;filter: blur(8px);animation: circleRotate 6s linear infinite;}@keyframes circleRotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}

效果：
加入顏色
我們為了好看，還可以價格顏色的控制，在把對應的文字移入到圈中，效果就完成了

.contrast{animation: hueRotate 6s linear infinite;}@keyframes hueRotate {0% {filter: contrast(15) hue-rotate(0);}100% {filter: contrast(15) hue-rotate(360deg);}}

詳細代碼

import React from 'react';import './index.less'const Index:React.FC = ({app, dispatch})=> {return (73%{/* 底部的 */}{/* 下面的 */});}export default Index;

.Index {width: 100vw;height: 100vh;background: #000;position: relative;.text{width: 200px;height: 200px;text-align: center;z-index: 9;font-size: 30px;line-height: 200px;color: white;position: absolute;left: 50%;top: 10%;transform: translate(-50%, 0%);}.contrast{width: 100%;height: 100%;background-color: #000;overflow: hidden;filter: contrast(15) hue-rotate(0);position: relative;animation: hueRotate 6s linear infinite;span{background: #00ff6f;position: absolute;bottom: 0;border-radius: 100px 100px 0 0;filter: blur(5px);animation: moveUp ease-in-out infinite;&:nth-child(1) {width: 20px;height: 20px;left: 50%;animation-duration: 4s;animation-delay: 2s;}&:nth-child(2) {width: 22px;height: 22px;left: 54%;animation-duration: 4.2s;animation-delay: 4s;}&:nth-child(3) {width: 24px;height: 24px;left: 45%;animation-duration: 3s;animation-delay: 1s;}&:nth-child(4) {width: 20px;height: 22px;left: 54%;animation-duration: 5s;animation-delay: 0s;}&:nth-child(5) {width: 22px;height: 22px;left: 52%;animation-duration: 3.5s;animation-delay: 5s;}&:nth-child(6) {width: 20px;height: 20px;left: 50%;animation-duration: 4.7s;animation-delay: 1.2s;}&:nth-child(7) {width: 22px;height: 22px;left: 54%;animation-duration: 2.5s;animation-delay: 3.5s;}&:nth-child(8) {width: 24px;height: 24px;left: 51%;animation-duration: 5.6s;animation-delay: 4.2s;}&:nth-child(9) {width: 26px;height: 26px;left: 42%;animation-duration: 5.2s;animation-delay: 4s;}&:nth-child(10) {width: 26px;height: 22px;left: 54%;animation-duration: 3.8s;animation-delay: 4.3s;}&:nth-child(11) {width: 22px;height: 22px;left: 42%;animation-duration: 4.2s;animation-delay: 0.3s;}&:nth-child(12) {width: 24px;height: 24px;left: 46%;animation-duration: 4.6s;animation-delay: 2.0s;}&:nth-child(13) {width: 22px;height: 22px;left: 48%;animation-duration: 3.8s;animation-delay: 3.2s;}&:nth-child(14) {width: 26px;height: 22px;left: 55%;animation-duration: 5.2s;animation-delay: 2.9s;}&:nth-child(15) {width: 26px;height: 22px;left: 52%;animation-duration: 4.9s;animation-delay: 4.2s;}}.button {width: 150px;height: 50px;background: #00ff6f;position: absolute;left: 50%;bottom: 0;transform: translate(-50%, 0);border-radius: 100px 100px 0 0;filter: blur(5px);}}.circle {width: 300px;height: 300px;position: absolute;top: 10px;left: 50%;margin-left: -150px;box-sizing: border-box;filter: blur(8px);animation: circleRotate 6s linear infinite;&::before{content: "";height: 200px;width: 200px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(0);background: #00ff6f;border-radius: 42% 38% 62% 49% / 45%;}&::after {content: "";width: 176px;height: 178px;background: #000;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}}}@keyframes hueRotate {0% {filter: contrast(15) hue-rotate(0);}100% {filter: contrast(15) hue-rotate(360deg);}}@keyframes circleRotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes moveUp {0% {bottom: 0;}100% {bottom: calc(100% - 265px);}}

End
不得不說css真的很神奇，效果就如真的一般，喜歡的點個贊支持下吧(●￣(?)￣●)
【女朋友都喜歡的css特效：手機充電】本文到此結束，希望對大家有所幫助。

继夫的玩弄H辣文的小说|女人与拘性猛交视频|精品欧美高清不卡高清|一起做亏亏的事情的视频|啦啦啦在线视频观看|望月直播下载ios版本|国产日韩欧美一区二区三区

女朋友都喜歡的css特效：手機充電