css实现拨开云雾遮罩动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现拨开云雾遮罩动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font-weight: 700; font-family: Lato; letter-spacing: 0.08em; background-color: #F0F4C3; } .content-wrapper { display: flex; flex-direction: column; align-items: center; } .image-wrapper { width: 100%; max-width: 640px; margin-right: auto; margin-left: auto; mask-image: url("//repo.bfw.wiki/bfwrepo/images/mask/mask_cloud_gzcgdf.png"); mask-size: 100% 100%; mask-mode: alpha; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/mask/mask_cloud_gzcgdf.png"); -webkit-mask-size: 100% 100%; -webkit-mask-mode: alpha; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; animation-name: mask-animation; animation-duration: 4s; animation-iteration-count: infinite; } img { width: 100%; height: auto; display: block; mask-image: url("//repo.bfw.wiki/bfwrepo/images/mask/mask_cloud_horizontal_n35us0.png"); mask-size: 100% 100%; mask-mode: alpha; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/mask/mask_cloud_.........完整代码请登录后点击上方下载按钮下载查看
网友评论0