CSS+HTML制作基本形状图案和动画

最新推荐文章于 2022-12-18 13:08:19 发布
最新推荐文章于 2022-12-18 13:08:19 发布
阅读量1.3k 收藏 16
点赞数 1
分类专栏： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45750195/article/details/104999221
版权
HTML 同时被 2 个专栏收录
19 篇文章 2 订阅
订阅专栏
CSS
16 篇文章 1 订阅
订阅专栏

今天讲解一下如何制作一些基本形状，先放最后的效果图，然后下面一一地讲解。
基本形状
在这里插入图片描述
动画
在这里插入图片描述

圆环

是通过两个正圆，然后设置它的border-radius属性、背景色以及外边距来实现中心对齐。具体的代码如下：
HTML部分

<!-- 圆环 -->
  <div class="one">
   <div class="one1"></div>
   <div class="one2"></div>
  </div>

CSS部分

.one1{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: aqua;
   }
   .one2{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: white;
    margin-left: 50px;
    margin-top: -150px;
   }

第一个正方形

这一部分是通过将盒子的各个边框设置成不同的颜色的方法来实现的。

  <!-- HTML部分 -->
  <div class="two"></div>
  
  <!-- CSS部分 -->
.two{
    height: 0px;
    width: 0px;
    border-top: 100px solid cadetblue;
    border-left: 100px solid darksalmon;
    border-right: 100px solid indianred;
    border-bottom: 100px solid rosybrown;
   }

第二、三个正方形

这一部分是通过设置了4个div标记，然后通过浮动来实现的对齐。至于他的样式，和第一个正方形设置样式的方法一样，只是这里的每一个小盒子有两条边是一样的颜色。第三个正方形和第二个一样，只是交换了盒子的位置。所以这里就省略了。
HTML部分

<!-- 第二个正方形 -->
  <div class="three">
   <div class="three1"></div>
   <div class="three2"></div>
  </div>
  <div style="float: left;">
   <div class="three3"></div>
   <div class="three4"></div>
  </div>

CSS部分

.three1{
    height: 0px;
    width: 0px;
    border-top: 50px solid darksalmon;
    border-left: 50px solid darksalmon;
    border-right: 50px solid indianred;
    border-bottom: 50px solid indianred;
   }
   .three2{
    height: 0px;
    width: 0px;
    border-top: 50px solid rosybrown;
    border-left: 50px solid skyblue;
    border-right: 50px solid rosybrown;
    border-bottom: 50px solid skyblue;
   }
   .three3{
    height: 0px;
    width: 0px;
    border-top: 50px solid moccasin;
    border-left: 50px solid darkseagreen;
    border-right: 50px solid moccasin;
    border-bottom: 50px solid darkseagreen;
   }
   .three4{
    height: 0px;
    width: 0px;
    border-top: 50px solid lightpink;
    border-left: 50px solid lightpink;
    border-right: 50px solid darkviolet;
    border-bottom: 50px solid darkviolet;
    }

五角星

这一部分主要是先绘制一个三角形，然后通过旋转角度，再使用伪类选择器after和before在去添加，然后设置样式。最后就完成了.

<!-- HTML部分-->
  <div class="four"></div>

<!-- CSS部分 -->
  .four:before{
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 80px solid red;
    position: absolute;
    top: -45px;
    left: -65px;
    color: white;
    display: block;
    content: "";
    transform:rotate(-35deg);
    }
   .four:after{
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    color: red;
    top: 3px;
    left: -105px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    content: "";
    transform:rotate(-70deg);
    }

动画

实现这个动画主要是通过设置鼠标悬停上去然后改变样式来实现的，然后从正方形变成圆形是通过border-radius属性，然后使用transition属性，最后就实现了这个效果；文字的移动，是先通过letter-spacing设置间隔，然后鼠标悬停时再设置他的效果。
HTML部分

<body>
  <div class="a"></div>
  <div class="b">
   <p>4亿网友共同信赖</p>
  </div>

CSS部分

.a{
    width: 200px;
    height: 200px;
    background-color: #5F9EA0;
   }
   .a:hover{
    background-color: #FFB6C1;
    border-radius: 50%;
    transition:all 3s;
   }
   .b{
    width: 100%;
    height: 300px;
    background-color: skyblue;
   }
   p{
    font-size: 70px;
    text-align: center;
    padding-top: 80px;
    letter-spacing: 40px;
    color: rgba(255,255,255,0.4);
   }
   p:hover{
    letter-spacing: 0px;
    color: rgb(255,255,255);
    transition: all 3s;
   }
开心肖肖乐-
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在html画一个自动缩放圆环,css3通过scale()、rotate()实现放大、旋转
weixin_36332394的博客
05-30 759
一、scale()方法缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。跟translate()方法一样，缩放scale()方法也有3种情况：(1)scaleX(x)：元素仅水平方向缩放(X轴缩放)；(2)scaleY(y)：元素仅垂直方向缩放(Y轴缩放)；(3)scale(x,y)：元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放)；1、...
html 如何改变图片形状,图形变换的三种方式是什么？
weixin_36225248的博客
06-03 2090
图形变换的三种方式1、平移平移，是指在同一平面内，将一个图形上的所有点都按照某个直线方向做相同距离的移动，这样的图形运动叫做图形的平移运动，简称平移。平移不改变图形的形状和大小。图形经过平移，对应线段相等，对应角相等，对应点所连的线段相等。 它是等距同构，是仿射空间中仿射变换的一种。它可以视为将同一个向量加到每点上，或将坐标系统的中心移动所得的结果。即是说，若是一个已知的向量，是空间中一点，平移。...
html img设置形状,图片img直接设置样式
weixin_39950812的博客
06-03 3712
图片Img除了配置宽、高大要直接应用属性外，还大要设置装备摆设边框。1、border配置图片边框border="2" alt="CSS5站点logo" />退出border属性为2，配置图片边框为2pximg加border配置边框从上看出一个题目，图片边框默认是彩色的，同时差距阅读器默认颜色也会有些差距，那若何设置装备摆设紧要的边框？整治这个需求就必要css实现。2、img直接设置装备摆设c...
html 如何改变图片形状,用css绘制各种形状
weixin_29344197的博客
06-03 3926
原标题：用css绘制各种形状自适应的椭圆1.自适应的椭圆实现方式是通过border-radius这个属性；border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不仅可以接受长度值，还能接收百分比的值。百分比的值会基于元素的尺寸进行解析，宽是水平半径的解析，高是垂直半径的解析。所以可以把两个半径的值都设置成50%；border-radius: 50% / 50%...
html：canvas画布绘图简单入门-1
彭世瑜的博客
12-25 2034
文档： https://www.runoob.com/tags/ref-canvas.html 示例1 绘制简单图形 <!-- 默认宽高：300x150 --> <canvas id="canvas" width="300" height="150"></canvas> <script> // 获取画布对象 let canvas = document.querySelector('#canvas');
CSS和HTML帧动画
Vapaus_的博客
10-25 163
css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、旋转（rotateIn|rotateOut）、翻转（flip）、淡入淡出（fadeIn|fadeOut）等动画效果。animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态。- 允许负值，（-2s 使动画马上开始，但跳过 2 秒进入动画)2.ease 默认值 慢速度开始--速度变快--慢速度结束。5.ease-in-out 以慢速度开始和结束的过渡效果。
使用HTML+css制作简易动画
fffffcc的博客
06-01 655
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title></title> <style type="text/css"> @keyframes mymovie{ 0%{ left:0px; top:0px; } 20%{ left:200px; top:0px; } 70%{
CSS3制作花纹图案动画特效.zip
最新发布
11-02
【标题】：“CSS3制作花纹图案动画特效” 在网页设计中，CSS3（层叠样式表第三版）的出现极大地丰富了网页的视觉效果。这个主题聚焦于如何使用CSS3来创建独特的花纹图案并实现动态效果。CSS3不仅提供了一系列新的...
HTML+CSS+JS实现酷炫情人节爱心动画特效.zip
11-08
在本项目中，CSS将用于定义爱心的外观，如颜色、大小、形状以及动画效果。常见的CSS属性如`transform`（用于应用2D或3D转换）、`animation`（定义动画序列）和`transition`（定义元素从一种样式过渡到另一种样式的...
H5前端_高级实战案例_特效动画咖啡选择（css+js）.rar
11-01
可以使用纯CSS实现加载动画，如旋转的菊花图案，或者结合JavaScript实现更复杂的动态效果，如模拟数据加载的进度条。 总的来说，"H5前端_高级实战案例_特效动画咖啡选择（css+js）"是一个综合性的学习资源，涵盖了...
html5利用canvas绘制各种基本图形工具.rar
08-27
用html5实现的简单在线画图工具，包括以下几个部分： 图像 单独的按钮组 保存图片、清除画布 操作组(所有按钮中只能选取一个) 工具(画笔、橡皮、油漆桶、吸管、文字、放大) 形状(画线、画圆圈、画方框、画三角形、画圆形、画方形) 粗细 （线宽只能选取一个） 1px、3px、5px、8px 颜色 (颜色只能选取一种) 红、绿、蓝、黄、白、黑、粉色、紫色、青色、橙色
H5彩色菱形图案圆球动画特效
07-24
总结，实现“H5彩色菱形图案圆球动画特效”需要掌握HTML5 Canvas API，理解如何绘制菱形，使用`requestAnimationFrame()`制作动画，以及通过JavaScript生成和控制颜色变化。这个特效展示了HTML5在网页动态图形和动画...
CSS3制作跳动心形动画代码.zip
05-14
总结一下，通过这个“CSS3制作跳动心形动画代码”项目，我们学习了如何使用CSS3选择器和伪元素构造复杂形状，以及如何运用`transform`、`transition`和`@keyframes`来实现动态效果。CSS3的这些特性让前端开发者能够...
HTML 画布入门（三）使用 HTML 画布创建形状
琴歌声声送我的博客
12-18 1777
我们可以使用许多不同的功能来绘制新的形状，这些函数可以通过 we set 使用。遵循类似的格式，只是它会创建一个自动描边的矩形。我们用来确定三角形的起始位置，然后根据需要绘制线条来绘制我们想要的三角形的形状。我们还谈到了一个事实，可用于在画布上的任何地方绘制线条，使我们能够制作更复杂的形状，如六边形和八边形。如您所见，所有这些函数都遵循相同的格式 - 它们在开始位置具有坐标，以及画布中的宽度和高度。在本指南中，我们介绍了如何在HTML画布中制作一些简单的形状：正方形，矩形，圆形和三角形。
html 形状div,div+css实现各种形状（精心整理）
weixin_30444517的博客
06-03 3475
1.正方形.div {width: 100px;height: 100px;background: red;}2.矩形.div {width: 200px;height: 100px;background: red;}3.圆形.div {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-borde...
html图片形状,用CSS代码写出的各种形状图形的方法
weixin_34698515的博客
06-07 1309
一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。1.正方形#square {width: 100px;height: 100px;background: red;}2.长方形#rectangle {width: 200px;height: 100px;background: red;}3.左上三角#triangle-topleft {width: 0;h...
HTML+css制作简易图片库
qq_32814941的博客
05-11 3179
CSS<style> div.img { float:left; margin: 10px; border:1px solid #bebebe; } div.img img{ display: inline; border:1px solid #bebebe; margin:5px
html中图片椭圆,CSS3技巧之形状（椭圆）
weixin_35959366的博客
06-04 1758
回顾那个只能用图片展示形状的日子，之前接触前端的小伙伴们，大家一定会有颇多感触，好在现在我们可以使用纯CSS实现更多想要的形状效果，今天小编来整理一下，希望对大家有所帮助，也方便自己后期的查看。自适应的椭圆使用border-radius制作一个圆很简单，只要给任何正方形元素设置固定宽高及一半长度以上的border-radius，就可以得到圆形圆形椭圆在实际开发中可能更多的是让元素根据内容自动调增，...
HTML实现banner图切换
weixin_45750195的博客
05-06 9167
首先呢，我们做出来的效果去下图，这里只是简单的写的文字，如果需要更好的话，可以自己添加或修改。（这里图片大小没有统一，有一丢丢影响效果） 接下来我们来看看详细的代码 HTML部分： 这里主要设置了三个盒子并列。一个存放banner图、一个是左侧的黑色背景还有一个是左侧的文字。（因为这里是设置了黑色盒子的背景透明度，为了实现背景透明、文字不透明，所以这里用的是两个盒子通过设置位置来实现的。） 存放...
用HTML+CSS+JS 做一个闪动的心
09-09
可以用 HTML、CSS 和 JavaScript 来制作一个闪动的心形图案。下面是一个示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>闪动的心</title> <style> body { background-color: black; } .heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 90px; background-color: #ff69b4; transform-origin: center; animation: heartbeat 1s ease-in-out infinite; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background-color: #ff69b4; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 解释一下代码： - HTML 中只有一个 `div` 元素，用来包裹心形图案。 - CSS 中用了伪元素 `:before` 和 `:after` 来实现左右两侧的半圆形，通过旋转和变形来调整角度和形状。 - `transform-origin` 属性用来设置变换的基点，以图案的中心为基点进行动画缩放。 - `animation` 属性用来设置动画效果，指定 `heartbeat` 关键帧动画，并设置持续时间为 1 秒、缓动方式为 `ease-in-out`，并设置无限循环。 这样就可以制作一个闪动的心形图案了，效果如下所示： ![闪动的心形图案](https://i.imgur.com/hKMkCOG.gif)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值