位置: IT常识 - 正文

css 实现太极效果(简单的css特效)

编辑:rootadmin
css 实现太极效果 目录一、简述二、太极效果制作一、简述

推荐整理分享css 实现太极效果(简单的css特效),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css写太极图,css特效代码,用css画太极,html5做个太极图,css实现太极图,用css画太极,css实现太极图,css实现太极图,内容如对您有帮助,希望把文章链接给更多的朋友!

本次主要介绍::after,::before,box-shadow这三个属性。

::after,::before这两个是伪类选择器,box-shaow是用来设置元素的阴影效果 before:向选定的元素前插入内容 after:向选定的元素后插入内容 使用content 属性来指定要插入的内容,值可以为空,但是不能不写,如果不写的话伪类选择器就不会显示出来。

例如以下代码:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>test</title> <style>div:before{ content:"- 注意-";}</style></head><body><div>我的名字是 Donald</div></body></html>css 实现太极效果(简单的css特效)

伪类选择器的内容是不可选中的

二、太极效果制作

1.第一步:编写html部分 我们只需要定义一个div标签即可,用它来完成太极的制作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>太极</title></head><body> <div></div></body></html>

2.第二步:设置div的样式

body{ background-color: antiquewhite;}div{ width: 150px; height: 300px; margin: 100px auto; background-color: white; border-radius: 50%; border-right: 150px solid black; box-shadow: 0px 0px 30px blueviolet; }

这里的box-shadow的第一个值是x轴移动的值,第二个值是y轴移动的值,第三个值代表模糊度,第四个是阴影的颜色。 效果: 第三步:通过伪类选择器画出两个小圆

div::after,div::before{ content: ""; display: block; border-radius: 50%; margin-left: 75px; border: 50px solid black; background-color: white; width:50px; height: 50px;}

content必须要写出来,值为空也可以,如果不写的话伪类选择器就不会显示。 设置它的边框颜色为黑色,然后就可以和大圆的黑色部分连接起来了。 效果: 4.第四步:将after的边框和背景分别改成白色和黑色。

/*覆盖上面::after的border和background-color两个属性*/div::after{ border: 50px solid white; background-color: black;}

效果: 5.当然你也可以给它个动画让它动起来,当我们鼠标移动到太极上时它就开始转动

div:hover{ animation: mytest 2s linear infinite; }@keyframes mytest { to{ transform: rotate(360deg); }}

CSS完整代码:

body{ background-color: antiquewhite;}div{ width: 150px; height: 300px; margin: 100px auto; background-color: white; border-radius: 50%; border-right: 150px solid black; box-shadow: 0px 0px 30px blueviolet; }div:hover{ animation: mytest 2s linear infinite; }@keyframes mytest { to{ transform: rotate(360deg); }}div::after,div::before{ content: ""; display: block; border-radius : 50%; margin-left: 75px; border: 50px solid black; background-color: white; width:50px; height: 50px;}div::after{ border: 50px solid white; background-color: black;}
本文链接地址:https://www.jiuchutong.com/zhishi/298349.html 转载请保留说明!

上一篇:ReID行人重识别(训练+检测,附代码),可做图像检索,陌生人检索等项目(行人重识别map)

下一篇:震撼,支持多模态模型的ChatGPT 4.0发布了(多模手机)

  • 小规模纳税人增值税减免账务处理
  • 餐饮业购买的油类有哪些
  • 递延所得税资产和负债怎么理解
  • 发票密码区超出可以用吗
  • 固定资产残值账务处理
  • 固定资产转固后发现少转费用了怎么办
  • 视同销售货物缴纳增值税的有哪些?
  • 待清算商户款项怎么做账
  • 资本成本与财务风险的区别
  • 雇佣外籍劳工
  • 销售开红字的账务处理
  • 收到抵物广告费的会计处理怎么做?
  • 公司购买设备24套
  • 税务清算审计需要多久
  • 小规模企业季度超过30万,怎么收取增值税
  • 物流企业税务稽查要点
  • 装修待摊费用当月摊销吗
  • 卫生许可证为什么需要两个健康证
  • 托收凭证的会计科目
  • 其他应收款押金计提坏账吗
  • 出口转内销的销项税怎么计算
  • 民间非营利组织会计制度会计科目
  • 去国外参加展会带什么东西
  • 背书人账户名称填什么
  • 只交社保不发工资可以吗
  • 企业间实物交易是指
  • 新空调的安装费是多少
  • 财务人员如何审核招待费报销单
  • 理财的利息收入计入什么科目
  • 我国中小企业成本管理现状
  • 尚融宝盈(宁波)投资中心(有限合伙)
  • 又拍云使用教程
  • php安装及使用教程
  • 企业以付费的形式
  • Vue Router4 ,prams 传参失效和报错问题
  • 真实世界人工智能
  • sosreport命令收集详细信息
  • qt 5.15 编译
  • 帝国cms采集标签
  • react高阶组件
  • 企业股权投资收益交增值税吗
  • 长期股权投资为什么不是所有者权益
  • 工会经费通过应交税费科目核算吗
  • 工会会计固定基金
  • 小规模企业增值税税收优惠政策2023
  • 定期定额自行申报表
  • 一般纳税人认定标准
  • 政府预算会计的会计科目
  • 纳税调整怎么做
  • 原材料当废品卖可以吗
  • 股权转让后再转让
  • 已开具发票验旧
  • 坏账准备转回是什么意思
  • 研发费用如何做分录分析
  • mysql中mysqldump
  • 分配服务器失败
  • c#如何使用数据库
  • windows xp正式退休
  • quicklook预览word
  • opensuse安装显卡驱动
  • excel表格用windows7打不开
  • windows 8
  • 电脑没有网络连接怎么办
  • win7网页有错误如何修复?
  • python中布尔运算
  • 网络游戏数据包
  • jquery动态添加样式
  • JavaScript中的this
  • jquery判断div是否为空
  • bootstrapped 5%
  • jquery 插件写法
  • jquery中的children
  • ca证书怎么下载安装
  • 国家税务局2017年11号
  • 如果我中了双色球
  • 广东 电子税局 app
  • 晋江劳动局地址
  • 内蒙古国家税务总局官网
  • 甘肃省35条措施的内容是什么
  • 请问在哪里可以看到
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设