广告
返回顶部
首页 > 资讯 > 前端开发 > html >怎么用CSS3绘制一个月食图案
  • 632
分享到

怎么用CSS3绘制一个月食图案

css3 2022-10-19 07:10:31 632人浏览 薄情痞子
摘要

本篇内容主要讲解“怎么用css3绘制一个月食图案”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用CSS3绘制一个月食图案”吧!画个月亮嘛,还是尝试用一个di

本篇内容主要讲解“怎么用css3绘制一个月食图案”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用CSS3绘制一个月食图案”吧!


画个月亮嘛,还是尝试用一个div来实现,主div做背景黑夜,before做月亮,after做挡住月亮的黑影。
用position控制位置,用animation控制动画。

CSS Code复制内容到剪贴板

  1. .moonback{   

  2.     width: 600px;   

  3.     height: 600px;   

  4.     background-color: #000;   

  5.     margin: 0 auto;   

  6.   

  7.     position: relative;   

  8.   

  9.   }   

  10.   .moonback::before{   

  11.     content: ",";   

  12.     display: block;   

  13.     position: absolute;   

  14.     left: 200px;   

  15.     top: 100px;   

  16.   

  17.     width: 200px;   

  18.     height: 200px;   

  19.     background-color: #ff0;   

  20.     border-radius: 100px;   

  21.   }   

  22.   .moonback::after{   

  23.     content: " ";   

  24.     display: block;   

  25.     position: absolute;   

  26.     left: 26px;   

  27.     top: 0px;   

  28.   

  29.     width: 200px;   

  30.     height: 200px;   

  31.     background-color: #000;   

  32.     border-radius: 100px;   

  33.   

  34.     -WEBkit-animation: 8s dog linear infinite;   

  35.     -moz-animation: 8s dog linear infinite;   

  36.     animation: 8s dog linear infinite;   

  37.   }   

  38.   

  39.   @-webkit-keyframes dog {   

  40.     0% {    

  41.       left:27px;   

  42.       top: 0px;   

  43.     }   

  44.     100% {    

  45.       left: 399px;   

  46.       top: 216px;   

  47.     }   

  48.   }   

  49.   @-moz-keyframes dog {   

  50.     0% {    

  51.       left:27px;   

  52.       top: 0px;   

  53.     }   

  54.     100% {    

  55.       left: 399px;   

  56.       top: 216px;   

  57.     }   

  58.   }   

  59.   @keyframes dog {   

  60.     0% {    

  61.       left:27px;   

  62.       top: 0px;   

  63.     }   

  64.     100% {    

  65.       left: 399px;   

  66.       top: 216px;   

  67.     }   

  68.   }  

最好body也设成背景黑,那就更好了~

等等,看不到星星的天空,缺少了幸福感。
正好偷师一下,一个div里的美队盾做法,直接用★
也给个动画效果,放大缩小~

CSS Code复制内容到剪贴板

  1. .star{   

  2.     position: absolute;   

  3.   }   

  4.   .star::before{   

  5.     content: "★";   

  6.     display: block;   

  7.     position: absolute;   

  8.     left: 10px;   

  9.     top: 20px;   

  10.   

  11.     width: auto;   

  12.     height: auto;   

  13.     color: #fff;   

  14.     -webkit-transfORM:scale(0.5);   

  15.     -moz-transform:scale(0.5);   

  16.     transform:scale(0.5);   

  17.   

  18.     -webkit-animation: 1s starlight linear infinite;   

  19.     -moz-animation: 1s starlight linear infinite;   

  20.     animation: 1s starlight linear infinite;   

  21.   }   

  22.   .star::after{   

  23.     content: "★";   

  24.     display: block;   

  25.     position: absolute;   

  26.     left: 40px;   

  27.     top: 120px;   

  28.   

  29.     width: auto;   

  30.     height: auto;   

  31.     color: #fff;   

  32.     -webkit-transform:scale(0.5);   

  33.     -moz-transform:scale(0.5);   

  34.     transform:scale(0.5);   

  35.   

  36.     -webkit-animation: 2s starlight linear infinite;   

  37.     -moz-animation: 2s starlight linear infinite;   

  38.     animation: 2s starlight linear infinite;   

  39.   }   

  40.   

  41.   @-webkit-keyframes starlight {   

  42.     0% {    

  43.       -webkit-transform:scale(0.5);   

  44.     }   

  45.     100% {    

  46.       -webkit-transform:scale(0.1);   

  47.     }   

  48.   }   

  49.   @-moz-keyframes starlight {   

  50.     0% {    

  51.       -moz-transform:scale(0.5);   

  52.     }   

  53.     100% {    

  54.       -moz-transform:scale(0.1);   

  55.     }   

  56.   }   

  57.   @keyframes starlight {   

  58.     0% {    

  59.       transform:scale(0.5);   

  60.     }   

  61.     100% {    

  62.       transform:scale(0.1);   

  63.     }   

  64.   }  

 效果图如下:
怎么用CSS3绘制一个月食图案

 效果页面>>

完毕,嗯,再给月亮加个颜色渐变?

到此,相信大家对“怎么用CSS3绘制一个月食图案”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: 怎么用CSS3绘制一个月食图案

本文链接: https://www.lsjlt.com/news/77896.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 怎么用CSS3绘制一个月食图案
    本篇内容主要讲解“怎么用CSS3绘制一个月食图案”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用CSS3绘制一个月食图案”吧!画个月亮嘛,还是尝试用一个di...
    99+
    2022-10-19
    css3
  • 怎么用HTML和CSS3绘制基本卡通图案
    这篇文章主要讲解了“怎么用HTML和CSS3绘制基本卡通图案”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用HTML和CSS3绘制基本卡通图案”吧!纯H...
    99+
    2022-10-19
    css3 html
  • 使用css3怎么绘制一个半圆弧线
    使用css3怎么绘制一个半圆弧线?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。css代码.circle1 {    wid...
    99+
    2023-06-08
  • CSS3中怎么绘制一个圆角矩形
    CSS3中怎么绘制一个圆角矩形,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。随着网络的发展,CSS 也在不断的完善,充分吸取多...
    99+
    2022-10-19
    css3
  • CSS3中怎么利用border-radius绘制一个太极
    本篇文章给大家分享的是有关CSS3中怎么利用border-radius绘制一个太极,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。太极图bord...
    99+
    2022-10-19
    css3 border-radius
  • 使用JavaScript怎么绘制一个饼图
    这篇文章将为大家详细讲解有关使用JavaScript怎么绘制一个饼图,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。实现代码JavaScriptvar canvas =&n...
    99+
    2023-06-06
  • 使用canvas怎么绘制一个太极图
    今天就跟大家聊聊有关使用canvas怎么绘制一个太极图,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。css样式代码.animation{  width: ...
    99+
    2023-06-09
  • 使用matplotlib怎么绘制一个阶梯图
    这篇文章将为大家详细讲解有关使用matplotlib怎么绘制一个阶梯图,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。step函数概述step函数用于绘制阶梯图。根据源码可知,step函数是对...
    99+
    2023-06-06
  • 使用canvas怎么绘制一个心电图
    这期内容当中小编将会给大家带来有关使用canvas怎么绘制一个心电图,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。思路:模拟点(如果你有真实的数据,那就是把数据幻化成canvas对应的坐标点)模拟点时注意...
    99+
    2023-06-09
  • 使用python怎么绘制一个折线图
    这篇文章将为大家详细讲解有关使用python怎么绘制一个折线图,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。python的五大特点是什么python的五大特点:1.简单易学,开发程序时,专注...
    99+
    2023-06-14
  • 使用python怎么绘制一个火山图
    今天就跟大家聊聊有关使用python怎么绘制一个火山图,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。python的数据类型有哪些python的数据类型:1. 数字类型,包括int(整...
    99+
    2023-06-14
  • 利用Android怎么绘制一个太极图
    这篇文章将为大家详细讲解有关利用Android怎么绘制一个太极图,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Android是通过graphics类来显示2D图形的。其中graphics中包...
    99+
    2023-05-31
    android roi
  • CSS3怎么绘制一个小雨滴动态效果
    本篇内容介绍了“CSS3怎么绘制一个小雨滴动态效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!第一步通过...
    99+
    2022-10-19
    css3
  • css3怎么绘制一个圆圆的loading转圈动画
    小编给大家分享一下css3怎么绘制一个圆圆的loading转圈动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如何绘制一个圆圆的loading圈小程序里需要一个...
    99+
    2023-06-08
  • 使用R语言怎么绘制一个直方图
    使用R语言怎么绘制一个直方图?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。语法使用R语言创建直方图的基本语法是hist(v,main,xlab,xlim,ylim,brea...
    99+
    2023-06-14
  • 利用R语言怎么绘制一个折线图
    这篇文章将为大家详细讲解有关利用R语言怎么绘制一个折线图,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。R语言中的plot()函数用于创建折线图。语法在R语言中创建折线图的基本语法是 -plo...
    99+
    2023-06-14
  • linux中怎么使用Arduino制作一个绘图仪
    这篇文章主要介绍了linux中怎么使用Arduino制作一个绘图仪,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。由于我是一个很怀旧的人,我真的很喜欢最初的 Arduino U...
    99+
    2023-06-16
  • 使用R语言怎么绘制一个折线图
    这篇文章给大家介绍使用R语言怎么绘制一个折线图,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。在R中的通过使用plot()函数来创建线形图,语法如下:plot(v,type,col,xlab,ylab)参数描述如下:v ...
    99+
    2023-06-14
  • 使用R语言怎么绘制一个饼状图
    今天就跟大家聊聊有关使用R语言怎么绘制一个饼状图,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。什么是R语言R语言是用于统计分析、绘图的语言和操作环境,属于GNU系统的一个自由、免费、...
    99+
    2023-06-14
  • 使用Python怎么绘制一个棒棒糖图表
    本篇文章给大家分享的是有关使用Python怎么绘制一个棒棒糖图表,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。首先读取一下数据。import pandas ...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作