CSS实现太阳出来特效
<!DOCTYPE html>
<html>
<head>
<style>html {
text-align: center;
background: #f4c042;
}
svg {
width: 400px;
height: 300px;
}
* {
stroke: #765d20;
stroke-linecap: round;
vector-effec: non-scaling-stroke;
}
[id='line'] {
stroke-width: 3;
}
text {
font: .875em century gothic, verdana, sans-serif;
}
[id='mover'] {
animation: sun-motion 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}
[id='main'] {
fill: transparent;
stroke-width: 7;
}
[id='eyes'] {
animation: eye-motion 5s ease-out infinite;
}
[id='eyes'] circle {
fill: #765d20;
}
[id='ray'] {
stroke-width: 4;
}
[id='rays'] {
animation: rot 5s linear infinite;
}
@keyframes rot {
to {
transform: rotate(0.25turn);
}
}
@keyframes eye-motion {
0%, 20%, 49%, 100% {
transform: translate(-13px);
}
21%, 25%, 29%, 47% {
transform: translate(13px) scaleY(1);
}
27% {
transform: translate(13px) scaleY(0);
}
48% {
transform: translate(0);
}
}
@keyframes sun-motion {
0%, 99%, 100% {
transform: translateY(-16px);
}
50% {
transform: translateY(-29px);
}
52%, 98% {
transform: translate(4px) scaleY(1.25);
}
53%, 97% {
transform: translateY(23px);
}
}
</style>
</head>
<body>
<svg viewBox="-200 -150 400 300">
<defs>
<line id="ray" x1="-5" x2="5"></line>
<clipPath id="cp">
<rect x="-200" y="-150" width="400" height="150"></rect>
</clipPath>
</defs>
<line id="line" x1="-76" x2="76"></line>
<text text-anchor="middle" y="45">sunrise</text>
<g id="sun" clip-path="url(#cp)">
<g id="mover">
<circle id="main" r="50"></circle>
<g id="eyes">
<circle r="3" cx="-13"></circle>
<circle r="3" cx="13"></circle>
</g>
<g id="rays">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
transform="rotate(315) translate(70)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
transform="rotate(270) translate(70)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
transform="rotate(225) translate(70)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
transform="rotate(180) translate(70)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
transform="rotate(135) translate(70)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
transform="rotate(90) translate(70)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
transform="rotate(45) translate(70)"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ray"
transform="rotate(0) translate(70)"></use>
</g>
</g>
</g>
</svg>
<script type="text/javascript">/*Javascript代码片段*/</script>
</body>
</html>
.
相关推荐
【CSS3卡通太阳阳光照射动画特效】是一种利用CSS3的强大功能来实现的视觉效果，它在网页设计中常用于增加互动性和视觉吸引力。这个动画特效通过细致的样式定义和动态变换，模拟出一个可爱且生动的太阳形象，伴随着...
【标题】"纯CSS3地球绕太阳自转特效"是一个基于CSS3技术实现的动态视觉效果，它模拟了地球在太阳周围的自转运动。这个特效不仅展示了CSS3的强大功能，而且为网页设计提供了创新的交互体验。通过CSS3的属性和方法，...
在本资源中，我们关注的是一个使用纯CSS技术创建的卡通风格动态发光太阳特效动画。这个项目展示了如何利用CSS3的动画属性和选择器来构建一个视觉上吸引人的交互式元素，无需JavaScript的介入。接下来，我们将深入...
在本项目"CSS3实现太阳星系运转特效.zip"中，我们主要探讨如何利用前端技术，特别是CSS3，来创建一个动态的、视觉上引人入胜的太阳系模型。这个模型展示了行星围绕太阳的旋转效果，使得网页设计更加生动和互动。下面...
本资源"纯CSS3卡通太阳照射动画特效.zip"就是这样一个例子，它提供了一种无需JavaScript，仅依赖CSS3实现的太阳光发射动画特效。 首先，让我们深入了解CSS3中的关键帧动画（@keyframes）。这个特性允许我们定义一个...
为了实现"纯CSS3太阳白云早安主题特效"，开发者可能运用了以下CSS3特性： 1. **渐变（Gradients）**：用于创建太阳的光晕效果。 2. **径向渐变（Radial Gradients）**：可以模拟太阳的中心明亮、边缘暗淡的效果。 3....
【标题】"纯CSS3蓝天白云太阳动画特效.zip"是一个包含使用纯CSS3技术实现的动态视觉效果资源包。这个特效设计旨在为网页背景添加生动的蓝天、白云和太阳元素，创造出一种宁静、自然的氛围，提升用户体验。CSS3是CSS...
【标题】"纯css3太阳加载中动画特效.zip"是一个基于CSS3技术实现的动态加载效果，主要用于在网页内容加载时提供视觉反馈，提升用户体验。CSS3是 Cascading Style Sheets（层叠样式表）的第三版，是Web设计领域的重要...
【CSS3太阳系新年倒计时动画特效】是一种利用现代CSS3技术和JavaScript库jQuery实现的网页动态效果。这个特效将新年倒计时与太阳系的天文现象相结合，为用户呈现一个既科技感又富有创意的视觉体验。在网页中，数字...
【CSS3地球绕太阳转动场景动画特效】是一个利用纯CSS3技术实现的视觉效果，它展示了地球围绕太阳的自转运动。在Web开发领域，这样的动画可以为网站增添互动性和吸引力，使用户对页面产生更深的兴趣。下面我们将深入...
"CSS3行星围绕太阳运动动画特效"是一个利用CSS3的强大特性来实现的互动展示，它模拟了行星围绕太阳的动态轨迹，为用户带来生动的视觉体验。这个效果通常用于网站的背景或者互动元素，可以提升用户的浏览兴趣和页面的...
总结来说，“纯CSS3太阳光移动遮罩动画特效”是一种利用CSS3的新特性实现的动态效果，它无需JavaScript，即可为网页增添视觉魅力。通过渐变、变换和动画的巧妙结合，开发者可以创造出各种生动的视觉体验，提升用户的...
【标题】：“纯css3实现天狗食月日食动画特效” 在网页设计中，动态效果的运用可以提升用户体验，使网页更具吸引力。本资源提供了一种纯CSS3技术实现的“天狗食月”（月食）和“日食”动画特效。这种特效常见于网站...
这个“CSS3实现动态天气小图标特效.zip”文件提供了一种利用CSS3来创建动态天气图标的解决方案。这样的效果可以增强网页的交互性和用户体验，尤其适用于天气预报网站或者与气象相关的应用。 首先，我们要理解CSS3的...
【纯CSS太阳系资源管理器】是一个利用CSS技术构建的互动式太阳系模型，它无需JavaScript或其他编程语言，仅依赖CSS的样式和动画效果来呈现一个动态、视觉上吸引人的宇宙场景。这个项目展示了CSS的强大之处，特别是在...
在CSS3技术的支持下，我们可以创造出丰富多彩的2D宇宙星空元素背景动画特效，为网站或应用增添独特的视觉体验。这个特效包含多个宇宙元素，如太阳、月球、地球、金星以及流星雨，它们在背景中动态展示，给用户带来...
总结起来，这个项目展示了CSS3的强大能力，通过纯CSS实现动态的场景切换，为网页添加了引人入胜的用户体验。对于学习和探索CSS3动画以及交互设计的开发者来说，这是一个极好的实例。使用者可以通过阅读"使用须知.txt...
在纯CSS3实现的日食光晕特效中，我们可能用到的关键特性有： 1. **渐变（Gradients）**：CSS3支持线性渐变和径向渐变，可以用来模拟光晕从中心向外扩散的效果。通过调整角度和颜色点，可以创造出日食时太阳被遮挡而...
在本文中，我们将深入探讨“纯CSS3太阳加载中动画特效”这一主题，这是一种利用CSS3的关键帧（keyframes）属性来创建创新的太阳图标加载动画的技术。 首先，我们来理解“纯CSS3”意味着什么。纯CSS3是指完全依赖于...
这个特效通过纯CSS3技术实现，展示了蓝天下白云悠然飘动的动态背景，为网页增添了一抹自然的色彩。 首先，让我们了解CSS3中的关键帧动画（@keyframes）——这是创建此特效的核心。`@keyframes`规则定义了一个动画的...