css单标签,自己练习的css动画（单标签）

最新推荐文章于 2022-11-25 14:52:08 发布
最新推荐文章于 2022-11-25 14:52:08 发布
阅读量238 收藏
点赞数
文章标签： css单标签

筷子css

.chopsticks{

position: absolute;

width: 10px;

height: 250px;

background-color: #bb8855;    left: 50%;

border-radius: 3px;

box-shadow: 0 0 2px 1px rgba(0,0,0,0.1), 0 -5px 1px 0 rgba(0,0,0,0.1) inset;

}

.chopsticks::before{

content: '';

position: absolute;

width: 10px;

height: 250px;

background-color: #bb8855;    left: 15px;

border-radius: 3px;

box-shadow: 0 0 2px 1px rgba(0,0,0,0.1), 0 -5px 1px 0 rgba(0,0,0,0.1) inset;

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

鸡蛋css

.egg{

position: absolute;

top: 20px;        left: 35px;

width: 80px;

height: 100px;

z-index: 7;

background-color: #fff;

transform:rotate(20deg);

border-radius: 50%/60% 60% 40% 40%;

}

.egg::before{

content: '';

position: absolute;

top: 30%;    left: 21%;

width: 57%;

height: 51%;

background: #FC0;

border-radius: 50%/56% 60% 41% 44%;

box-shadow: 0 0 1px 1px #f90,0 0 1px 1px rgba(255, 153, 0, 0.5) inset;

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

勺子css

.scoop{

position: absolute;

height: 200px;

width: 20px;

background-color: #bb8855;    left: 50%;

border-radius: 8px;

box-shadow: 0 0 1px 1px rgba(0,0,0,0.1),0 -5px 1px 1px rgba(0,0,0,0.1) inset;

top: 10%

}

.scoop::before{

content: '';

position: absolute;

height: 70px;

width: 59px;

background-color: #bb8855;    left: -94%;

top: -2%;

border-radius: 50%/60% 60% 40% 40%;

box-shadow: 0 0 1px 1px rgba(0,0,0,0.1), 0 -3px 3px 2px rgba(0,0,0,0.1) inset;

}

.scoop::after{

content: '';

position: absolute;

height: 14px;

width: 6px;

background-color: rgba(0,0,0,0.1);    left: 49%;

top: 17%;

border-radius: 50%/68% 53% 40% 40%;

box-shadow: 0 0 10px 8px rgba(0,0,0,0.1);

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

爱心css

LOVE

.love{

position: absolute;

width: 100px;

height: 100px;

background-color: #c03;    left: 40%;

top: 30%;

transform: translate(-50%,-50%) rotate(45deg);

transform: rotate(45deg);

text-align: center;

line-height: 100px;

}

.love::before,.love::after{

content: '';

position: absolute;

width: 100px;

height: 100px;

background-color: #c03;

border-radius: 50%;    left: -50%;

z-index: -1;

}

.love::after{

top: -50%;    left: 0;

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

气泡css

气泡

.qipao{

position: absolute;

width: 200px;

height: 100px;

background-color: green;

border-radius: 7px;

top: 20%;    left: 40%;

text-align: center;

line-height: 100px;

}

.qipao::before{

content: '';

position: absolute;

bottom: 0;    left: 50%;

border: 34px solid transparent;

border-top-color: green;

border-bottom: 0;

border-left: 0;

margin: 0 0 -34px -17px;

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

缺四角css

缺四角

.angle{

position: absolute;

width: 200px;

height: 150px;    left: 40%;

top: 20%;

background-color: pink;

text-align: center;

line-height: 150px;

}

.angle{

background:

linear-gradient(45deg,transparent 15px, pink 0) left bottom,

linear-gradient(-45deg,transparent 15px,pink 0) right bottom,

linear-gradient(135deg,transparent 15px,pink 0) left top,

linear-gradient(-135deg,transparent 15px,pink 0) right top;

background-size: 50% 50%;

background-repeat: no-repeat;

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

缺圆角css

缺圆角

.arc{

position: absolute;

transform: translate(-50%,-50%);

top: 50%;    left: 50%;

width: 200px;

height: 150px;

background-color: pink;

text-align: center;

line-height: 150px;

}

.arc{

background:

radial-gradient(circle at left bottom,transparent 15px,pink 0) left bottom,

radial-gradient(circle at right bottom,transparent 15px,pink 0) right bottom,

radial-gradient(circle at left top,transparent 15px,pink 0) left top,

radial-gradient(circle at right top,transparent 15px,pink 0) right top;

background-size: 50% 50%;

background-repeat: no-repeat;

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

梯形css

梯形

.tixing{

position: absolute;

top:50%;      left: 50%;

transform:translate(-50%,-50%);

width: 160px;

padding: 60px;

text-align: center;

color: white;

}

.tixing::before{

content:"";

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

transform:perspective(40px) scaleY(1.3) rotateX(5deg);

transform-origin: bottom;

background:deeppink;

z-index:-1;

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

圆盘css

圆盘

.pie{

position: absolute;

transform: translate(-50%,-50%);

top: 50%;

left: 50%;

width: 180px;

height: 180px;

text-align: center;

line-height: 180px;

background-color: pink;

background-image: linear-gradient(to right, transparent 50%, #655 0);

border-radius: 50%;

cursor: pointer;

overflow: hidden;

}

.pie::before{

position: absolute;

content: '';

background-color: inherit;

width: 50%;

height: 100%;

left: 50%;

top: 0;

z-index: -1;

transform-origin: left;

transform: rotate(45deg);

}

.pie:hover::before{

transform: rotate(1000deg);

transition: transform 5s;

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

平行四边形css

平行四边形

.sibianxing{

position: absolute;

top: 50%;    left: 50%;

transform: translate(-50%,-50%);

width: 200px;

height: 150px;

line-height: 150px;

text-align: center;

}

.sibianxing::before{

content: '';

position: absolute;

z-index: -1;

background-color: pink;    left: 0;right: 0;top: 0;bottom: 0;

transform: skew(.08turn);

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

折角css

折角

.zhejiao{

position: absolute;

width: 200px;

height: 200px;

transform: translate(-50%,-50%);

top: 50%;    left: 50%;

text-align: center;

line-height: 200px;

background-color: pink;

border-radius: 10px;

background:linear-gradient(-150deg,transparent 1.5em, pink 0);

}

.zhejiao::before{

content: '';

position: absolute;

background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;

top: 0;    right: 0;

width: 30px;

height: 47px;

border-bottom-left-radius: 10px;

transform: translateY(-20px) rotate(-28deg);

transform-origin: bottom right;

box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

三根线css

.warp{width: 170px;height: 150px;position: relative; margin-left: 50%; margin-top: -15%; transform: translate(-50%,-50%);background-color: pink;}

.one, .two, .three{width: 130px;height: 2px;margin: 0 auto; background-color: white; position: absolute;top: 20%;left: 10%;transition:all 1s;}

.two{top: 50%;}

.three{top: 80%;}

.warp:hover .one{top: 80%;opacity: 0;}

.warp:hover .two{top: 20%;transform: rotate(45deg); transform-origin: left; width: 126px}

.warp:hover .three{transform: rotate(-45deg);transform-origin: left; width: 126px;}

AAffA0nNPuCLAAAAAElFTkSuQmCC

gif.gif

漂浮的云css

乌云

.cloud{

position: absolute;

top: 50%;    left: 50%;

transform: translate(-50%,-50%);

width: 150px;

height: 200px;

text-align: center;

background-color: pink;

border-radius: 10px;

}

.cloud::before{

position: absolute;

content: '';

background-color: white;

width: 30px;

height: 30px;

top: 40%;    left: 33%;

z-index: 2;

border-radius: 50%;

transform: translate(-50%,-50%);

box-shadow: 19px 6px 0px 1px white, 14px -13px 0 1px white, 37px -6px 0px -2px white, 52px 4px 0 -4px white, 37px 7px 0 -3px white, 20px -20px #ddd, 38px -12px 0 -1px #ddd, 54px -3px 0 -4px #DDD;

animation: cloud-move 3s ease-in-out infinite;

}

.cloud::after{

content: '';

background-color: rgba(0,0,0,0.6);

position: absolute;

top: 70%;    left: 50%;

width: 50px;

height: 6px;

border-radius: 50%;

transform: translate(-50%,-50%);

animation: shadow 3s ease-in-out infinite;

}

@keyframes cloud-move{    50%{transform: translate(-50%,-10%)};    100%{transform: translate(-50%,-50%);};

}

@keyframes shadow{    50%{transform: translate(-50%,-50%) scale(0.6);background-color: rgba(0,0,0,0.3)}    100%{transform: translate(-50%,-50%) scale(1);background-color: rgba(0,0,0,0.6)}

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

gif.gif

chrome css

.chrome{

position: absolute;

top: 50%;left: 50%;

width: 180px;height: 180px;

transform: translate(-50%, -50%);

box-shadow:0 0px 4px #999,0 0 2px #ddd inset;

border-radius:50%;

background-image:

radial-gradient(#4FACF5 0%,#2196F3 28%, transparent 28%),

radial-gradient(#fff 33%,transparent 33%),

linear-gradient(-50deg,yellow 34%, transparent 34%),

linear-gradient(60deg,green 34%,transparent 34%),

linear-gradient(176deg,red 34%,transparent 34%),

linear-gradient(360deg,green 34%,transparent 34%),

linear-gradient(261deg,yellow 34%,transparent 34%),

linear-gradient(98deg,red 34%,transparent 34%);

background-position:0 0;

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

image.png

乱码的字css

CSSTextMagic

.text-magic{

position: absolute;

top: 50%;left: 50%;

transform: translate(-50%, -50%);

width:300px;

font-size:36px;

font-family:Raleway, Verdana , Arial;

}

.white{

position:absolute;          left:0;

top:15px;

width:100%;

height:3px;

background:#fff;

z-index:4;

animation:whiteMove 3s ease-out infinite;

}

.text-magic:before{

content:attr(data-word);

position:absolute;

top:0;          left:0.5px;

height:0px;

color:rgba(0,0,0,.9);

overflow:hidden;

z-index:2;

animation:redShadow 1s ease-in infinite;

-webkit-filter:contrast(200%);

text-shadow:0.1px 0 0 red;

}

.text-magic:after{

content:attr(data-word);

position:absolute;

top:0;          left:-3px;

height:36px;

color:rgba(0,0,0,.8);

overflow:hidden;

z-index:3;

background:rgba(255,255,255,.9);

animation:redHeight 1.5s ease-out infinite;

-webkit-filter:contrast(200%);

}

@keyframes redShadow{          20%{

height:32px;

}          60%{

height:6px;

}          100%{

height:42px;

}

}

@keyframes redHeight{          20%{

height:42px;

}          35%{

height:12px;

}          50%{

height:40px;

}          60%{

height:20px;

}          70%{

height:34px;

}          80%{

height:22px;

}          100%{

height:0px;

}

}

@keyframes whiteMove{          8%{

top:38px;

}          10%{

top:8px;

}          12%{

top:42px;

}          99%{

top:36px;

}

}

AAffA0nNPuCLAAAAAElFTkSuQmCC

gif.gif

作者：littleyu

链接：https://www.jianshu.com/p/c3d8390ef0b3

柳编
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS动画标签
u011541292的博客
09-26 561
 @keyframes  规则用于创建动画。它的三个必要的值如下  animationname：定义动画的名称；  keyframes-selector：必需。动画时长的百分比；  css-styles：一个或多个合法的 CSS 样式属性；  animation-name 规定需要绑定到选择器的 keyframe 名称。 animation  animation-durati
Css标签大全
06-23
Css标签大全<br>Css标签大全
css单标签,单标签！纯CSS实现动态晴阴雨雪
weixin_39617473的博客
08-03 207
封面.jpg1 引言本期分享一下如何仅用CSS3，实现单标签的动态晴阴雨雪。技术关键点就是“单标签”和“纯CSS”。先看下最终效果：效果预览.gif再看看HTML代码：没错，就是这么任性，每个动图就一个标签，而且无图无JS！下面就来详细介绍下技术实现。涉及到的关键CSS3属性：transform：用于移位、旋转、缩放效果box-shadow：利用投影实现图像的复制(关键！)clip-path：基于...
css单标签,css3标签设计
weixin_39939276的博客
08-03 161
设计了三种常用的文章标签，第一个是圆角效果比较简单，主要思路就是非等的对称的圆角；第二个主要应用了ribbon，使用:before生成；第三个就稍微麻烦点，三角加上一个小圆点，使用:before和:after生成，看来不错啊。主要css代码：/* demo1 */.demo1 .tag a{background-color:#93BD17;color:#fff;border-radius:8px ...
【CSS单标签和meta属性】
魔术师
05-20 1705
【CSS单标签和meta属性】 CSS单标签和meta属性 meta属性 meta属性 单标签 meta、hr、br、img、link、input 既是行内属性标签又可以设置宽高的标签 a、img、ins、del
animationsAndTransforms:练习CSS动画和变换
04-04
本次练习的主题“animationsAndTransforms”聚焦于CSS中的两大重要特性：CSS动画（CSS Animations）和CSS变换（CSS Transforms）。这两个特性为网页元素提供了动态效果，使用户体验更加生动有趣。 **CSS 动画 (CSS ...
Html/CSS动画效果个人练习（5）
01-08
CSS动画效果个人练习第五天 Html源代码 comic2 CSS源代码 * { padding: 0; margin: 0; } body { background-color: rgb(41, 45, 62); } .container { font-size: 120px; font-weight: bold; text-transform...
萧大 spa 自己练习 css HTML 文件spa.rar
02-03
萧大的练习可能包括了如何组织HTML结构，使其更适合单页面应用的需求，例如使用`<div>`元素创建不同区域，以及使用`<script>`和`<link>`标签引入JavaScript和CSS资源。 接着，CSS（Cascading Style Sheets）则是...
div css练习div css练习div css练习div css练习
04-20
本练习旨在通过使用div元素结合CSS来提升对页面布局和样式的理解与应用能力。 首先，`div`元素在HTML中是一个通用的容器，它可以包含其他HTML元素，常用于组织和划分页面结构。通过设置div的样式，我们可以控制其在...
Demo_CSS:CSS特效练习
03-15
CSS动画则能创建更复杂的效果，如旋转、缩放或移动元素。伪类如`:hover`, `:active`, 和 `:focus`则可以改变元素在特定状态下的样式。 此外，CSS3引入了新的选择器，如属性选择器、后代选择器、兄弟选择器等，使得...
表单标签动画（CSS）
sunqian_happy的博客
01-13 673
搭建根基 我们同样使用了haml来简化html书写。 #container -(1..15).each do %div.row %label %input{:type=>"text"} %span姓名 %label %input{:type=>"text"} %span性别 %l
CSS动画
符号的博客
08-03 229
transition 过渡动画/*过渡动画效果 1：什么属性参与过渡效果 2：过渡动画时间 3：过渡效果*/ transition: background 3s ease;实例：鼠标悬浮时，背景变蓝，css部分div { width:100px; height:100px; transition: bac
css3 动画化制作animation标签总结与实践
weixin_44724323的博客
04-16 724
这篇文章讲的是我学习animation之后的相关理解与实践
css常用标签
fanbutuan的博客
09-12 1540
css常用属性标签
css常用样式
denglangcheng82460的博客
04-11 486
字体属性：(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 行高 line-height: normal;(正常) 单位：PX、PD、EM 粗细 font-weigh...
v-model --双向数据绑定
qq_45802159的博客
01-03 3179
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
css的animation动画
最新发布
yuan0209的博客
11-25 1万+
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
CSS基本标签使用
qq_56794643的博客
08-08 632
CSS基础标签及用法
html5 css3单双标签,HTML5 & CSS3 常用标签总结 适合小白
weixin_33506900的博客
06-18 375
HTML常用标签总结1.行内标签与块标签区别：块标签：独占一行，可以设置宽度和高度 ；行内标签：多个标签存在一行，对宽高属性值不生效。2.常见块标签：h1~h6、p、div、table、form、ul、li3.常见行内标签：a、img、span、input4.常见标签用法：标题标签段落标签这是超链接 div容器span容器表格用法第一行第一列第一行第二列第二行第一列第二行第二列第三行第一列第三行第...
html+css+javascript知识点总结.docx
11-17
html+css+javascript知识点总结.docx

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值